{% extends 'admin/base.html' %}
{% load static %}
{% load widget_tweaks %}

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

{% block content %}
<div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- Header -->
    <div class="mb-6">
        <div class="flex items-center gap-4 mb-4">
            <a href="{% url 'admin_panel:dokumentasi_admin:kategori_list' %}" 
               class="bg-gray-500 hover:bg-gray-600 text-white p-2 rounded-lg transition-colors duration-200 inline-flex items-center justify-center">
                <i class="fas fa-arrow-left"></i>
            </a>
            <div>
                <h2 class="text-2xl lg:text-3xl font-bold text-gray-900 mb-2">
                    <i class="fas fa-folder text-purple-600 mr-2"></i>
                    {{ title }}
                </h2>
                <p class="text-gray-600">Lengkapi form untuk {{ title|lower }}</p>
            </div>
        </div>
    </div>

    <!-- Form Card -->
    <div class="bg-white rounded-xl shadow-md overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-purple-50 to-pink-50">
            <h3 class="text-lg font-medium text-gray-900">Form Kategori</h3>
        </div>
        
        <form method="post" class="p-6">
            {% csrf_token %}
            
            <!-- Error Messages -->
            {% if form.non_field_errors %}
            <div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg">
                <div class="flex items-center">
                    <i class="fas fa-exclamation-circle text-red-500 mr-2"></i>
                    <div class="text-sm text-red-700">
                        {{ form.non_field_errors }}
                    </div>
                </div>
            </div>
            {% endif %}

            <div class="space-y-6">
                <!-- Nama -->
                <div>
                    <label for="{{ form.nama.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-tag mr-1 text-purple-500"></i>
                        {{ form.nama.label }} <span class="text-red-500">*</span>
                    </label>
                    {% render_field form.nama class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200" placeholder="Masukkan nama kategori" %}
                    {% if form.nama.errors %}
                        <div class="mt-1 text-sm text-red-600 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>
                            {{ form.nama.errors.0 }}
                        </div>
                    {% endif %}
                </div>

                <!-- Slug -->
                <div>
                    <label for="{{ form.slug.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-link mr-1 text-purple-500"></i>
                        {{ form.slug.label }}
                    </label>
                    {% render_field form.slug class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200" placeholder="Slug akan di-generate otomatis" %}
                    {% if form.slug.errors %}
                        <div class="mt-1 text-sm text-red-600 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>
                            {{ form.slug.errors.0 }}
                        </div>
                    {% endif %}
                    <p class="mt-1 text-xs text-gray-500">Slug akan otomatis dibuat dari nama jika dikosongkan</p>
                </div>

                <!-- Deskripsi -->
                <div>
                    <label for="{{ form.deskripsi.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-align-left mr-1 text-purple-500"></i>
                        {{ form.deskripsi.label }}
                    </label>
                    {% render_field form.deskripsi class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200" rows="4" placeholder="Masukkan deskripsi kategori (opsional)" %}
                    {% if form.deskripsi.errors %}
                        <div class="mt-1 text-sm text-red-600 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>
                            {{ form.deskripsi.errors.0 }}
                        </div>
                    {% endif %}
                </div>
            </div>

            <!-- Form Actions -->
            <div class="mt-8 pt-6 border-t border-gray-200 flex flex-col sm:flex-row gap-3 justify-end">
                <a href="{% url 'admin_panel:dokumentasi_admin:kategori_list' %}" 
                   class="px-6 py-3 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors font-medium text-center">
                    <i class="fas fa-times mr-2"></i>Batal
                </a>
                <button type="submit" 
                        class="px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 transition-colors font-medium">
                    <i class="fas fa-save mr-2"></i>Simpan
                </button>
            </div>
        </form>
    </div>
</div>

<script>
// Auto-generate slug from nama
document.addEventListener('DOMContentLoaded', function() {
    const namaField = document.getElementById('{{ form.nama.id_for_label }}');
    const slugField = document.getElementById('{{ form.slug.id_for_label }}');
    
    if (namaField && slugField) {
        namaField.addEventListener('input', function() {
            if (!slugField.value || slugField.dataset.autoGenerated === 'true') {
                const nama = this.value;
                const slug = nama.toLowerCase()
                    .replace(/[^a-z0-9]+/g, '-')
                    .replace(/^-+|-+$/g, '');
                slugField.value = slug;
                slugField.dataset.autoGenerated = 'true';
            }
        });
        
        slugField.addEventListener('input', function() {
            if (this.value) {
                this.dataset.autoGenerated = 'false';
            }
        });
    }
});
</script>
{% endblock %}