{% extends "admin/base.html" %}

{% block title %}Users{% endblock %}

{% block content %}
<div class="flex justify-between items-center mb-8">
    <h1 class="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-white to-cyan-400">
        User Management
    </h1>
    <button onclick="document.getElementById('add-user-modal').classList.remove('hidden')"
        class="bg-cyan-500/10 hover:bg-cyan-500/20 text-cyan-400 border border-cyan-500/50 px-4 py-2 rounded text-sm font-bold uppercase tracking-wider transition-all">
        + Add User
    </button>
</div>

<!-- Users List -->
<div class="terminal-box rounded-lg overflow-hidden">
    <table class="w-full text-left text-sm">
        <thead class="bg-white/5 text-white/50 text-xs uppercase tracking-wider font-bold">
            <tr>
                <th class="p-4">Name</th>
                <th class="p-4">Email</th>
                <th class="p-4">Role</th>
                <th class="p-4 text-right">Actions</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-white/10">
            {% for u in users %}
            <tr class="hover:bg-white/5 transition-colors group">
                <td class="p-4 font-bold text-white">{{ u.full_name }}</td>
                <td class="p-4 text-white/70 font-mono text-xs">{{ u.email }}</td>
                <td class="p-4">
                    {% if u.is_superuser %}
                    <span
                        class="bg-pink-500/10 text-pink-400 border border-pink-500/30 px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider">Superuser</span>
                    {% else %}
                    <span
                        class="bg-cyan-500/10 text-cyan-400 border border-cyan-500/30 px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider">Admin</span>
                    {% endif %}
                </td>
                <td class="p-4 text-right flex justify-end gap-2">
                    <button
                        class="edit-password-btn text-cyan-400 hover:text-cyan-300 transition-colors opacity-0 group-hover:opacity-100 text-xs"
                        data-user-id="{{ u.id }}" data-user-email="{{ u.email }}">
                        Edit Password
                    </button>
                    {% if u.id != user.id %}
                    <form action="/admin/users/delete/{{ u.id }}" method="POST" class="inline"
                        onsubmit="return confirm('Are you sure you want to delete this user?');">
                        <button type="submit"
                            class="text-red-400 hover:text-red-300 transition-colors opacity-0 group-hover:opacity-100 text-xs">
                            Delete
                        </button>
                    </form>
                    {% else %}
                    <span class="text-white/20 italic text-xs">It's you</span>
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<!-- Add User Modal -->
<div id="add-user-modal" class="fixed inset-0 z-50 hidden">
    <!-- Backdrop -->
    <div class="absolute inset-0 bg-black/80 backdrop-blur-sm"
        onclick="document.getElementById('add-user-modal').classList.add('hidden')"></div>

    <!-- Modal -->
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-md">
        <div class="terminal-box p-6 rounded-lg shadow-2xl shadow-cyan-500/20">
            <h3 class="text-xl font-bold text-cyan-400 mb-6">Add New User</h3>

            <form action="/admin/users/add" method="POST" class="space-y-4">
                <div>
                    <label class="block text-xs uppercase tracking-wider text-white/50 mb-1">Full Name</label>
                    <input type="text" name="full_name" required
                        class="w-full bg-black/50 border border-white/10 rounded p-2 text-white focus:border-cyan-500 focus:outline-none transition-colors">
                </div>

                <div>
                    <label class="block text-xs uppercase tracking-wider text-white/50 mb-1">Email</label>
                    <input type="email" name="email" required
                        class="w-full bg-black/50 border border-white/10 rounded p-2 text-white focus:border-cyan-500 focus:outline-none transition-colors">
                </div>

                <div>
                    <label class="block text-xs uppercase tracking-wider text-white/50 mb-1">Password</label>
                    <input type="password" name="password" required minlength="6"
                        class="w-full bg-black/50 border border-white/10 rounded p-2 text-white focus:border-cyan-500 focus:outline-none transition-colors">
                </div>

                <div class="flex items-center gap-2 pt-2">
                    <input type="checkbox" name="is_superuser" id="is_superuser" class="accent-cyan-400">
                    <label for="is_superuser" class="text-sm text-white/80 cursor-pointer select-none">Grant Superuser
                        Privileges</label>
                </div>

                <div class="pt-4 flex gap-3">
                    <button type="button" onclick="document.getElementById('add-user-modal').classList.add('hidden')"
                        class="flex-1 bg-white/10 hover:bg-white/20 text-white py-2 rounded text-sm font-bold uppercase tracking-wider transition-colors">
                        Cancel
                    </button>
                    <button type="submit"
                        class="flex-1 bg-cyan-600 hover:bg-cyan-500 text-white py-2 rounded text-sm font-bold uppercase tracking-wider transition-colors shadow-lg shadow-cyan-500/20">
                        Create User
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Password Modal -->
<div id="password-modal" class="fixed inset-0 z-50 hidden">
    <div class="absolute inset-0 bg-black/80 backdrop-blur-sm"
        onclick="document.getElementById('password-modal').classList.add('hidden')"></div>

    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-md">
        <div class="terminal-box p-6 rounded-lg shadow-2xl shadow-cyan-500/20">
            <h3 class="text-xl font-bold text-cyan-400 mb-2">Edit Password</h3>
            <p id="password-modal-email" class="text-white/50 text-xs mb-6 font-mono"></p>

            <form id="password-form" action="" method="POST" class="space-y-4">
                <div>
                    <label class="block text-xs uppercase tracking-wider text-white/50 mb-1">New Password</label>
                    <input type="password" name="password" required minlength="6"
                        class="w-full bg-black/50 border border-white/10 rounded p-2 text-white focus:border-cyan-500 focus:outline-none transition-colors">
                </div>
                <div>
                    <label class="block text-xs uppercase tracking-wider text-white/50 mb-1">Confirm Password</label>
                    <input type="password" name="confirm_password" required minlength="6"
                        class="w-full bg-black/50 border border-white/10 rounded p-2 text-white focus:border-cyan-500 focus:outline-none transition-colors">
                </div>

                <div class="pt-4 flex gap-3">
                    <button type="button" onclick="document.getElementById('password-modal').classList.add('hidden')"
                        class="flex-1 bg-white/10 hover:bg-white/20 text-white py-2 rounded text-sm font-bold uppercase tracking-wider transition-colors">
                        Cancel
                    </button>
                    <button type="submit"
                        class="flex-1 bg-cyan-600 hover:bg-cyan-500 text-white py-2 rounded text-sm font-bold uppercase tracking-wider transition-colors shadow-lg shadow-cyan-500/20">
                        Update Password
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    // Event delegation for edit password buttons
    document.querySelectorAll('.edit-password-btn').forEach(function (btn) {
        btn.addEventListener('click', function () {
            var userId = this.getAttribute('data-user-id');
            var email = this.getAttribute('data-user-email');
            document.getElementById('password-form').action = '/admin/users/password/' + userId;
            document.getElementById('password-modal-email').textContent = email;
            document.getElementById('password-modal').classList.remove('hidden');
        });
    });

    document.getElementById('password-form').addEventListener('submit', function (e) {
        var password = this.querySelector('input[name="password"]').value;
        var confirm = this.querySelector('input[name="confirm_password"]').value;
        if (password !== confirm) {
            e.preventDefault();
            alert('Passwords do not match!');
        }
    });
</script>
{% endblock %}