{% load i18n static xprez_admin %}
<div
    class="xprez-admin-module xprez-admin-{{ module.module_css_class }}"
    {% if module.admin_has_errors %}data-has-errors{% endif %} 
    {% if not module.saved %}data-unsaved{% endif %}
    data-controller="{{ module.admin_js_controller_class }}"
    data-content-type="{{ module.content_type }}"
    data-mode="{# (empty)/edit/selectable/selected/delete #}"
    data-prefix="{{ module.admin_form.prefix }}"
>
    <div class="xprez-admin-module__header" data-draggable-module-handle>
        <div class="xprez-admin-module__name">
            <span class="xprez-admin-module__name-icon">
                {{ module.admin_icon|safe }}
            </span>
            <div class="xprez-option" data-xprez-select-trigger>
                <label>
                    <i class="xprez-icon-check_circle_outline_small x-variant-unchecked"></i>
                    <i class="xprez-icon-check_circle_small x-variant-checked"></i>
                </label>
            </div>
            <span class="xprez-option-group__title-text">{{ module.verbose_name }}</span>
        </div>

        <div class="xprez-admin-module__actions">
            {% block actions %}
                {% block copy_menu %}
                    {% url module.admin_form.xprez_admin.xprez_duplicate_url_name module_pk=module.pk as duplicate_url %}
                    {% url module.admin_form.xprez_admin.xprez_clipboard_clip_url_name module.admin_form.xprez_admin.constants.MODULE_KEY module.pk as clip_url %}
                    {% include "xprez/admin/includes/copy_menu.html" with duplicate_url=duplicate_url clip_url=clip_url copy_menu_controller="XprezModuleCopyMenu" duplicate_controller="XprezModuleDuplicateAdder" %}
                {% endblock %}
                {% block popover_trigger %}
                    <span class="xprez-icon-btn" title='{% trans "Settings" %}' data-xprez-module-popover-trigger>
                        <i class="xprez-icon-settings" data-id="{{ module.pk }}"></i>
                    </span>
                {% endblock %}
            {% endblock %}
            {% block shortcuts %}
                {% if module.admin_form.shortcuts %}
                    <div class="xprez-option-row" data-xprez-shortcuts data-hidden>
                        {% block shortcut_fields %}
                            {% for field in module.admin_form.shortcuts %}
                                {% include "xprez/admin/form/field.html" with field=field size="flex-auto" js_controller_class="XprezShortcutFieldController" %}
                            {% endfor %}
                        {% endblock shortcut_fields %}
                    </div>
                {% endif %}
            {% endblock shortcuts %}
        </div>

        <div class="xprez-admin-module__actions xprez-admin-module__actions--right">
            {% block delete_trigger %}
                {% trans "Delete" as title_delete %}
                {% include "xprez/admin/includes/delete_trigger.html" with component_name="xprez-module-delete-trigger" title=title_delete delete_field=module.admin_form.delete %}
            {% endblock %}
        </div>
    </div>

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

    <div class="xprez-admin-module__body">
        {% include "xprez/admin/form/errors.html" with errors=module.admin_form.non_field_errors %}
        {% block content %}
            {% if module.admin_form.get_main_fields  %}
                <div class="xprez-form-table">
                    <div class="xprez-option-group">
                        {% block main_fields %}
                            {% for field in module.admin_form.get_main_fields %}
                                <div class="xprez-option-row">
                                    {% include "xprez/admin/form/field.html" with field=field %}
                                </div>
                            {% endfor %}
                        {% endblock %}
                    </div>
                </div>
            {% endif %}
        {% endblock %}
    </div>

    <div popover="manual" class="xprez-popover" data-controller="XprezModulePopover">
        <div class="xprez-popover__content">
            {% block popover %}
                <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">{{ module.verbose_name }}</span>
                            <span
                                class="xprez-btn xprez-btn--sm"
                                title='{% trans "All settings of selected modules will be overwritten with current settings" %}'
                                data-xprez-module-sync-selected
                                data-hidden
                            >
                                <span>Sync selected (<span data-xprez-module-sync-selected-count></span>)</span>
                                <i class="xprez-icon-sync"></i>
                            </span>
                        </div>
                        <div class="xprez-option-group__heading-line" data-xprez-live-sync>
                            {% include "xprez/admin/form/field.html" with field=module.admin_form.live_sync size="flex-1" wrapper_class="xprez-option--marker" %}
                        </div>
                    </div>

                    

                    <div class="xprez-option-group__subtitle">{% trans "Attributes" %}</div>

                    {% block options_fields %}
                        {% for field in module.admin_form.get_options_fields %}
                            <div class="xprez-option-row">
                                {% include "xprez/admin/form/field.html" with field=field size="flex-1" %}
                            </div>
                        {% endfor %}
                    {% endblock %}
                    <div data-xprez-module-configs>
                        {% for config in module.admin_form.xprez_configs %}
                            {% xprez_module_config_render_admin config %}
                        {% endfor %}
                    </div>
                </div>
                <div class="xprez-option-group__footer" data-controller="XprezModuleConfigAdder">
                    {% include "xprez/admin/includes/adders/config_module.html" with xprez_admin=module.admin_form.xprez_admin %}
                </div>
            {% endblock %}
        </div>
    </div>

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