{% extends "paxalia/base.html" %}
{% load static i18n %}
{% block title %}{{ page_title }} · {% trans "Paxalia Admin" %}{% endblock %}
{% block page_title %}{{ page_title }}{% endblock %}
{% block page_subtitle %}{{ page_subtitle }}{% endblock %}
{% block extra_css %}<link rel="stylesheet" href="{% static 'paxalia/styles/components/admin.css' %}">{% endblock %}
{% block dashboard_content %}
<div class="pa-admin-shell">
    <header class="pa-admin-page-head">
        <div class="pa-admin-page-head__copy">
            <div class="pa-admin-breadcrumbs"><a href="{% url 'paxalia:admin_home' %}">{% trans "Paxalia Admin" %}</a><span class="pa-admin-breadcrumbs__separator">/</span><span>{{ definition.verbose_name_plural }}</span><span class="pa-admin-breadcrumbs__separator">/</span><span>{{ page_title }}</span></div>
            <span class="pa-admin-page-head__eyebrow">{{ definition.label }}</span>
            <h2>{{ page_title }}</h2>
            <p>{{ page_subtitle }}</p>
        </div>
        <div class="pa-admin-page-head__actions"><a class="btn btn-secondary" href="{{ cancel_url }}">{% trans "Cancel" %}</a></div>
    </header>

    <form method="post" enctype="multipart/form-data" class="pa-admin-form">
        {% csrf_token %}
        {{ form.media }}
        {% if translation_form_enabled %}<input type="hidden" name="language" value="{{ translation_language }}">{% endif %}
        {% if form.non_field_errors %}<div class="pa-admin-form-errors">{{ form.non_field_errors }}</div>{% endif %}
        {% for hidden in form.hidden_fields %}{{ hidden }}{% endfor %}

        {% if translation_form_enabled %}
        <section class="pa-admin-form-card pa-admin-translation-form-card" aria-labelledby="translation-form-heading">
            <div class="pa-admin-card-header pa-admin-translation-form-card__header">
                <div class="pa-admin-translation-form-card__title">
                    <span class="pa-admin-eyebrow">{% trans "Localization" %}</span>
                    <h2 id="translation-form-heading">{% trans "Translation" %}</h2>
                    <p>{% if object %}{% blocktrans with language=translation_language_name %}Editing the {{ language }} translation for this record.{% endblocktrans %}{% else %}{% blocktrans with language=translation_language_name %}Enter the {{ language }} translation while creating this record.{% endblocktrans %}{% endif %}</p>
                </div>
            </div>

            <div class="pa-admin-card-body pa-admin-translation-form-card__body">
                {% if object %}
                <nav class="pa-admin-language-tabs pa-admin-language-tabs--form" aria-label="{% trans 'Translation language' %}">
                    {% for tab in translation_language_tabs %}
                    <a class="pa-admin-language-tab{% if tab.current %} is-active{% endif %}" href="{{ tab.url }}"{% if tab.current %} aria-current="page"{% endif %}>
                        <span>{{ tab.name }}</span><small>{{ tab.code }}</small>{% if tab.complete is True %}<em class="pa-admin-language-tab__status is-complete">✓</em>{% elif tab.complete is False %}<em class="pa-admin-language-tab__status is-missing">—</em>{% endif %}
                    </a>
                    {% endfor %}
                </nav>
                {% endif %}

                <div class="pa-admin-translation-form-card__language-row">
                    <div>
                        <span class="pa-admin-eyebrow">{% trans "Active language" %}</span>
                        <strong>{{ translation_language_name }}</strong>
                    </div>
                    <span class="pa-admin-language-chip">{{ translation_language }}</span>
                </div>

                <div class="pa-admin-translation-form-fields">
                    {% for field in translation_form_fields %}
                    <div class="pa-admin-form-field pa-admin-translation-form-field {% if field.errors %}has-error{% endif %}">
                        <label for="{{ field.id_for_label }}">{{ field.label }}{% if field.field.required %}<span aria-hidden="true"> *</span>{% endif %}</label>
                        {% if field.help_text %}<small>{{ field.help_text }}</small>{% endif %}
                        {{ field }}
                        {% for error in field.errors %}<div class="pa-admin-field-error">{{ error }}</div>{% endfor %}
                    </div>
                    {% empty %}
                    <p class="pa-admin-empty">{% trans "No editable translation fields are available for this language." %}</p>
                    {% endfor %}
                </div>

                <div class="pa-admin-translation-form-card__hint">
                    {% if object %}
                        <span>{% trans "Choose another language above to edit its translation. Your changes are saved with this record." %}</span>
                    {% else %}
                        <span>{% trans "This language is saved with the new record. After creation, use Localization to add or update the other languages." %}</span>
                    {% endif %}
                </div>
            </div>
        </section>
        {% endif %}

        {% for section in form_sections %}
        <section class="pa-admin-form-card">
            <div class="pa-admin-card-header"><div><span class="pa-admin-eyebrow">{{ definition.label }}</span><h2>{{ section.title }}</h2></div></div>
            <div class="pa-admin-card-body">
                {% for field in section.fields %}
                <div class="pa-admin-form-field {% if field.errors %}has-error{% endif %}">
                    <label for="{{ field.id_for_label }}">{{ field.label }}{% if field.field.required %}<span aria-hidden="true"> *</span>{% endif %}</label>
                    {% if field.help_text %}<small>{{ field.help_text }}</small>{% endif %}
                    {{ field }}
                    {% for error in field.errors %}<div class="pa-admin-field-error">{{ error }}</div>{% endfor %}
                </div>
                {% endfor %}
            </div>
        </section>
        {% endfor %}

        {% if readonly_rows %}
        <section class="pa-admin-form-card">
            <div class="pa-admin-card-header"><div><span class="pa-admin-eyebrow">{% trans "Read only" %}</span><h2>{% trans "Protected fields" %}</h2></div></div>
            <div class="pa-admin-readonly-grid">
                {% for row in readonly_rows %}<div class="pa-admin-detail-row"><div><strong>{{ row.label }}</strong></div><pre class="pa-admin-detail-value {% if row.sensitive %}is-protected{% endif %}">{{ row.display }}</pre></div>{% endfor %}
            </div>
        </section>
        {% endif %}

        {% for inline in formsets %}
        <section class="pa-admin-inline-card">
            <div class="pa-admin-card-header">
                <div><span class="pa-admin-eyebrow">{% trans "Related records" %}</span><h2>{{ inline.inline.opts.verbose_name_plural|capfirst }}</h2></div>
                <div class="pa-admin-inline-permissions">
                    {% if inline.can_add %}<span>{% trans "Add" %}</span>{% endif %}
                    {% if inline.can_change %}<span>{% trans "Change" %}</span>{% endif %}
                    {% if inline.can_delete %}<span>{% trans "Delete" %}</span>{% endif %}
                </div>
            </div>
            {{ inline.formset.management_form }}
            {% if inline.formset.non_form_errors %}<div class="pa-admin-form-errors">{{ inline.formset.non_form_errors }}</div>{% endif %}
            <div class="pa-admin-inline-list">
                {% for inline_form in inline.forms %}
                <article class="pa-admin-inline-row">
                    {% for hidden in inline_form.hidden_fields %}{{ hidden }}{% endfor %}
                    {% for field in inline_form.visible_fields %}
                    <div class="pa-admin-form-field {% if field.errors %}has-error{% endif %}"><label for="{{ field.id_for_label }}">{{ field.label }}</label>{{ field }}{% for error in field.errors %}<div class="pa-admin-field-error">{{ error }}</div>{% endfor %}</div>
                    {% endfor %}
                </article>
                {% empty %}<p class="pa-admin-empty">{% trans "No related forms are available." %}</p>{% endfor %}
            </div>
        </section>
        {% endfor %}

        <div class="pa-admin-form-actions">
            <button class="btn btn-primary" type="submit">{{ submit_label }}</button>
            <button class="btn btn-secondary" type="submit" name="_continue" value="1">{% trans "Save and continue" %}</button>
            {% if not object %}<button class="btn btn-secondary" type="submit" name="_addanother" value="1">{% trans "Save and add another" %}</button>{% endif %}
            <a class="btn btn-secondary" href="{{ cancel_url }}">{% trans "Cancel" %}</a>
        </div>
    </form>
</div>
{% endblock %}