{% extends 'system_settings/base_settings.html' %}
{% load static %}

{% block title %}Пользователь создан{% endblock %}

{% block settings_content %}
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card border-success">
            <div class="card-header bg-success text-white">
                <h4 class="mb-0">
                    <i class="bi bi-check-circle"></i> Пользователь успешно создан
                </h4>
            </div>
            <div class="card-body">
                <div class="alert alert-warning">
                    <i class="bi bi-exclamation-triangle"></i>
                    <strong>Важно!</strong> Сохраните эти данные - пароль больше не будет показан.
                </div>

                <div class="mb-4">
                    <h5>Данные для входа:</h5>
                    <table class="table table-bordered">
                        <tbody>
                            <tr>
                                <th width="30%">Email (логин):</th>
                                <td>
                                    <code id="userEmail" class="fs-5">{{ created_user_email }}</code>
                                    <button onclick="copyEmail()" class="btn btn-sm btn-outline-secondary ms-2">
                                        <i class="bi bi-clipboard"></i> Копировать
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <th>Пароль:</th>
                                <td>
                                    <code id="userPassword" class="fs-5 text-danger">{{ generated_password }}</code>
                                    <button onclick="copyPassword()" class="btn btn-sm btn-outline-secondary ms-2">
                                        <i class="bi bi-clipboard"></i> Копировать
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <th>Роль:</th>
                                <td><span class="badge bg-primary">{{ user_role }}</span></td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="mb-4">
                    <button onclick="copyCredentials()" class="btn btn-primary btn-lg">
                        <i class="bi bi-clipboard-check"></i> Копировать логин и пароль
                    </button>
                    <small class="text-muted d-block mt-2">
                        Формат: <code>email / password</code>
                    </small>
                </div>

                <div class="d-grid gap-2">
                    <a href="{% url 'system_settings:user_roles:list' %}" class="btn btn-success">
                        <i class="bi bi-list"></i> Перейти к списку пользователей
                    </a>
                    <a href="{% url 'system_settings:user_roles:create' %}" class="btn btn-outline-secondary">
                        <i class="bi bi-plus-circle"></i> Создать еще одного пользователя
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function copyEmail() {
        const email = document.getElementById('userEmail').textContent;
        navigator.clipboard.writeText(email).then(function () {
            showCopyFeedback('Email скопирован!');
        });
    }

    function copyPassword() {
        const password = document.getElementById('userPassword').textContent;
        navigator.clipboard.writeText(password).then(function () {
            showCopyFeedback('Пароль скопирован!');
        });
    }

    function copyCredentials() {
        const email = document.getElementById('userEmail').textContent;
        const password = document.getElementById('userPassword').textContent;
        const credentials = `${email} / ${password}`;

        navigator.clipboard.writeText(credentials).then(function () {
            showCopyFeedback('Логин и пароль скопированы!');
        });
    }

    function showCopyFeedback(message) {
        // Создаем временное уведомление
        const alert = document.createElement('div');
        alert.className = 'alert alert-success alert-dismissible fade show position-fixed top-0 start-50 translate-middle-x mt-3';
        alert.style.zIndex = '9999';
        alert.innerHTML = `
        <i class="bi bi-check-circle"></i> ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
        document.body.appendChild(alert);

        // Автоматически удаляем через 3 секунды
        setTimeout(() => {
            alert.remove();
        }, 3000);
    }
</script>
{% endblock %}