{# @var ea \EasyCorp\Bundle\EasyAdminBundle\Context\AdminContext #}
{# @var entity \EasyCorp\Bundle\EasyAdminBundle\Dto\EntityDto #}
{% extends ea.templatePath('layout') %}

{% block body_id 'ea-detail-' ~ entity.name ~ '-' ~ entity.primaryKeyValue %}
{% block body_class 'ea-detail ea-detail-' ~ entity.name %}

{% set ea_field_assets = ea.crud.fieldAssets(constant('EasyCorp\\Bundle\\EasyAdminBundle\\Config\\Crud::PAGE_DETAIL')) %}

{% block configured_head_contents %}
    {{ parent() }}
    {% for htmlContent in ea_field_assets.headContents %}
        {{ htmlContent|raw }}
    {% endfor %}
{% endblock %}

{% block configured_body_contents %}
    {{ parent() }}
    {% for htmlContent in ea_field_assets.bodyContents %}
        {{ htmlContent|raw }}
    {% endfor %}
{% endblock %}

{% block configured_stylesheets %}
    {{ parent() }}
    {{ include('@EasyAdmin/includes/_css_assets.html.twig', { assets: ea_field_assets.cssAssets }, with_context = false) }}
    {{ include('@EasyAdmin/includes/_encore_link_tags.html.twig', { assets: ea_field_assets.webpackEncoreAssets }, with_context = false) }}
{% endblock %}

{% block configured_javascripts %}
    {{ parent() }}
    {{ include('@EasyAdmin/includes/_js_assets.html.twig', { assets: ea_field_assets.jsAssets }, with_context = false) }}
    {{ include('@EasyAdmin/includes/_encore_script_tags.html.twig', { assets: ea_field_assets.webpackEncoreAssets }, with_context = false) }}
{% endblock %}

{% block content_title %}
    {%- apply spaceless -%}
        {% set custom_page_title = ea.crud.customPageTitle(pageName, entity ? entity.instance : null, ea.i18n.translationParameters) %}
        {{ custom_page_title is null
            ? ea.crud.defaultPageTitle(null, null, ea.i18n.translationParameters)|trans|raw
            : custom_page_title|trans|raw }}
    {%- endapply -%}
{% endblock %}

{% block page_actions %}
    {% for action in entity.actions %}
        {{ include(action.templatePath, { action: action }, with_context = false) }}
    {% endfor %}
{% endblock %}

{% block content_footer_wrapper '' %}

{% block main %}
    {% set field_layout = ea_create_field_layout(entity.fields) %}
    {% block detail_fields %}
        {% if field_layout.hasTabs %}
            {{ _self.render_detail_fields_with_tabs(entity, field_layout) }}
        {% else %}
            {{ _self.render_detail_fields(entity, field_layout.fields) }}
        {% endif %}
    {% endblock detail_fields %}

    {% block delete_form %}
        {{ include('@EasyAdmin/crud/includes/_delete_form.html.twig', { entity_id: entity.primaryKeyValue }, with_context = false) }}
    {% endblock delete_form %}
{% endblock %}

{% macro render_detail_fields_with_tabs(entity, field_layout) %}
    <div class="col-12">
        <div class="nav-tabs-custom form-tabs">
            <ul class="nav nav-tabs">
                {% for tab in field_layout.tabs %}
                    <li class="nav-item">
                        <a class="nav-link {% if loop.first %}active{% endif %}" href="#tab-pane-{{ tab.uniqueId }}" id="tab-{{ tab.uniqueId }}" data-bs-toggle="tab">
                            {%- if tab.customOption('icon') -%}
                                <i class="fa-fw {{ tab.customOption('icon') }}"></i>
                            {%- endif -%}
                            {{ tab.label|trans(domain = ea.i18n.translationDomain)|raw }}
                        </a>
                    </li>
                {% endfor %}
            </ul>
            <div class="tab-content">
                {% for tab in field_layout.tabs %}
                    <div id="tab-pane-{{ tab.uniqueId }}" class="tab-pane {% if loop.first %}active{% endif %} {{ tab.cssClass|default('') }}">
                        {% if tab.help|default(false) %}
                            <div class="content-header-help tab-help">
                                {{ tab.help|trans(domain = ea.i18n.translationDomain)|raw }}
                            </div>
                        {% endif %}
                        <div class="row">
                            {{ _self.render_detail_fields(entity, field_layout.fieldsInTab(tab.uniqueId)) }}
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
{% endmacro %}

{% macro render_detail_fields(entity, fields) %}
    {% set form_panel_is_already_open = false %}
    {% for field in fields %}
        {% set is_form_field_panel = 'field-form_panel' in field.cssClass %}

        {% if is_form_field_panel or (loop.first and not is_form_field_panel) %}
            {% if form_panel_is_already_open %}
                {{ _self.close_form_field_panel() }}
                {% set form_panel_is_already_open = false %}
            {% endif %}

            {{ _self.open_form_field_panel(is_form_field_panel ? field : null) }}
            {% set form_panel_is_already_open = true %}
        {% endif %}

        {% block detail_field %}
            {% if not is_form_field_panel %}
                {{ _self.render_field(entity, field) }}
            {% endif %}
        {% endblock %}
    {% endfor %}

    {% if form_panel_is_already_open %}
        {{ _self.close_form_field_panel() }}
        {% set form_panel_is_already_open = false %}
    {% endif %}
{% endmacro %}

{% macro open_form_field_panel(field = null) %}
    {% set panel_name = field is null ? null : 'content-' ~ field.uniqueId %}
    {% set collapsible = field is null ? false : field.customOption('collapsible') %}
    {% set collapsed = field is null ? false : field.customOption('collapsed') %}
    {% set panel_icon = field is null ? null : (field.customOptions.get('icon')|default(false)) %}
    {% set panel_label = field is null ? null : field.label %}
    {% set panel_help = field is null ? null : field.help|default(false)%}
    {% set panel_has_header = collapsible or panel_icon or panel_label or panel_help %}

    <div class="{{ field.cssClass ?? '' }}">
        <div class="form-panel">
            {% if panel_has_header %}
                <div class="form-panel-header {{ collapsible ? 'collapsible' }} {{ panel_help is not empty ? 'with-help' }}">
                    <div class="form-panel-title">
                        <a {% if not collapsible %}
                            href="#" class="not-collapsible"
                        {% else %}
                            href="#{{ panel_name }}" data-bs-toggle="collapse"
                            class="form-panel-collapse {{ collapsed ? 'collapsed' }}"
                            aria-expanded="{{ collapsed ? 'false' : 'true' }}" aria-controls="{{ panel_name }}"
                        {% endif %}
                        >
                            {% if collapsible %}
                                <i class="fas fw fa-chevron-right form-panel-collapse-marker"></i>
                            {% endif %}

                            {% if panel_icon %}
                                <i class="form-panel-icon {{ panel_icon }}"></i>
                            {% endif %}
                            {{ panel_label|trans|raw }}
                        </a>

                        {% if panel_help %}
                            <div class="form-panel-help">{{ panel_help|trans|raw }}</div>
                        {% endif %}
                    </div>
                </div>
            {% endif %}

            <div {% if panel_name %}id="{{ panel_name }}"{% endif %} class="form-panel-body {{ collapsible ? 'collapse' }} {{ not collapsed ? 'show'}}">
                <dl class="datalist">
{% endmacro %}

{% macro close_form_field_panel() %}
            </dl>
        </div>
    </div>
</div>
{% endmacro %}

{% macro render_field(entity, field) %}
    <div class="data-row {{ field.cssClass }}">
        <dt>
            {{ field.label|trans|raw }}

            {% if field.help is not empty %}
                <a tabindex="0" class="data-help" data-bs-toggle="popover" data-bs-custom-class="ea-content-help-popover" data-bs-animation="true" data-bs-html="true" data-bs-placement="right" data-bs-trigger="focus" data-bs-content="{{ field.help|trans|e('html_attr') }}">
                    <i class="far fa-question-circle"></i>
                </a>
            {% endif %}
        </dt>
        <dd>
            {{ include(field.templatePath, { field: field, entity: entity }, with_context = false) }}
        </dd>
    </div>
{% endmacro %}