{% extends base_template %}
{% import "components/buttons.html" as buttons %}
{% import "components/inputs.html" as inputs %}

{% block title %}{% if record_id %}EDIT{% else %}CREATE{% endif %} {{ model_config.name }}{% endblock %}

{% block breadcrumb %}
<nav class="flex items-center space-x-2 text-sm font-mono text-emerald-600">
    <a href="{{ url_for('admin:index') }}" class="hover:text-emerald-400 transition-colors">SYSTEM</a>
    <span class="text-emerald-800">/</span>
    <a href="{{ url_for('admin:list', model=model_config.name) }}" class="hover:text-emerald-400 transition-colors">{{
        model_config.name }}</a>
    <span class="text-emerald-800">/</span>
    <span class="text-emerald-400">{% if record_id %}EDIT{% else %}CREATE{% endif %}</span>
</nav>
{% endblock %}

{% block content %}
<div class="max-w-3xl space-y-6">
    {# Header #}
    <div class="relative overflow-hidden rounded-xl bg-black border border-emerald-500/30 p-6">
        <div class="absolute top-0 right-0 w-40 h-40 bg-emerald-500/5 rounded-full blur-3xl"></div>
        <div class="relative z-10">
            <div class="flex items-center space-x-3 mb-2">
                <div class="h-px w-8 bg-emerald-500"></div>
                <span class="text-xs font-mono text-emerald-600 uppercase tracking-widest">
                    {% if record_id %}DATA UPDATE{% else %}NEW RECORD{% endif %}
                </span>
            </div>
            <h1 class="text-3xl font-black text-white font-mono mb-1">
                {% if record_id %}EDIT {{ model_config.name }}{% else %}CREATE {{ model_config.name }}{% endif %}
            </h1>
            <p class="textemerald-300 text-sm font-mono">
                {% if record_id %}Update record details{% else %}Fill in details to create new record{% endif %}
            </p>
        </div>
    </div>

    {# Error Summary #}
    {% if errors.get('__all__') %}
    <div class="rounded-xl bg-black border border-red-500/30 p-4">
        <div class="flex items-start space-x-3">
            <div
                class="flex h-8 w-8 items-center justify-center rounded-full bg-red-500/20 border border-red-500/30 flex-shrink-0">
                <svg class="h-5 w-5 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
            </div>
            <div class="flex-1">
                <h3 class="text-sm font-mono font-bold text-red-400 mb-1">VALIDATION ERRORS</h3>
                <ul class="space-y-1">
                    {% for error in errors.get('__all__', []) %}
                    <li class="text-sm font-mono text-red-300">• {{ error }}</li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
    {% endif %}

    {# Form #}
    <div class="relative overflow-hidden rounded-xl bg-black border border-emerald-500/30">
        <div class="absolute bottom-0 left-0 w-96 h-96 bg-lime-500/5 rounded-full blur-3xl"></div>
        <form method="POST"
            action="{% if record_id %}{{ url_for('admin:update', model=model_config.name, id=record_id) }}{% else %}{{ url_for('admin:create_submit', model=model_config.name) }}{% endif %}"
            class="relative z-10 p-6 space-y-6" onsubmit="handleFormSubmit(event)">

            {# CSRF Token #}
            <input type="hidden" name="_csrf_token" value="{{ csrf_token }}" />

            {# Form Fields #}
            <div class="space-y-5">
                {% for field in fields %}
                <div class="space-y-2">
                    {# Text Input #}
                    {% if field.field_type.value == "text" %}
                    <label class="block">
                        <div class="flex items-center justify-between mb-2">
                            <span class="text-sm font-mono font-semibold text-emerald-400">
                                {{ field.title }}{% if field.required %}<span class="text-red-400 ml-1">*</span>{% endif
                                %}
                            </span>
                            {% if field.description %}
                            <span class="text-xs font-mono text-emerald-700">{{ field.description }}</span>
                            {% endif %}
                        </div>
                        <input type="text" name="{{ field.name }}"
                            value="{{ values.get(field.name, field.default or '') }}"
                            placeholder="{{ field.placeholder or '' }}" {% if field.required %}required{% endif %} {% if
                            field.readonly %}readonly{% endif %}
                            class="w-full h-10 px-4 rounded-lg bg-black border border-emerald-500/20 text-emerald-100 font-mono text-sm placeholder:text-emerald-900 focus:outline-none focus:border-emerald-500/50 focus:ring-2 focus:ring-emerald-500/20 transition-all {% if field.readonly %}opacity-50 cursor-not-allowed{% endif %}" />
                        {% if errors.get(field.name) %}
                        <p class="text-xs font-mono text-red-400 mt-1">{{ errors.get(field.name)[0] }}</p>
                        {% endif %}
                    </label>

                    {# Textarea #}
                    {% elif field.field_type.value == "textarea" %}
                    <label class="block">
                        <div class="flex items-center justify-between mb-2">
                            <span class="text-sm font-mono font-semibold text-emerald-400">
                                {{ field.title }}{% if field.required %}<span class="text-red-400 ml-1">*</span>{% endif
                                %}
                            </span>
                            {% if field.description %}
                            <span class="text-xs font-mono text-emerald-700">{{ field.description }}</span>
                            {% endif %}
                        </div>
                        <textarea name="{{ field.name }}" rows="4" placeholder="{{ field.placeholder or '' }}" {% if
                            field.required %}required{% endif %}
                            class="w-full px-4 py-3 rounded-lg bg-black border border-emerald-500/20 text-emerald-100 font-mono text-sm placeholder:text-emerald-900 focus:outline-none focus:border-emerald-500/50 focus:ring-2 focus:ring-emerald-500/20 transition-all resize-y">{{ values.get(field.name, field.default or '') }}</textarea>
                        {% if errors.get(field.name) %}
                        <p class="text-xs font-mono text-red-400 mt-1">{{ errors.get(field.name)[0] }}</p>
                        {% endif %}
                    </label>

                    {# Number/Float Input #}
                    {% elif field.field_type.value in ["number", "float"] %}
                    <label class="block">
                        <div class="flex items-center justify-between mb-2">
                            <span class="text-sm font-mono font-semibold text-emerald-400">
                                {{ field.title }}{% if field.required %}<span class="text-red-400 ml-1">*</span>{% endif
                                %}
                            </span>
                        </div>
                        <input type="number" name="{{ field.name }}"
                            value="{{ values.get(field.name, field.default or '') }}" {% if
                            field.field_type.value=="float" %}step="0.01" {% endif %} {% if field.min_value is defined
                            %}min="{{ field.min_value }}" {% endif %} {% if field.max_value is defined
                            %}max="{{ field.max_value }}" {% endif %} {% if field.required %}required{% endif %}
                            class="w-full h-10 px-4 rounded-lg bg-black border border-emerald-500/20 text-emerald-100 font-mono text-sm focus:outline-none focus:border-emerald-500/50 focus:ring-2 focus:ring-emerald-500/20 transition-all" />
                        {% if errors.get(field.name) %}
                        <p class="text-xs font-mono text-red-400 mt-1">{{ errors.get(field.name)[0] }}</p>
                        {% endif %}
                    </label>

                    {# Boolean Checkbox #}
                    {% elif field.field_type.value == "boolean" %}
                    <label class="flex items-center space-x-3 cursor-pointer group">
                        <div class="relative">
                            <input type="checkbox" name="{{ field.name }}" value="true" {% if values.get(field.name,
                                field.default) %}checked{% endif %} class="peer sr-only" />
                            <div
                                class="h-6 w-11 rounded-full bg-emerald-950/30 border border-emerald-500/20 peer-checked:bg-emerald-500/20 peer-checked:border-emerald-400/50 transition-all">
                            </div>
                            <div
                                class="absolute left-1 top-1 h-4 w-4 rounded-full bg-emerald-600 peer-checked:translate-x-5 peer-checked:bg-emerald-400 transition-transform">
                            </div>
                        </div>
                        <span
                            class="text-sm font-mono font-semibold text-emerald-400 group-hover:text-emerald-300 transition-colors">{{
                            field.title }}</span>
                    </label>

                    {# Select Dropdown #}
                    {% elif field.field_type.value == "select" %}
                    <label class="block">
                        <div class="flex items-center justify-between mb-2">
                            <span class="text-sm font-mono font-semibold text-emerald-400">
                                {{ field.title }}{% if field.required %}<span class="text-red-400 ml-1">*</span>{% endif
                                %}
                            </span>
                        </div>
                        <select name="{{ field.name }}" {% if field.required %}required{% endif %}
                            class="w-full h-10 px-4 rounded-lg bg-black border border-emerald-500/20 text-emerald-100 font-mono text-sm focus:outline-none focus:border-emerald-500/50 focus:ring-2 focus:ring-emerald-500/20 transition-all">
                            <option value="">Select...</option>
                            {% for opt_value, opt_label in field.options %}
                            <option value="{{ opt_value }}" {% if values.get(field.name, field.default)==opt_value
                                %}selected{% endif %}>
                                {{ opt_label }}
                            </option>
                            {% endfor %}
                        </select>
                        {% if errors.get(field.name) %}
                        <p class="text-xs font-mono text-red-400 mt-1">{{ errors.get(field.name)[0] }}</p>
                        {% endif %}
                    </label>

                    {# Email Input #}
                    {% elif field.field_type.value == "email" %}
                    <label class="block">
                        <div class="flex items-center justify-between mb-2">
                            <span class="text-sm font-mono font-semibold text-emerald-400">
                                {{ field.title }}{% if field.required %}<span class="text-red-400 ml-1">*</span>{% endif
                                %}
                            </span>
                        </div>
                        <input type="email" name="{{ field.name }}"
                            value="{{ values.get(field.name, field.default or '') }}" placeholder="email@example.com" {%
                            if field.required %}required{% endif %}
                            class="w-full h-10 px-4 rounded-lg bg-black border border-emerald-500/20 text-emerald-100 font-mono text-sm placeholder:text-emerald-900 focus:outline-none focus:border-emerald-500/50 focus:ring-2 focus:ring-emerald-500/20 transition-all" />
                        {% if errors.get(field.name) %}
                        <p class="text-xs font-mono text-red-400 mt-1">{{ errors.get(field.name)[0] }}</p>
                        {% endif %}
                    </label>

                    {# URL Input #}
                    {% elif field.field_type.value == "url" %}
                    <label class="block">
                        <div class="flex items-center justify-between mb-2">
                            <span class="text-sm font-mono font-semibold text-emerald-400">
                                {{ field.title }}{% if field.required %}<span class="text-red-400 ml-1">*</span>{% endif
                                %}
                            </span>
                        </div>
                        <input type="url" name="{{ field.name }}"
                            value="{{ values.get(field.name, field.default or '') }}" placeholder="https://..." {% if
                            field.required %}required{% endif %}
                            class="w-full h-10 px-4 rounded-lg bg-black border border-emerald-500/20 text-emerald-100 font-mono text-sm placeholder:text-emerald-900 focus:outline-none focus:border-emerald-500/50 focus:ring-2 focus:ring-emerald-500/20 transition-all" />
                        {% if errors.get(field.name) %}
                        <p class="text-xs font-mono text-red-400 mt-1">{{ errors.get(field.name)[0] }}</p>
                        {% endif %}
                    </label>

                    {# Relationship (Smart Select - FK) #}
                    {% elif field.field_type.value == "relationship" %}
                    {{ inputs.relationship_input(field, values.get(field.name), errors.get(field.name)[0] if
                    errors.get(field.name) else None) }}

                    {# Many-to-Many Multi-Select #}
                    {% elif field.field_type.value == "many_to_many" %}
                    <div class="space-y-2">
                        <div class="flex items-center justify-between mb-2">
                            <span class="text-sm font-mono font-semibold text-emerald-400">{{ field.title }}</span>
                            <span class="text-xs font-mono text-emerald-700">Hold Ctrl/Cmd to select multiple</span>
                        </div>
                        {% set current_ids = m2m_values.get(field.name, []) %}
                        {% set choices = m2m_choices.get(field.name, []) %}
                        {% if choices %}
                        <select name="{{ field.name }}" multiple
                            class="w-full rounded-lg bg-black border border-emerald-500/20 text-emerald-100 font-mono text-sm focus:outline-none focus:border-emerald-500/50 focus:ring-2 focus:ring-emerald-500/20 transition-all"
                            style="min-height: 120px; padding: 0.25rem;">
                            {% for opt_id, opt_label in choices %}
                            <option value="{{ opt_id }}"
                                {% if opt_id in current_ids %}selected{% endif %}
                                style="padding: 0.4rem 0.75rem;">
                                {{ opt_label }}
                            </option>
                            {% endfor %}
                        </select>
                        <p class="text-xs font-mono text-emerald-700">
                            {{ current_ids|length }} of {{ choices|length }} selected
                        </p>
                        {% else %}
                        <p class="text-xs font-mono text-emerald-700 px-3 py-2 border border-emerald-500/10 rounded-lg">
                            No {{ field.title | lower }} available. Create some first.
                        </p>
                        {% endif %}
                        {% if errors.get(field.name) %}
                        <p class="text-xs font-mono text-red-400 mt-1">{{ errors.get(field.name)[0] }}</p>
                        {% endif %}
                    </div>

                    {# JSON Input #}
                    {% elif field.field_type.value == "json" %}
                    <label class="block">
                        <div class="flex items-center justify-between mb-2">
                            <span class="text-sm font-mono font-semibold text-emerald-400">
                                {{ field.title }}{% if field.required %}<span class="text-red-400 ml-1">*</span>{% endif %}
                            </span>
                        </div>
                        <textarea name="{{ field.name }}" rows="8"
                            class="w-full px-4 py-3 rounded-lg bg-black border border-emerald-500/20 text-emerald-100 font-mono text-sm focus:outline-none focus:border-emerald-500/50 focus:ring-2 focus:ring-emerald-500/20 transition-all resize-y"
                            placeholder='{"key": "value"}'>{{ values.get(field.name, field.default or '') }}</textarea>
                    </label>

                    {# Fallback for other types #}
                    {% else %}
                    <label class="block">
                        <div class="flex items-center justify-between mb-2">
                            <span class="text-sm font-mono font-semibold text-emerald-400">
                                {{ field.title }}{% if field.required %}<span class="text-red-400 ml-1">*</span>{% endif
                                %}
                            </span>
                        </div>
                        <input type="text" name="{{ field.name }}"
                            value="{{ values.get(field.name, field.default or '') }}" {% if field.required %}required{%
                            endif %}
                            class="w-full h-10 px-4 rounded-lg bg-black border border-emerald-500/20 text-emerald-100 font-mono text-sm focus:outline-none focus:border-emerald-500/50 focus:ring-2 focus:ring-emerald-500/20 transition-all" />
                        {% if errors.get(field.name) %}
                        <p class="text-xs font-mono text-red-400 mt-1">{{ errors.get(field.name)[0] }}</p>
                        {% endif %}
                    </label>
                    {% endif %}
                </div>
                {% endfor %}
            </div>

            {# Actions #}
            <div class="flex items-center justify-between pt-6 border-t border-emerald-500/20">
                <a href="{{ url_for('admin:list', model=model_config.name) }}"
                    class="px-4 py-2 rounded-lg bg-emerald-950/30 border border-emerald-500/20 text-emerald-300 font-mono text-sm hover:bg-emerald-950/50 transition-all">
                    CANCEL
                </a>

                <div class="flex items-center space-x-3">
                    {% if record_id and not model_config.readonly %}
                    <button type="button" onclick="confirmDelete()"
                        class="px-4 py-2 rounded-lg bg-red-500/10 border border-red-500/30 text-red-300 font-mono text-sm hover:bg-red-500/20 hover:border-red-400/50 transition-all">
                        DELETE
                    </button>
                    {% endif %}

                    {% if not model_config.readonly %}
                    <button type="submit" id="submit-btn"
                        class="px-6 py-2 rounded-lg bg-emerald-500/20 border border-emerald-400/50 text-emerald-100 font-mono text-sm font-bold hover:bg-emerald-500/30 hover:border-emerald-300/50 transition-all flex items-center space-x-2">
                        <span>{% if record_id %}UPDATE{% else %}CREATE{% endif %}</span>
                    </button>
                    {% endif %}
                </div>
            </div>
        </form>
    </div>

    {% if detail_panels and record %}
    <div class="space-y-4">
        {% for panel in detail_panels %}
        <div class="rounded-xl bg-black border border-emerald-500/20 p-5">
            <h3 class="text-sm font-mono font-bold text-emerald-400 uppercase tracking-widest mb-3">{{ panel.title }}</h3>
            <div class="text-sm font-mono text-emerald-200">
                {{ panel.renderer(request=request, record=record, config=model_config)|safe }}
            </div>
        </div>
        {% endfor %}
    </div>
    {% endif %}
</div>

    <div class="space-y-4">
    @keyframes toast-in {
        from {
            opacity: 0;
            transform: translateX(100%);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .animate-toast-in {
        animation: toast-in 0.3s ease-out;
    }
</style>

<script nonce="{{ csp_nonce }}">
    let isDirty = false;
    document.querySelectorAll('form input, form textarea, form select').forEach((el) => {
        el.addEventListener('change', () => { isDirty = true; });
    });

    window.addEventListener('beforeunload', function (event) {
        if (!isDirty) return;
        event.preventDefault();
        event.returnValue = '';
    });

    // Form submission with loading state
    function handleFormSubmit(e) {
        isDirty = false;
        const btn = document.getElementById('submit-btn');
        if (btn) {
            btn.disabled = true;
            btn.innerHTML = '<div class="h-4 w-4 border-2 border-emerald-400 border-t-transparent rounded-full animate-spin mr-2"></div><span>SAVING...</span>';
        }
    }

    // Delete confirmation for edit page
    async function confirmDelete() {
        if (confirm('Are you sure you want to delete this record? This action cannot be undone.')) {
            const response = await fetch('{{ url_for("admin:delete", model=model_config.name, id=record_id) if record_id else "#" }}?token={{ delete_token }}', {
                method: 'DELETE'
            });
            if (response.ok) {
                isDirty = false;
                window.location.href = '{{ url_for("admin:list", model=model_config.name) }}';
            }
        }
    }
</script>
{% endblock %}
```