{% extends "base.html" %}

{% block title %}Benutzer bearbeiten - Mercedes-Benz MYP Platform{% endblock %}

{% block head %}
{{ super() }}
<meta name="csrf-token" content="{{ csrf_token() }}">
{% endblock %}

{% block content %}
<div class="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900">
    <div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        
        <!-- Header -->
        <div class="mb-8">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-3xl font-bold text-slate-900 dark:text-white">Benutzer bearbeiten</h1>
                    <p class="text-slate-600 dark:text-slate-400 mt-2">Bearbeiten Sie die Daten von {{ user.name or user.email }}</p>
                </div>
                <a href="{{ url_for('admin_page', tab='users') }}" class="inline-flex items-center px-4 py-2 bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-300 rounded-xl hover:bg-slate-300 dark:hover:bg-slate-600 transition-all duration-300">
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
                    </svg>
                    Zurück zur Benutzerverwaltung
                </a>
            </div>
        </div>

        <!-- Form -->
        <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-xl p-8">
            <form method="POST" action="{{ url_for('admin_update_user_form', user_id=user.id) }}" class="space-y-6">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                <input type="hidden" name="_method" value="PUT"/>
                
                <!-- E-Mail -->
                <div>
                    <label for="email" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
                        E-Mail-Adresse
                    </label>
                    <input type="email" name="email" id="email" required
                           value="{{ user.email }}"
                           class="w-full px-4 py-3 border border-slate-300 dark:border-slate-600 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-slate-700 dark:text-white"
                           placeholder="benutzer@mercedes-benz.com">
                </div>

                <!-- Name -->
                <div>
                    <label for="name" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
                        Vollständiger Name
                    </label>
                    <input type="text" name="name" id="name"
                           value="{{ user.name }}"
                           class="w-full px-4 py-3 border border-slate-300 dark:border-slate-600 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-slate-700 dark:text-white"
                           placeholder="Max Mustermann">
                </div>

                <!-- Neues Passwort (optional) -->
                <div>
                    <label for="password" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
                        Neues Passwort (leer lassen, um beizubehalten)
                    </label>
                    <input type="password" name="password" id="password"
                           class="w-full px-4 py-3 border border-slate-300 dark:border-slate-600 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-slate-700 dark:text-white"
                           placeholder="Neues Passwort">
                </div>

                <!-- Rolle -->
                <div>
                    <label for="role" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
                        Benutzerrolle
                    </label>
                    <select name="role" id="role" 
                            class="w-full px-4 py-3 border border-slate-300 dark:border-slate-600 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-slate-700 dark:text-white">
                        <option value="user" {% if not user.is_admin %}selected{% endif %}>Benutzer</option>
                        <option value="admin" {% if user.is_admin %}selected{% endif %}>Administrator</option>
                    </select>
                </div>

                <!-- Status -->
                <div>
                    <label for="is_active" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
                        Benutzerstatus
                    </label>
                    <select name="is_active" id="is_active" 
                            class="w-full px-4 py-3 border border-slate-300 dark:border-slate-600 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-slate-700 dark:text-white">
                        <option value="true" {% if user.active %}selected{% endif %}>Aktiv</option>
                        <option value="false" {% if not user.active %}selected{% endif %}>Deaktiviert</option>
                    </select>
                </div>

                <!-- Berechtigungen -->
                <div class="border-t border-slate-200 dark:border-slate-600 pt-6">
                    <h3 class="text-lg font-medium text-slate-900 dark:text-white mb-4">Benutzerberechtigungen</h3>
                    
                    <div class="space-y-4">
                        <!-- Jobs ohne Genehmigung starten -->
                        <div class="flex items-center justify-between">
                            <div>
                                <label for="can_start_jobs" class="text-sm font-medium text-slate-700 dark:text-slate-300">
                                    Jobs ohne Genehmigung starten
                                </label>
                                <p class="text-xs text-slate-500 dark:text-slate-400">
                                    Benutzer kann eigene Druckjobs ohne Admin-Genehmigung starten
                                </p>
                            </div>
                            <div class="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in">
                                <input type="checkbox" name="can_start_jobs" id="can_start_jobs" 
                                       {% if user.permissions and user.permissions.can_start_jobs %}checked{% endif %}
                                       class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer">
                                <label for="can_start_jobs" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                            </div>
                        </div>

                        <!-- Genehmigungspflicht -->
                        <div class="flex items-center justify-between">
                            <div>
                                <label for="needs_approval" class="text-sm font-medium text-slate-700 dark:text-slate-300">
                                    Genehmigungspflicht für Jobs
                                </label>
                                <p class="text-xs text-slate-500 dark:text-slate-400">
                                    Jobs des Benutzers müssen von einem Admin genehmigt werden
                                </p>
                            </div>
                            <div class="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in">
                                <input type="checkbox" name="needs_approval" id="needs_approval" 
                                       {% if not user.permissions or user.permissions.needs_approval %}checked{% endif %}
                                       class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer">
                                <label for="needs_approval" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                            </div>
                        </div>

                        <!-- Jobs genehmigen -->
                        <div class="flex items-center justify-between">
                            <div>
                                <label for="can_approve_jobs" class="text-sm font-medium text-slate-700 dark:text-slate-300">
                                    Jobs genehmigen
                                </label>
                                <p class="text-xs text-slate-500 dark:text-slate-400">
                                    Benutzer kann Gastanfragen und fremde Jobs genehmigen
                                </p>
                            </div>
                            <div class="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in">
                                <input type="checkbox" name="can_approve_jobs" id="can_approve_jobs" 
                                       {% if user.permissions and user.permissions.can_approve_jobs %}checked{% endif %}
                                       class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer">
                                <label for="can_approve_jobs" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Buttons -->
                <div class="flex items-center justify-end space-x-4 pt-4">
                    <a href="{{ url_for('admin_page', tab='users') }}" 
                       class="px-6 py-3 border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-300 rounded-xl hover:bg-slate-50 dark:hover:bg-slate-700 transition-all duration-300">
                        Abbrechen
                    </a>
                    <button type="submit" 
                            class="px-6 py-3 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-xl hover:from-blue-600 hover:to-blue-700 transition-all duration-300 shadow-lg">
                        Änderungen speichern
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}