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

{% trans_default_domain ea.i18n.translationDomain %}

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

{% block content_title %}
    {%- apply spaceless -%}
        {% set default_title = ea.crud.defaultPageTitle('detail', entity.instance)|trans(ea.i18n.translationParameters, 'EasyAdminBundle') %}
        {% set custom_title = ea.crud.customPageTitle('detail', entity.instance) %}
        {{ custom_title is null ? default_title|raw : custom_title|trans(ea.i18n.translationParameters)|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 %}
    {% block detail_fields %}
        {% set row_number = 0 %}
        {% for field in entity.fields %}
            {% set is_decoration_field = 'field-form_panel' in field.cssClass %}

            {% if loop.first and not is_decoration_field %}
                {% set row_number = 0 %}
                {{ _self.open_empty_content_panel(field) }}
            {% endif %}

            {% if is_decoration_field %}
                {% if not loop.first %}
                    {{ _self.close_content_panel() }}
                {% endif %}

                {% set row_number = 0 %}
                {% if field.label is empty and field.help is empty %}
                    {{ _self.open_empty_content_panel(field) }}
                {% else %}
                    {{ _self.open_content_panel_with_header(field) }}
                {% endif %}
            {% endif %}

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

            {% set row_number = is_decoration_field ? row_number : row_number + 1 %}
        {% endfor %}

        {{ _self.close_content_panel() }}
    {% endblock %}

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

{% block body_javascript %}
    {{ parent() }}

    <script type="text/javascript">
        $(function() {
            $('.action-delete').on('click', function(e) {
                e.preventDefault();
                const formAction = $(this).attr('formaction');

                $('#modal-delete').modal({ backdrop: true, keyboard: true })
                    .off('click', '#modal-delete-button')
                    .on('click', '#modal-delete-button', function () {
                        $('#delete-form').attr('action', formAction).trigger('submit');
                    });
            });
        });
    </script>
{% endblock %}

{% macro open_empty_content_panel(field) %}

<div class="{{ field.cssClass }}">
    <div class="content-panel">
        <div class="content-panel-body without-header without-footer without-padding">
            <dl class="datalist">
{% endmacro %}

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

{% macro open_content_panel_with_header(field) %}
    {% set collapsible = field.customOption('collapsible') %}
    {% set collapsed = field.customOption('collapsed') %}
    <div class="{{ field.cssClass }}">
        <div class="content-panel">
            <div class="content-panel-header {{ collapsible ? 'collapsible' }} {{ field.help is not empty ? 'with-help' }}">
                {% if collapsible %}
                    <a href="#content-{{ field.uniqueId }}" data-toggle="collapse" class="content-panel-collapse {{ collapsed ? 'collapsed' }}" aria-expanded="{{ collapsed ? 'false' : 'true' }}" aria-controls="content-{{ field.uniqueId }}">
                        <i class="fas fw fa-chevron-right collapse-icon"></i>
                {% endif %}

                        {% if field.customOption('icon') %}
                            <i class="{{ field.customOption('icon') }}"></i>
                        {% endif %}
                        {{ field.label|raw }}

                {% if collapsible %}
                    </a>
                {% endif %}

                {% if field.help is not empty %}
                    <div class="content-panel-header-help">{{ field.help|raw }}</div>
                {% endif %}
            </div>

            <div id="content-{{ field.uniqueId }}" class="content-panel-body without-footer without-padding {{ collapsible ? 'collapse' }} {{ not collapsed ? 'show'}}">
                <dl class="datalist">
{% endmacro %}

{% macro render_field(entity, field, row_number) %}
    <div class="data-row {{ row_number is even ? 'with-background' }} {{ field.cssClass }}">
        <dd>
            {{ field.label|raw }}

            {% if field.help is not empty %}
                <span class="data-help">
                    <i class="far fa-question-circle" data-toggle="tooltip" title="{{ field.help|e('html_attr') }}"></i>
                </span>
            {% endif %}
        </dd>
        <dt>
            {{ include(field.templatePath, { field: field, entity: entity }, with_context = false) }}
        </dt>
    </div>
{% endmacro %}