{% extends "admin/base_new.html" %}

{% block title %}{% if is_add %}Add{% else %}Change{% endif %} {{ model_name }} - {{ site_title }}{% endblock %}

{% block breadcrumb %}
<nav class="admin-breadcrumb" aria-label="Breadcrumb">
    <a href="{{ request.url_for(url_namespace ~ ':index') }}" class="breadcrumb-link">Home</a>
    <span class="breadcrumb-separator">/</span>
    <a href="{{ request.url_for(url_namespace ~ ':app_index', app_label=app_label) }}" class="breadcrumb-link">{{ app_label }}</a>
    <span class="breadcrumb-separator">/</span>
    <a href="{{ request.url_for(url_namespace ~ ':model_list', app_label=app_label, model_name=model_name|lower) }}" class="breadcrumb-link">{{ model_name }}</a>
    <span class="breadcrumb-separator">/</span>
    <span class="breadcrumb-current">{% if is_add %}Add{% else %}Edit{% endif %}</span>
</nav>
{% endblock %}

{% block content %}
<div class="page-header">
    <div class="page-header-content">
        <h1>{% if is_add %}Add {{ model_name }}{% else %}Edit {{ model_name }}{% endif %}</h1>
        {% if not is_add and obj %}
        <span class="badge badge-secondary">ID: {{ obj.id }}</span>
        {% endif %}
    </div>
</div>

{% if errors and errors.__all__ %}
<div class="alert alert-danger">
    <span>{{ errors.__all__ }}</span>
</div>
{% endif %}

<div class="card form-card">
    <form method="post" class="admin-form" id="admin-model-form">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">

        {% for section in fieldsets %}
        <fieldset class="form-fieldset {% if 'collapse' in section.classes %}is-collapsible{% endif %}">
            {% if section.title %}
            <legend class="form-fieldset-title">{{ section.title }}</legend>
            {% endif %}
            {% if section.description %}
            <p class="form-fieldset-description">{{ section.description }}</p>
            {% endif %}
            <div class="form-body">
                {% for field in section.fields %}
                <div class="form-group {% if errors and field.name in errors %}has-error{% endif %}">
                    <label for="{{ field.name }}" class="form-label">
                        {{ field.label }}
                        {% if field.required %}<span class="required-indicator">*</span>{% endif %}
                    </label>

                    {% if field.widget_html %}
                        {{ field.widget_html|safe }}
                    {% elif field.type == "checkbox" %}
                        <div class="checkbox-wrapper">
                            <input type="checkbox" id="{{ field.name }}" name="{{ field.name }}" {% if field.value %}checked{% endif %} {% if field.readonly %}disabled{% endif %} class="form-checkbox">
                        </div>
                    {% elif field.type == "textarea" %}
                        <textarea id="{{ field.name }}" name="{{ field.name }}" class="form-input form-textarea" {% if field.readonly %}readonly{% endif %} {% if field.required %}required{% endif %} rows="5">{{ field.value }}</textarea>
                    {% elif field.type == "select" %}
                        <select id="{{ field.name }}" name="{{ field.name }}" class="form-input form-select" {% if field.readonly %}disabled{% endif %} {% if field.required %}required{% endif %}>
                            <option value="">Select {{ field.label }}...</option>
                            {% for choice_value, choice_label in field.choices %}
                            <option value="{{ choice_value }}" {% if field.value == choice_value %}selected{% endif %}>{{ choice_label }}</option>
                            {% endfor %}
                        </select>
                    {% elif field.type == "multiselect" %}
                        <select id="{{ field.name }}" name="{{ field.name }}" class="form-input form-select multiselect" multiple {% if field.readonly %}disabled{% endif %}>
                            {% for choice_value, choice_label in field.choices %}
                            <option value="{{ choice_value }}" {% if choice_value in field.value %}selected{% endif %}>{{ choice_label }}</option>
                            {% endfor %}
                        </select>
                        <small class="form-help">Hold Ctrl/Cmd to select multiple items</small>
                    {% else %}
                        <input type="{{ field.type }}" id="{{ field.name }}" name="{{ field.name }}" value="{{ field.value }}" class="form-input" {% if field.readonly %}readonly{% endif %} {% if field.required %}required{% endif %} {% if field.type == "number" %}step="any"{% endif %}>
                    {% endif %}

                    {% if errors and field.name in errors %}
                    <div class="form-error">{{ errors[field.name] }}</div>
                    {% endif %}
                </div>
                {% endfor %}
            </div>
        </fieldset>
        {% endfor %}

        <div class="form-actions sticky-actions">
            <div class="form-actions-left">
                <button type="submit" class="btn btn-primary">{% if is_add %}Create{% else %}Save{% endif %}</button>
                <a href="{{ request.url_for(url_namespace ~ ':model_list', app_label=app_label, model_name=model_name|lower) }}" class="btn btn-ghost">Cancel</a>
            </div>
        </div>
    </form>

    {% if not is_add and can_delete %}
    <form id="delete-form" method="post" action="{{ request.url_for(url_namespace ~ ':model_delete', app_label=app_label, model_name=model_name|lower, pk=obj.id|string) }}" style="display: none;">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    </form>
    {% endif %}
</div>

{% if not is_add and can_delete %}
<div class="card danger-zone">
    <h2>Danger Zone</h2>
    <p class="text-muted">Permanently delete this {{ model_name }}. This action cannot be undone.</p>
    <form method="post" action="{{ request.url_for(url_namespace ~ ':model_delete', app_label=app_label, model_name=model_name|lower, pk=obj.id|string) }}">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
        <button type="submit" class="btn btn-danger" onclick="return confirm('Delete this {{ model_name }}? This cannot be undone.')">Delete {{ model_name }}</button>
    </form>
</div>
{% endif %}

{% if prepopulated %}
<script>
(function () {
    var config = {{ prepopulated|tojson }};
    function slugify(value) {
        return value.toString().toLowerCase().trim()
            .replace(/[^a-z0-9\s-]/g, '')
            .replace(/[\s_-]+/g, '-')
            .replace(/^-+|-+$/g, '');
    }
    Object.keys(config).forEach(function (target) {
        var targetEl = document.getElementById(target);
        if (!targetEl) return;
        var sources = config[target];
        var edited = false;
        targetEl.addEventListener('input', function () { edited = true; });
        function recompute() {
            if (edited) return;
            var parts = sources.map(function (name) {
                var el = document.getElementById(name);
                return el ? el.value : '';
            }).filter(Boolean);
            targetEl.value = slugify(parts.join(' '));
        }
        sources.forEach(function (name) {
            var el = document.getElementById(name);
            if (el) el.addEventListener('input', recompute);
        });
    });
})();
</script>
{% endif %}
{% endblock %}