{% extends "base.html" %}

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

{% block head %}
{{ super() }}
<meta name="csrf-token" content="{{ csrf_token() }}">
<style>
/* Modern Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 28px;
    border: 2px solid rgba(148, 163, 184, 0.2);
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.1),
        0 1px 3px rgba(0, 0, 0, 0.1);
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background: linear-gradient(135deg, #ffffff, #f8fafc);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.15),
        0 1px 4px rgba(0, 0, 0, 0.1);
}

input:checked + .toggle-slider {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 
        inset 0 2px 4px rgba(29, 78, 216, 0.2),
        0 0 0 3px rgba(59, 130, 246, 0.1),
        0 4px 12px rgba(59, 130, 246, 0.2);
}

input:checked + .toggle-slider:before {
    transform: translateX(24px);
    background: linear-gradient(135deg, #ffffff, #f1f5f9);
    box-shadow: 
        0 3px 12px rgba(0, 0, 0, 0.2),
        0 1px 6px rgba(0, 0, 0, 0.15);
}

/* Premium Input Fields */
.premium-input {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.95));
    backdrop-filter: blur(8px);
    border: 2px solid transparent;
    background-clip: padding-box;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.premium-input:before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 2px;
    background: linear-gradient(135deg, #e2e8f0, #cbd5e1, #e2e8f0);
    border-radius: inherit;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
}

.premium-input:focus {
    transform: translateY(-1px);
    box-shadow: 
        0 10px 25px rgba(59, 130, 246, 0.15),
        0 4px 10px rgba(59, 130, 246, 0.1),
        0 0 0 3px rgba(59, 130, 246, 0.1);
}

.premium-input:focus:before {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8, #3b82f6);
}

/* Dark mode styles */
.dark .premium-input {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    color: #f1f5f9;
}

.dark .premium-input:before {
    background: linear-gradient(135deg, #475569, #334155, #475569);
}

.dark .toggle-slider {
    background: linear-gradient(135deg, #475569, #334155);
    border-color: rgba(71, 85, 105, 0.3);
}

/* Permission Card Animations */
.permission-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.permission-card:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Floating Labels */
.floating-label {
    position: relative;
}

.floating-label input:focus + label,
.floating-label input:not(:placeholder-shown) + label {
    transform: translateY(-24px) scale(0.875);
    color: #3b82f6;
}

.floating-label label {
    position: absolute;
    left: 12px;
    top: 14px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    color: #64748b;
}

/* Button Hover Effects */
.btn-gradient {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    position: relative;
    overflow: hidden;
}

.btn-gradient:before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn-gradient:hover:before {
    left: 100%;
}

/* Glass Effect Cards */
.glass-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

.dark .glass-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
</style>
{% endblock %}

{% block content %}
<div class="min-h-screen bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 dark:from-slate-900 dark:via-blue-900 dark:to-indigo-900 relative overflow-hidden">
    <!-- Animated Background Elements -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
        <div class="absolute -top-40 -right-32 w-96 h-96 bg-gradient-to-br from-blue-400/20 to-indigo-600/20 rounded-full blur-3xl animate-pulse"></div>
        <div class="absolute -bottom-40 -left-32 w-96 h-96 bg-gradient-to-tr from-purple-400/20 to-pink-600/20 rounded-full blur-3xl animate-pulse delay-1000"></div>
        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-gradient-to-r from-blue-300/10 to-indigo-300/10 rounded-full blur-2xl animate-pulse delay-500"></div>
    </div>

    <div class="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        
        <!-- Modern Header with Glass Effect -->
        <div class="mb-12">
            <div class="glass-card rounded-3xl p-8 mb-8">
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-6">
                        <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl flex items-center justify-center shadow-xl">
                            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/>
                            </svg>
                        </div>
                        <div>
                            <h1 class="text-4xl font-bold bg-gradient-to-r from-slate-900 to-slate-700 dark:from-white dark:to-gray-200 bg-clip-text text-transparent">
                                Benutzer bearbeiten
                            </h1>
                            <p class="text-lg text-slate-600 dark:text-slate-400 mt-2 flex items-center">
                                <svg class="w-5 h-5 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                                </svg>
                                {{ user.name or user.email }}
                            </p>
                        </div>
                    </div>
                    <a href="{{ url_for('admin_page', tab='users') }}" 
                       class="group inline-flex items-center px-6 py-3 bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm text-slate-700 dark:text-slate-300 rounded-2xl hover:bg-white dark:hover:bg-slate-700 transition-all duration-300 shadow-lg hover:shadow-xl border border-white/20 dark:border-slate-700/50">
                        <svg class="w-5 h-5 mr-2 transition-transform group-hover:-translate-x-1" 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>
                        <span class="font-medium">Zurück zur Verwaltung</span>
                    </a>
                </div>
            </div>
        </div>

        <!-- Modern Form with Glass Effect -->
        <div class="glass-card rounded-3xl p-10 shadow-2xl">
            <form method="POST" action="{{ url_for('admin_update_user_form', user_id=user.id) }}" class="space-y-8" id="userEditForm">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                <input type="hidden" name="_method" value="PUT"/>
                
                <!-- Form Header -->
                <div class="border-b border-slate-200 dark:border-slate-700 pb-8">
                    <h2 class="text-2xl font-bold text-slate-900 dark:text-white mb-3 flex items-center">
                        <svg class="w-6 h-6 mr-3 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                        </svg>
                        Benutzerdaten bearbeiten
                    </h2>
                    <p class="text-slate-600 dark:text-slate-400 text-lg">
                        Bearbeiten Sie die Informationen und Berechtigungen für diesen Benutzer
                    </p>
                </div>

                <!-- Personal Information Section -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                    <!-- Left Column: Basic Info -->
                    <div class="space-y-6">
                        <div class="bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 rounded-2xl p-6 border border-blue-200/50 dark:border-blue-800/50">
                            <h3 class="text-lg font-semibold text-slate-900 dark:text-white mb-6 flex items-center">
                                <svg class="w-5 h-5 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                                </svg>
                                Persönliche Informationen
                            </h3>
                            
                            <!-- Username Field -->
                            <div class="mb-6">
                                <label for="username" class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">
                                    Benutzername
                                </label>
                                <div class="relative group">
                                    <input type="text" 
                                           name="username" 
                                           id="username" 
                                           required
                                           value="{{ user.username }}"
                                           class="premium-input w-full px-5 py-4 rounded-xl text-slate-900 dark:text-white placeholder-slate-500 dark:placeholder-slate-400 focus:outline-none"
                                           placeholder="max.mustermann">
                                    <div class="absolute inset-y-0 right-4 flex items-center pointer-events-none">
                                        <svg class="w-5 h-5 text-slate-400 group-focus-within:text-blue-500 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"/>
                                        </svg>
                                    </div>
                                </div>
                            </div>

                            <!-- Full Name Field -->
                            <div class="mb-6">
                                <label for="name" class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">
                                    Vollständiger Name
                                </label>
                                <div class="relative group">
                                    <input type="text" 
                                           name="name" 
                                           id="name"
                                           value="{{ user.name }}"
                                           class="premium-input w-full px-5 py-4 rounded-xl text-slate-900 dark:text-white placeholder-slate-500 dark:placeholder-slate-400 focus:outline-none"
                                           placeholder="Max Mustermann">
                                    <div class="absolute inset-y-0 right-4 flex items-center pointer-events-none">
                                        <svg class="w-5 h-5 text-slate-400 group-focus-within:text-blue-500 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                                        </svg>
                                    </div>
                                </div>
                            </div>

                            <!-- Password Field -->
                            <div>
                                <label for="password" class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">
                                    Neues Passwort
                                    <span class="text-xs font-normal text-slate-500 dark:text-slate-400 ml-2">(optional)</span>
                                </label>
                                <div class="relative group">
                                    <input type="password" 
                                           name="password" 
                                           id="password"
                                           class="premium-input w-full px-5 py-4 rounded-xl text-slate-900 dark:text-white placeholder-slate-500 dark:placeholder-slate-400 focus:outline-none"
                                           placeholder="Leer lassen, um beizubehalten">
                                    <div class="absolute inset-y-0 right-4 flex items-center pointer-events-none">
                                        <svg class="w-5 h-5 text-slate-400 group-focus-within:text-blue-500 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 0h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
                                        </svg>
                                    </div>
                                </div>
                                <p class="text-xs text-slate-500 dark:text-slate-400 mt-2 ml-1">
                                    Lassen Sie das Feld leer, um das aktuelle Passwort beizubehalten
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Right Column: Role & Status -->
                    <div class="space-y-6">
                        <div class="bg-gradient-to-br from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 rounded-2xl p-6 border border-green-200/50 dark:border-green-800/50">
                            <h3 class="text-lg font-semibold text-slate-900 dark:text-white mb-6 flex items-center">
                                <svg class="w-5 h-5 mr-2 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                </svg>
                                Rolle & Status
                            </h3>
                            
                            <!-- Role Selection -->
                            <div class="mb-6">
                                <label for="role" class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">
                                    Benutzerrolle
                                </label>
                                <div class="relative">
                                    <select name="role" 
                                            id="role" 
                                            class="premium-input w-full px-5 py-4 rounded-xl text-slate-900 dark:text-white focus:outline-none appearance-none cursor-pointer">
                                        <option value="user" {% if not user.is_admin %}selected{% endif %}>
                                            👤 Standard-Benutzer
                                        </option>
                                        <option value="admin" {% if user.is_admin %}selected{% endif %}>
                                            👑 Administrator
                                        </option>
                                    </select>
                                    <div class="absolute inset-y-0 right-4 flex items-center pointer-events-none">
                                        <svg class="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                                        </svg>
                                    </div>
                                </div>
                            </div>

                            <!-- Status Selection -->
                            <div>
                                <label for="is_active" class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">
                                    Kontostatus
                                </label>
                                <div class="relative">
                                    <select name="is_active" 
                                            id="is_active" 
                                            class="premium-input w-full px-5 py-4 rounded-xl text-slate-900 dark:text-white focus:outline-none appearance-none cursor-pointer">
                                        <option value="true" {% if user.active %}selected{% endif %}>
                                            ✅ Aktiv
                                        </option>
                                        <option value="false" {% if not user.active %}selected{% endif %}>
                                            ❌ Deaktiviert
                                        </option>
                                    </select>
                                    <div class="absolute inset-y-0 right-4 flex items-center pointer-events-none">
                                        <svg class="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                                        </svg>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Advanced Permissions Section -->
                <div class="bg-gradient-to-br from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 rounded-2xl p-8 border border-purple-200/50 dark:border-purple-800/50">
                    <div class="mb-8">
                        <h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3 flex items-center">
                            <svg class="w-6 h-6 mr-3 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 0h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
                            </svg>
                            Erweiterte Berechtigungen
                        </h3>
                        <p class="text-slate-600 dark:text-slate-400">
                            Konfigurieren Sie die spezifischen Zugriffsrechte für diesen Benutzer
                        </p>
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <!-- Permission: Start Jobs -->
                        <div class="permission-card bg-white/60 dark:bg-slate-800/60 backdrop-blur-sm rounded-2xl p-6 border border-white/50 dark:border-slate-700/50">
                            <div class="flex items-start justify-between mb-4">
                                <div class="flex-1">
                                    <div class="flex items-center mb-2">
                                        <svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h1m4 0h1m-6 4h.01M19 10a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                        </svg>
                                        <h4 class="font-semibold text-slate-900 dark:text-white">Jobs starten</h4>
                                    </div>
                                    <p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
                                        Benutzer kann eigene Druckjobs ohne Admin-Genehmigung starten
                                    </p>
                                </div>
                                <div class="ml-4">
                                    <label class="toggle-switch">
                                        <input type="checkbox" 
                                               name="can_start_jobs" 
                                               {% if user.permissions and user.permissions.can_start_jobs %}checked{% endif %}>
                                        <span class="toggle-slider"></span>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- Permission: Needs Approval -->
                        <div class="permission-card bg-white/60 dark:bg-slate-800/60 backdrop-blur-sm rounded-2xl p-6 border border-white/50 dark:border-slate-700/50">
                            <div class="flex items-start justify-between mb-4">
                                <div class="flex-1">
                                    <div class="flex items-center mb-2">
                                        <svg class="w-5 h-5 text-orange-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                        </svg>
                                        <h4 class="font-semibold text-slate-900 dark:text-white">Genehmigungspflicht</h4>
                                    </div>
                                    <p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
                                        Jobs des Benutzers müssen von einem Admin genehmigt werden
                                    </p>
                                </div>
                                <div class="ml-4">
                                    <label class="toggle-switch">
                                        <input type="checkbox" 
                                               name="needs_approval" 
                                               {% if not user.permissions or user.permissions.needs_approval %}checked{% endif %}>
                                        <span class="toggle-slider"></span>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- Permission: Can Approve -->
                        <div class="permission-card bg-white/60 dark:bg-slate-800/60 backdrop-blur-sm rounded-2xl p-6 border border-white/50 dark:border-slate-700/50">
                            <div class="flex items-start justify-between mb-4">
                                <div class="flex-1">
                                    <div class="flex items-center mb-2">
                                        <svg class="w-5 h-5 text-blue-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
                                        </svg>
                                        <h4 class="font-semibold text-slate-900 dark:text-white">Jobs genehmigen</h4>
                                    </div>
                                    <p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
                                        Benutzer kann Gastanfragen und fremde Jobs genehmigen
                                    </p>
                                </div>
                                <div class="ml-4">
                                    <label class="toggle-switch">
                                        <input type="checkbox" 
                                               name="can_approve_jobs" 
                                               {% if user.permissions and user.permissions.can_approve_jobs %}checked{% endif %}>
                                        <span class="toggle-slider"></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="flex items-center justify-between pt-8 border-t border-slate-200 dark:border-slate-700">
                    <div class="flex items-center space-x-4">
                        <div class="flex items-center text-sm text-slate-500 dark:text-slate-400">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                            <span>Änderungen werden sofort gespeichert</span>
                        </div>
                    </div>
                    
                    <div class="flex items-center space-x-4">
                        <a href="{{ url_for('admin_page', tab='users') }}" 
                           class="group inline-flex items-center px-8 py-4 bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm text-slate-700 dark:text-slate-300 rounded-2xl hover:bg-white dark:hover:bg-slate-700 transition-all duration-300 shadow-lg hover:shadow-xl border border-white/20 dark:border-slate-700/50">
                            <svg class="w-5 h-5 mr-2 transition-transform group-hover:-translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                            </svg>
                            <span class="font-medium">Abbrechen</span>
                        </a>
                        
                        <button type="submit" 
                                class="btn-gradient group inline-flex items-center px-8 py-4 text-white rounded-2xl hover:shadow-2xl transition-all duration-300 shadow-xl font-semibold text-lg relative overflow-hidden">
                            <svg class="w-5 h-5 mr-3 transition-transform group-hover:scale-110" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                            </svg>
                            <span>Änderungen speichern</span>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Enhanced JavaScript for better UX -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('userEditForm');
    const submitButton = form.querySelector('button[type="submit"]');
    
    // Add smooth loading state
    form.addEventListener('submit', function(e) {
        submitButton.disabled = true;
        submitButton.innerHTML = `
            <svg class="w-5 h-5 mr-3 animate-spin" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            <span>Speichere...</span>
        `;
    });

    // Enhanced input focus effects
    const inputs = form.querySelectorAll('.premium-input');
    inputs.forEach(input => {
        input.addEventListener('focus', function() {
            this.parentElement.classList.add('focused');
        });
        
        input.addEventListener('blur', function() {
            this.parentElement.classList.remove('focused');
        });
    });

    // Smooth scroll on form errors
    const errors = document.querySelectorAll('.error-message');
    if (errors.length > 0) {
        errors[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
    }

    // Toggle switch animations
    const toggles = document.querySelectorAll('.toggle-switch input');
    toggles.forEach(toggle => {
        toggle.addEventListener('change', function() {
            const slider = this.nextElementSibling;
            if (this.checked) {
                slider.style.transform = 'scale(1.1)';
                setTimeout(() => {
                    slider.style.transform = 'scale(1)';
                }, 150);
            }
        });
    });

    // Form validation feedback
    const requiredInputs = form.querySelectorAll('input[required]');
    requiredInputs.forEach(input => {
        input.addEventListener('blur', function() {
            if (this.value.trim() === '') {
                this.classList.add('border-red-300');
                this.classList.remove('border-green-300');
            } else {
                this.classList.add('border-green-300');
                this.classList.remove('border-red-300');
            }
        });
    });

    // Auto-save notification (mock)
    let saveTimeout;
    inputs.forEach(input => {
        input.addEventListener('input', function() {
            clearTimeout(saveTimeout);
            saveTimeout = setTimeout(() => {
                // Could implement auto-save here
                console.log('Changes detected - auto-save ready');
            }, 2000);
        });
    });
});
</script>
{% endblock %}