{% extends '@ibexadesign/ui/layout.html.twig' %}

{% trans_default_domain 'ibexa_section' %}

{% block body_class %}ibexa-section-view{% endblock %}

{% block breadcrumbs %}
    {% include '@ibexadesign/ui/breadcrumbs.html.twig' with { items: [
        { value: 'breadcrumb.admin'|trans(domain='messages')|desc('Admin') },
        { url: path('ibexa.section.list'), value: 'section.breadcrumb.list'|trans|desc('Sections') },
        { value: 'section.view.title.identifier'|trans({ '%identifier%': section.name })|desc('Section: %identifier%') }
    ]} %}
{% endblock %}

{% block header %}
    {% embed '@ibexadesign/ui/page_title.html.twig' with {
        title: section.name,
    } %}
        {% block bottom %}
            <span class="ibexa-icon-tag">
                {{ 'section.list'|trans|desc('Sections') }}
            </span>
        {% endblock %}
    {% endembed %}
{% endblock %}

{% block content %}
    {% set information_items = [
        {
            label: 'section.name'|trans|desc('Name'),
            content: section.name,
        },
        {
            label: 'section.identifier'|trans|desc('Identifier'),
            content: section.identifier,
        },
        {
            label: 'section.id'|trans|desc('ID'),
            content: section.id,
        },
    ] %}
    {% set information_headline_items %}
        {% if can_edit %}
            {% set modalDataAttributes = deletable ? 'data-bs-toggle=modal data-bs-target=#delete-section-modal' : '' %}
            <a
                href="{{ path('ibexa.section.update', {'sectionId': section.id}) }}"
                class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--small"
            >
                <svg class="ibexa-icon ibexa-icon--small ibexa-icon--edit">
                    <use xlink:href="{{ ibexa_icon_path('edit') }}"></use>
                </svg>
                <span class="ibexa-btn__label">
                    {{ 'section.edit'|trans|desc('Edit') }}
                </span>
            </a>
            <button
                type="button"
                class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--small {% if not deletable %}disabled{% endif %}"
                {% if not deletable %}disabled{% endif %}
                {{ modalDataAttributes }}
            >
                <svg class="ibexa-icon ibexa-icon--small">
                    <use xlink:href="{{ ibexa_icon_path('trash') }}"></use>
                </svg>
                <span class="ibexa-btn__label">
                    {{ 'section.action.delete'|trans|desc('Delete') }}
                </span>
            </button>
            {% if deletable %}
                {% include '@ibexadesign/section/modal/delete_confirmation.html.twig' with {'form': form_section_delete} %}
            {% endif %}
        {% endif %}
    {% endset %}

    <div class="ibexa-container">
        {% include '@ibexadesign/ui/component/details/details.html.twig' with {
            headline: 'tab.details.technical_details'|trans()|desc('Technical details'),
            headline_items: information_headline_items,
            items: information_items,
        } only %}

        {{ render(controller('Ibexa\\Bundle\\AdminUi\\Controller\\SectionController::viewSectionContentAction', {
            'section': section,
            'page': app.request.query.getInt('page', 1)
        })) }}
    </div>
{% endblock %}

{% block javascripts %}
    {{ encore_entry_script_tags('ibexa-admin-ui-section-view-js', null, 'ibexa') }}
{% endblock %}