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

{% block title %}Feature Management{% endblock %}

{% block content %}
<div class="min-h-screen bg-slate-50 dark:bg-slate-900/50" x-data="{
    editModalOpen: false,
    featureToEdit: {
        id: null,
        name: '',
        url_name: '',
        description: '',
        category: '',
        is_active: true
    },
    showInactive: false,
    
    init() {
        console.log('Feature Management initialized with', {{ features|length }}, 'features');
    },
    
    openEditModal(feature) {
        this.featureToEdit = {
            id: feature.id,
            name: feature.name,
            url_name: feature.url_name,
            description: feature.description || '',
            category: feature.category || '',
            is_active: feature.is_active
        };
        this.editModalOpen = true;
        console.log('Edit modal opened for:', this.featureToEdit);
    },
    
    closeEditModal() {
        this.editModalOpen = false;
        this.featureToEdit = {
            id: null,
            name: '',
            url_name: '',
            description: '',
            category: '',
            is_active: true
        };
    }
}">
    
    <!-- Page Header -->
    <div class="bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-6">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-2xl font-bold text-slate-900 dark:text-slate-100">Feature Management</h1>
                    <p class="mt-1 text-sm text-slate-600 dark:text-slate-400">
                        Create, manage, and configure system features for role-based access control
                    </p>
                </div>
                <div class="flex items-center space-x-3">
                    <div class="flex items-center px-3 py-1.5 bg-slate-100 dark:bg-slate-700 rounded-full">
                        <div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div>
                        <span class="text-xs font-medium text-slate-700 dark:text-slate-300">
                            {{ features|length }} Features
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div class="grid grid-cols-1 xl:grid-cols-5 gap-8">
            
            <!-- Left Sidebar: Create Feature Form -->
            <div class="xl:col-span-2 space-y-6">
                <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 overflow-hidden sticky top-24">
                    <div class="px-6 py-5 border-b border-slate-100 dark:border-slate-700">
                        <h3 class="text-base font-semibold text-slate-900 dark:text-slate-100 flex items-center">
                            <svg class="w-4 h-4 mr-2 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                            </svg>
                            Create New Feature
                        </h3>
                        <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">
                            Add a new feature to your system's access control
                        </p>
                    </div>
                    
                    <form method="post" class="p-6 space-y-5">
                        {% csrf_token %}
                        <input type="hidden" name="action" value="create_feature">
                        
                        <div class="space-y-1">
                            <label for="name" class="block text-xs font-medium text-slate-700 dark:text-slate-300 uppercase tracking-wide">
                                Feature Name *
                            </label>
                            <input type="text" id="name" name="name" required 
                                   placeholder="e.g., User Management"
                                   class="w-full px-4 py-3 bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-slate-600 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent text-slate-900 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-500 transition-all duration-200">
                        </div>
                        
                        <div class="space-y-1">
                            <label for="url_name" class="block text-xs font-medium text-slate-700 dark:text-slate-300 uppercase tracking-wide">
                                URL Name *
                            </label>
                            <input type="text" id="url_name" name="url_name" required 
                                   placeholder="e.g., user_management"
                                   class="w-full px-4 py-3 bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-slate-600 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent text-slate-900 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-500 transition-all duration-200">
                            <p class="text-xs text-slate-500 dark:text-slate-400 mt-1 flex items-center">
                                <svg class="w-3 h-3 mr-1" 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"></path>
                                </svg>
                                Must match URL name in urls.py
                            </p>
                        </div>
                        
                        <div class="space-y-1">
                            <label for="description" class="block text-xs font-medium text-slate-700 dark:text-slate-300 uppercase tracking-wide">
                                Description
                            </label>
                            <textarea id="description" name="description" rows="3" 
                                      placeholder="Brief description of the feature's purpose..."
                                      class="w-full px-4 py-3 bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-slate-600 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent text-slate-900 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-500 transition-all duration-200 resize-none"></textarea>
                        </div>
                        
                        <div class="space-y-1">
                            <label for="category" class="block text-xs font-medium text-slate-700 dark:text-slate-300 uppercase tracking-wide">
                                Category
                            </label>
                            <input type="text" id="category" name="category" 
                                   placeholder="e.g., Administration, Reports"
                                   class="w-full px-4 py-3 bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-slate-600 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent text-slate-900 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-500 transition-all duration-200">
                        </div>
                        
                        <div class="flex items-center p-4 bg-blue-50 dark:bg-blue-900/20 rounded-xl border border-blue-200 dark:border-blue-800">
                            <input id="is_active" name="is_active" type="checkbox" checked
                                   class="w-4 h-4 text-blue-600 border-slate-300 dark:border-slate-500 rounded focus:ring-2 focus:ring-blue-500 dark:bg-slate-700">
                            <label for="is_active" class="ml-3 text-sm font-medium text-blue-900 dark:text-blue-100">
                                Active feature (available for assignment)
                            </label>
                        </div>
                        
                        <button type="submit" 
                                class="w-full flex items-center justify-center px-4 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-slate-800 transition-all duration-200 shadow-sm hover:shadow-md">
                            <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="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                            </svg>
                            Create Feature
                        </button>
                    </form>
                </div>
            </div>

            <!-- Right Column: Features List -->
            <div class="xl:col-span-3">
                <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 overflow-hidden">
                    
                    <!-- Header -->
                    <div class="px-6 py-5 border-b border-slate-100 dark:border-slate-700">
                        <div class="flex items-center justify-between">
                            <div>
                                <h3 class="text-base font-semibold text-slate-900 dark:text-slate-100 flex items-center">
                                    <svg class="w-4 h-4 mr-2 text-slate-600 dark:text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
                                    </svg>
                                    Available Features ({{ features|length }})
                                </h3>
                                <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">
                                    Manage system features and their availability
                                </p>
                            </div>
                            <label class="flex items-center space-x-3 cursor-pointer">
                                <input type="checkbox" x-model="showInactive" 
                                       class="w-4 h-4 text-slate-600 border-slate-300 dark:border-slate-500 rounded focus:ring-2 focus:ring-slate-500 dark:bg-slate-700">
                                <span class="text-sm font-medium text-slate-600 dark:text-slate-400">Show inactive</span>
                            </label>
                        </div>
                    </div>
                    
                    <!-- Features List -->
                    {% if features %}
                    <div class="divide-y divide-slate-100 dark:divide-slate-700 max-h-96 overflow-y-auto">
                        {% for feature in features %}
                        <div x-show="showInactive || {{ 'true' if feature.is_active else 'false' }}" 
                             x-transition
                             class="p-6 hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-all duration-200 group">
                            
                            <div class="flex items-start justify-between">
                                <div class="flex-1 min-w-0">
                                    <div class="flex items-center space-x-3 mb-3">
                                        <h4 class="text-base font-semibold text-slate-900 dark:text-slate-100 group-hover:text-blue-900 dark:group-hover:text-blue-100 transition-colors">
                                            {{ feature.name }}
                                        </h4>
                                        
                                        {% if feature.is_active %}
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-800/30 dark:text-green-300">
                                            <div class="w-1.5 h-1.5 bg-green-500 rounded-full mr-1.5"></div>
                                            Active
                                        </span>
                                        {% else %}
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-400">
                                            <div class="w-1.5 h-1.5 bg-slate-400 rounded-full mr-1.5"></div>
                                            Inactive
                                        </span>
                                        {% endif %}
                                        
                                        {% if feature.category %}
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-800/30 dark:text-blue-300">
                                            {{ feature.category }}
                                        </span>
                                        {% endif %}
                                    </div>
                                    
                                    {% if feature.description %}
                                    <p class="text-sm text-slate-600 dark:text-slate-400 mb-3 leading-relaxed">
                                        {{ feature.description }}
                                    </p>
                                    {% endif %}
                                    
                                    <div class="flex items-center space-x-4 text-xs text-slate-500 dark:text-slate-400">
                                        <code class="px-2 py-1 bg-slate-100 dark:bg-slate-700 rounded font-mono">
                                            {{ feature.url_name }}
                                        </code>
                                        <span class="flex items-center">
                                            <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                            </svg>
                                            Created {{ feature.created_dtm|date("M d, Y") }}
                                        </span>
                                        {% if feature.updated_dtm != feature.created_dtm %}
                                        <span class="flex items-center">
                                            <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                                            </svg>
                                            Updated {{ feature.updated_dtm|date("M d, Y") }}
                                        </span>
                                        {% endif %}
                                    </div>
                                </div>
                                
                                <!-- Action Buttons -->
                                <div class="flex items-center space-x-2 ml-6">
                                    <!-- Edit Button -->
                                    <button @click="openEditModal({
                                        id: {{ feature.id }},
                                        name: '{{ feature.name|escapejs }}',
                                        url_name: '{{ feature.url_name|escapejs }}',
                                        description: '{{ feature.description|default:""|escapejs }}',
                                        category: '{{ feature.category|default:""|escapejs }}',
                                        is_active: {{ feature.is_active|yesno:"true,false" }}
                                    })" 
                                            class="inline-flex items-center px-3 py-2 text-xs font-medium text-blue-700 bg-blue-50 border border-blue-200 rounded-lg hover:bg-blue-100 dark:bg-blue-900/20 dark:text-blue-400 dark:border-blue-700 dark:hover:bg-blue-900/40 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-200">
                                        <svg class="w-3 h-3 mr-1.5" 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"></path>
                                        </svg>
                                        Edit
                                    </button>
                                    
                                    <!-- Toggle Status -->
                                    <form method="post" class="inline">
                                        {% csrf_token %}
                                        <input type="hidden" name="action" value="toggle_feature_status">
                                        <input type="hidden" name="feature_id" value="{{ feature.id }}">
                                        <button type="submit" 
                                                class="inline-flex items-center px-3 py-2 text-xs font-medium rounded-lg border focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-slate-800 transition-all duration-200
                                                {% if feature.is_active %}
                                                    text-amber-700 bg-amber-50 border-amber-200 hover:bg-amber-100 dark:bg-amber-900/20 dark:text-amber-400 dark:border-amber-700 dark:hover:bg-amber-900/40 focus:ring-amber-500
                                                {% else %}
                                                    text-green-700 bg-green-50 border-green-200 hover:bg-green-100 dark:bg-green-900/20 dark:text-green-400 dark:border-green-700 dark:hover:bg-green-900/40 focus:ring-green-500
                                                {% endif %}">
                                            {% if feature.is_active %}
                                                <svg class="w-3 h-3 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728L5.636 5.636m12.728 12.728L18.364 5.636M5.636 18.364l12.728-12.728"></path>
                                                </svg>
                                                Disable
                                            {% else %}
                                                <svg class="w-3 h-3 mr-1.5" 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"></path>
                                                </svg>
                                                Enable
                                            {% endif %}
                                        </button>
                                    </form>
                                    
                                    <!-- Delete Button -->
                                    <form method="post" class="inline" onsubmit="return confirm('Are you sure you want to delete this feature? This will remove it from all groups.');">
                                        {% csrf_token %}
                                        <input type="hidden" name="action" value="delete_feature">
                                        <input type="hidden" name="feature_id" value="{{ feature.id }}">
                                        <button type="submit" 
                                                class="inline-flex items-center px-3 py-2 text-xs font-medium text-red-700 bg-red-50 border border-red-200 rounded-lg hover:bg-red-100 dark:bg-red-900/20 dark:text-red-400 dark:border-red-700 dark:hover:bg-red-900/40 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-slate-800 transition-all duration-200">
                                            <svg class="w-3 h-3 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                                            </svg>
                                            Delete
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <div class="p-12 text-center">
                        <div class="w-20 h-20 mx-auto mb-6 bg-blue-100 dark:bg-blue-900/30 rounded-2xl flex items-center justify-center">
                            <svg class="w-10 h-10 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
                            </svg>
                        </div>
                        <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">No Features Yet</h3>
                        <p class="text-slate-500 dark:text-slate-400 max-w-md mx-auto leading-relaxed">
                            Create your first feature to start managing access control for your application.
                        </p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Edit Feature Modal -->
    <div x-show="editModalOpen" 
         @keydown.escape.window="closeEditModal()" 
         class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" 
         x-cloak
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="transition ease-in duration-200"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0">
        
        <div @click.away="closeEditModal()" 
             class="bg-white dark:bg-slate-800 rounded-2xl shadow-2xl border border-slate-200 dark:border-slate-700 w-full max-w-lg mx-4 overflow-hidden"
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="opacity-0 transform scale-95"
             x-transition:enter-end="opacity-100 transform scale-100"
             x-transition:leave="transition ease-in duration-200"
             x-transition:leave-start="opacity-100 transform scale-100"
             x-transition:leave-end="opacity-0 transform scale-95">
            
            <!-- Modal Header -->
            <div class="px-6 py-5 border-b border-slate-100 dark:border-slate-700">
                <div class="flex items-center justify-between">
                    <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 flex items-center">
                        <svg class="w-5 h-5 mr-2 text-blue-600 dark:text-blue-400" 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"></path>
                        </svg>
                        Edit Feature
                    </h3>
                    <button @click="closeEditModal()" 
                            class="p-2 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-slate-500">
                        <svg class="w-5 h-5" 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"></path>
                        </svg>
                    </button>
                </div>
            </div>
            
            <!-- Modal Body -->
            <form method="post">
                {% csrf_token %}
                <input type="hidden" name="action" value="edit_feature">
                <input type="hidden" name="feature_id" x-bind:value="featureToEdit.id">
                
                <div class="p-6 space-y-5">
                    <div class="space-y-1">
                        <label for="edit_name" class="block text-xs font-medium text-slate-700 dark:text-slate-300 uppercase tracking-wide">
                            Feature Name *
                        </label>
                        <input type="text" id="edit_name" name="name" x-model="featureToEdit.name" required 
                               class="w-full px-4 py-3 bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-slate-600 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent text-slate-900 dark:text-slate-100 transition-all duration-200">
                    </div>
                    
                    <div class="space-y-1">
                        <label for="edit_url_name" class="block text-xs font-medium text-slate-700 dark:text-slate-300 uppercase tracking-wide">
                            URL Name *
                        </label>
                        <input type="text" id="edit_url_name" name="url_name" x-model="featureToEdit.url_name" required 
                               class="w-full px-4 py-3 bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-slate-600 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent text-slate-900 dark:text-slate-100 transition-all duration-200">
                    </div>
                    
                    <div class="space-y-1">
                        <label for="edit_description" class="block text-xs font-medium text-slate-700 dark:text-slate-300 uppercase tracking-wide">
                            Description
                        </label>
                        <textarea id="edit_description" name="description" rows="3" x-model="featureToEdit.description" 
                                  class="w-full px-4 py-3 bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-slate-600 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent text-slate-900 dark:text-slate-100 transition-all duration-200 resize-none"></textarea>
                    </div>
                    
                    <div class="space-y-1">
                        <label for="edit_category" class="block text-xs font-medium text-slate-700 dark:text-slate-300 uppercase tracking-wide">
                            Category
                        </label>
                        <input type="text" id="edit_category" name="category" x-model="featureToEdit.category" 
                               class="w-full px-4 py-3 bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-slate-600 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent text-slate-900 dark:text-slate-100 transition-all duration-200">
                    </div>
                    
                    <div class="flex items-center p-4 bg-blue-50 dark:bg-blue-900/20 rounded-xl border border-blue-200 dark:border-blue-800">
                        <input id="edit_is_active" name="is_active" type="checkbox" x-model="featureToEdit.is_active"
                               class="w-4 h-4 text-blue-600 border-slate-300 dark:border-slate-500 rounded focus:ring-2 focus:ring-blue-500 dark:bg-slate-700">
                        <label for="edit_is_active" class="ml-3 text-sm font-medium text-blue-900 dark:text-blue-100">
                            Active (feature is available for assignment)
                        </label>
                    </div>
                </div>
                
                <!-- Modal Footer -->
                <div class="px-6 py-4 bg-slate-50 dark:bg-slate-800/50 border-t border-slate-100 dark:border-slate-700 flex items-center justify-end space-x-3">
                    <button type="button" @click="closeEditModal()" 
                            class="px-4 py-2 text-sm font-medium text-slate-700 bg-white dark:bg-slate-700 dark:text-slate-200 border border-slate-300 dark:border-slate-600 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-600 focus:outline-none focus:ring-2 focus:ring-slate-500 transition-colors">
                        Cancel
                    </button>
                    <button type="submit" 
                            class="px-6 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-slate-800 transition-all duration-200 shadow-sm hover:shadow-md">
                        Save Changes
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
{% endblock %}