{% extends "xprez/admin/sections/section_base.html" %}
{% load i18n %}
{% load xprez_admin %}

{% block data_prefix %}{{ section.admin_form.prefix }}{% endblock %}
{% block data_unsaved %}{% if not section.saved %}data-unsaved{% endif %}{% endblock %}

{% block before_header %}
    {% include "xprez/admin/includes/adders/content_section_before.html" with xprez_admin=section.admin_form.xprez_admin adder_container=section.container %}
{% endblock %}

{% block header_settings %}
    <span class="xprez-icon-btn" title='{% trans "Advanced settings" %}' data-xprez-section-popover-trigger>
        <i class="xprez-icon-settings"></i>
    </span>

    <div class="xprez-option-row" data-xprez-shortcuts data-hidden>
        {% for field in section.admin_form.shortcuts %}
            {% include "xprez/admin/form/field.html" with field=field size="flex-auto" js_controller_class="XprezShortcutFieldController" %}
        {% endfor %}
    </div>
{% endblock %}

{% block header_actions %}
    {{ block.super }}
    <span class="xprez-option" data-active="true" data-text-label="false">
        <label for="{{ section.admin_form.visible.id_for_label }}">
            <i class="xprez-icon-eye x-variant-checked"></i>
            <i class="xprez-icon-eye_slash x-variant-unchecked x-color-danger"></i>
            <span>{% trans "Visibility on/off" %}</span>
        </label>
        {{ section.admin_form.visible }}
    </span>

    {% with xprez_admin=section.admin_form.xprez_admin %}
        {% url xprez_admin.xprez_duplicate_url_name section_pk=section.pk as duplicate_url %}
        {% url xprez_admin.xprez_clipboard_clip_url_name xprez_admin.constants.SECTION_KEY section.pk as clip_url %}
        {% include "xprez/admin/includes/copy_menu.html" with duplicate_url=duplicate_url clip_url=clip_url copy_menu_controller="XprezSectionCopyMenu" duplicate_controller="XprezSectionDuplicateAdder" %}
    {% endwith %}
    {% trans "Remove" as title_remove %}
    {% include "xprez/admin/includes/delete_trigger.html" with component_name="xprez-section-delete-trigger" title=title_remove delete_field=section.admin_form.delete %}
{% endblock %}

{% block section_body %}
    <div class="xprez-section-grid" data-xprez-section-grid>
        {% for module in section.admin_form.xprez_modules %}
            {% xprez_module_render_admin module %}
        {% endfor %}
        <div class="xprez-admin-module xprez-admin-module--adder" data-xprez-adder-section-end-wrapper>
            <span class="xprez-btn xprez-btn-transparent" data-xprez-adder-section-end-trigger>
                <i class="xprez-icon-plus_square_20"></i>{% trans "Add module" %}
            </span>
            {% include "xprez/admin/includes/adders/content_section_end.html" with xprez_admin=section.admin_form.xprez_admin adder_container=section.container adder_section=section %}
        </div>
    </div>

    {% include "xprez/admin/includes/delete_info.html" with component_prefix="xprez-section" message_subject="section" %}

    <div popover="manual" class="xprez-popover" data-controller="XprezSectionPopover">
        <div class="xprez-popover__content">
            {% include "xprez/admin/form/errors.html" with errors=section.admin_form.non_field_errors %}
            <div class="xprez-option-group">
                <div class="xprez-option-group__heading">
                    <div class="xprez-option-group__heading-line">
                        <i class="xprez-icon-grid_3_3"></i>
                        <span class="xprez-option-group__title-text">{% trans "Section" %}</span>
                    </div>
                </div>
                <div class="xprez-option-row">
                    {% include "xprez/admin/form/field.html" with field=section.admin_form.max_width_choice size="flex-1" %}
                    {% include "xprez/admin/form/field.html" with field=section.admin_form.max_width_custom label=False suffix=section.units.max_width.custom size="flex-0" attributes="data-hidden data-show-when=\""|add:section.admin_form.max_width_choice.html_name|add:":custom\""|safe size="flex-0" %}
                </div>
                <div class="xprez-option-row">
                    {% include "xprez/admin/form/field.html" with field=section.admin_form.alternate_background size="flex-1" %}
                </div>
                <div class="xprez-option-row">
                    {% include "xprez/admin/form/field.html" with field=section.admin_form.background_color size="flex-1" %}
                </div>
                <div class="xprez-option-row">
                    {% include "xprez/admin/form/field.html" with field=section.admin_form.css_class size="flex-1" %}
                </div>

                <div data-xprez-section-configs>
                    {% for config in section.admin_form.xprez_configs %}
                        {% xprez_section_config_render_admin config %}
                    {% endfor %}
                </div>
            </div>
            <div class="xprez-option-group__footer" data-controller="XprezSectionConfigAdder">
                {% include "xprez/admin/includes/adders/config_section.html" with xprez_admin=section.admin_form.xprez_admin %}
            </div>
        </div>
    </div>
{% endblock %}

{% block hidden_fields %}
    <input type="hidden" name="section-id" value="{{ section.pk }}">
    {{ section.admin_form.position.as_hidden }}
{% endblock %}