{% extends "sidebar.html" %}

{% block title %}AstraOS — User Management{% endblock %}

{% block head %}
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
{% endblock %}

{% block content %}
<div x-data="{ showAddUserModal: false, showDeleteModal: false, userToDelete: null }">
    <div class="space-y-10">
        <!-- HEADER -->
        <header class="flex justify-between items-center">
            <h2 class="text-4xl font-bold tracking-wide {% if maintenance_active %}text-yellow-300{% else %}text-purple-300{% endif %}">User Management</h2>
            <button @click="showAddUserModal = true" class="font-bold py-2 px-4 rounded-lg transition text-white
                           {% if maintenance_active %}bg-yellow-600 hover:bg-yellow-700{% else %}bg-purple-600 hover:bg-purple-700{% endif %}">
                + Neuen Benutzer hinzufügen
            </button>
        </header>
        <!-- USER TABLE -->
        <div class="bg-black/40 rounded-xl backdrop-blur-lg overflow-hidden
                    {% if maintenance_active %}border border-yellow-500/30{% else %}border border-purple-500/20{% endif %}">
            <table class="min-w-full divide-y {% if maintenance_active %}divide-yellow-500/30{% else %}divide-purple-500/20{% endif %}">
                <thead class="bg-black/20">
                    <tr>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Benutzername</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Rolle</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Erstellt am</th>
                        <th scope="col" class="relative px-6 py-3">
                            <span class="sr-only">Aktionen</span>
                        </th>
                    </tr>
                </thead>
                <tbody class="divide-y {% if maintenance_active %}divide-yellow-500/30{% else %}divide-purple-500/30{% endif %}">
                    {% for user in users %}
                    <tr class="transition {% if maintenance_active %}hover:bg-yellow-500/5{% else %}hover:bg-purple-500/5{% endif %}">
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-white">{{ user.username }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">{{ user.role_name }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">{{ user.creation_date.strftime('%d.%m.%Y') if user.creation_date else 'N/A' }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                            <button @click="userToDelete = '{{ user._id }}'; showDeleteModal = true" class="text-red-400 hover:text-red-300">Löschen</button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- ADD USER MODAL -->
    <div x-show="showAddUserModal" @keydown.escape.window="showAddUserModal = false" class="fixed inset-0 bg-black/70 backdrop-blur-sm flex items-center justify-center z-50" style="display: none;">
        <div @click.away="showAddUserModal = false" class="bg-gray-900 rounded-xl shadow-2xl p-8 w-full max-w-md
                                                       {% if maintenance_active %}border border-yellow-500/50{% else %}border border-purple-500/50{% endif %}">
            <h3 class="text-2xl font-bold mb-6 {% if maintenance_active %}text-yellow-300{% else %}text-purple-300{% endif %}">Neuen Benutzer erstellen</h3>
            <form action="{{ url_for('add_user') }}" method="POST" class="space-y-4">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                <div>
                    <label for="username" class="block text-sm font-medium text-gray-300">Benutzername</label>
                    <input type="text" name="username" id="username" required class="mt-1 w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white focus:outline-none focus:ring-2 {% if maintenance_active %}focus:ring-yellow-500{% else %}focus:ring-purple-500{% endif %}">
                </div>
                <div>
                    <label for="password" class="block text-sm font-medium text-gray-300">Passwort</label>
                    <input type="password" name="password" id="password" required class="mt-1 w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white focus:outline-none focus:ring-2 {% if maintenance_active %}focus:ring-yellow-500{% else %}focus:ring-purple-500{% endif %}">
                </div>
                <div>
                    <label for="role" class="block text-sm font-medium text-gray-300">Rolle</label>
                    <select name="role" id="role" required class="mt-1 w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white focus:outline-none focus:ring-2 {% if maintenance_active %}focus:ring-yellow-500{% else %}focus:ring-purple-500{% endif %}">
                        {% for role in roles %}
                        <option value="{{ role._id }}">{{ role.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="flex justify-end gap-4 pt-4">
                    <button type="button" @click="showAddUserModal = false" class="px-4 py-2 rounded-lg text-gray-300 hover:bg-gray-700 transition">Abbrechen</button>
                    <button type="submit" class="px-4 py-2 font-semibold rounded-lg transition text-white
                                               {% if maintenance_active %}bg-yellow-600 hover:bg-yellow-700{% else %}bg-purple-600 hover:bg-purple-700{% endif %}">Benutzer erstellen</button>
                </div>
            </form>
        </div>
    </div>
    <!-- DELETE CONFIRMATION MODAL -->
    <div x-show="showDeleteModal" @keydown.escape.window="showDeleteModal = false" class="fixed inset-0 bg-black/70 backdrop-blur-sm flex items-center justify-center z-50" style="display: none;">
        <div @click.away="showDeleteModal = false" class="bg-gray-900 border border-red-500/50 rounded-xl shadow-2xl p-8 w-full max-w-md">
            <h3 class="text-2xl font-bold text-red-400 mb-4">Benutzer löschen</h3>
            <p class="text-gray-300 mb-6">Möchten Sie diesen Benutzer wirklich endgültig löschen? Diese Aktion kann nicht rückgängig gemacht werden.</p>
            <form :action="'/delete_user/' + userToDelete" method="POST" class="flex justify-end gap-4">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                <button type="button" @click="showDeleteModal = false" class="px-4 py-2 rounded-lg text-gray-300 hover:bg-gray-700 transition">Abbrechen</button>
                <button type="submit" class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white font-semibold rounded-lg transition">Löschen</button>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block loading %}
<!-- Optional: Loading-Screen wie im Dashboard, falls gewünscht -->
{% endblock %}