{% use 'bootstrap_4_layout.html.twig' %}

{% block form_start -%}
    {% if 'easyadmin' == block_prefixes|slice(-2)|first %}
        {% set attr = attr|merge({
            'class': [attr.class|default(''), easyadmin.view ~ '-form']|join(' '),
            'data-view': easyadmin.view,
            'data-entity': easyadmin.entity.name,
            'data-entity-id': attribute(value, easyadmin.entity.primary_key_field_name) ?? '',
        }) %}
    {% endif %}

    {% if form.vars.errors|length > 0 %}
        {{ form_errors(form) }}
    {% endif %}

    {{- parent() -}}

    <input type="hidden" name="referer" value="{{ app.request.query.get('referer', '') }}"/>
{%- endblock form_start %}

{# Widgets #}

{% block form_widget %}
    {% if form.parent.vars.allow_delete|default(false) %}
        {% set remove_item_javascript %}
        $(function() {
            event.preventDefault();

            var containerDiv = $('#{{ id }}').parents('.form-group:first');
            var parentDiv = containerDiv.parents('[data-prototype]:first');
            containerDiv.remove();
            parentDiv.trigger('easyadmin.collection.item-deleted');

            var hasCountAttr = parentDiv.data('count');

            if (hasCountAttr === undefined) {
                var numItems = parentDiv.children('div.form-group').length;
                parentDiv.data('count', ++numItems)
            }

            if (0 == parentDiv.children().length && 'undefined' !== parentDiv.attr('data-empty-collection')) {
                $(parentDiv.attr('data-empty-collection')).insertBefore(parentDiv);
            }
        });
        {% endset %}

        <div class="field-collection-item-row">
            <div class="field-collection-item-action">
                <a href="#" onclick="{{ remove_item_javascript|raw }}; return false;" class="text-danger" title="{{ 'action.remove_item'|trans({}, 'EasyAdminBundle') }}">
                    <i class="fa fa-window-close"></i>
                </a>
            </div>
            <div class="field-collection-item-widget">
                {{ parent() }}
            </div>
        </div>
    {% else %}
        {{ parent() }}
    {% endif %}
{% endblock form_widget %}

{% block form_widget_simple -%}
    {% if type is not defined or type not in ['file', 'hidden'] %}
        {%- set attr = attr|merge({class: (attr.class|default('') ~ ' form-control')|trim}) -%}
    {% endif %}
    {%- if type is defined and (type == 'range' or type == 'color') %}
        {# Attribute "required" is not supported #}
        {%- set required = false -%}
    {% endif %}
    {{- parent() -}}
{%- endblock form_widget_simple %}

{% block date_widget -%}
    <div class="datetime-widget datetime-widget-date">
        {{- parent() -}}
    </div>
{%- endblock date_widget %}

{% block time_widget -%}
    <div class="datetime-widget datetime-widget-time">
        {{- parent() -}}
    </div>
{%- endblock time_widget %}

{% block choice_widget_collapsed -%}
    {%- set attr = attr|merge({class: (attr.class|default('') ~ ' form-control')|trim}) -%}
    {{- parent() -}}

    {% if form.parent.vars.allow_delete|default(false) %}
        {% set remove_item_javascript %}
            $(function() {
                event.preventDefault();

                var containerDiv = $('#{{ id }}').parents('.form-group:first');
                var parentDiv = containerDiv.parents('[data-prototype]:first');
                containerDiv.remove();
                parentDiv.trigger('easyadmin.collection.item-deleted');

                if (0 == parentDiv.children().length && 'undefined' !== parentDiv.attr('data-empty-collection')) {
                    $(parentDiv.attr('data-empty-collection')).insertBefore(parentDiv);
                }
            });
        {% endset %}

        <div class="text-right field-collection-item-action">
            <a href="#" onclick="{{ remove_item_javascript|raw }}" class="text-danger">
                <i class="fa fa-remove"></i>
                {{ 'action.remove_item'|trans({}, 'EasyAdminBundle') }}
            </a>
        </div>
    {% endif %}
{%- endblock %}

{# Rows #}

{% block form_row -%}
    {% set _field_type = easyadmin.field.fieldType|default('default') %}
    <div class="form-group {% if (not compound or force_error|default(false)) and not valid %}has-error{% endif %} field-{{ block_prefixes|slice(-2)|first }}">
        {{- form_label(form) -}}
        <div class="form-widget">
            {{- form_widget(form) -}}

            {% if _field_type in ['datetime', 'datetime_immutable', 'date', 'date_immutable', 'dateinterval', 'time', 'time_immutable', 'birthday'] and easyadmin.field.nullable|default(false) %}
                <div class="nullable-control">
                    <label>
                        <input type="checkbox" {% if data is null %}checked="checked"{% endif %}>
                        {{ 'label.nullable_field'|trans({}, 'EasyAdminBundle')}}
                    </label>
                </div>
            {% endif %}

            {% if easyadmin.field.help|default(form.vars.help) != '' %}
                <span class="help-block">{{ easyadmin.field.help|default(form.vars.help)|trans(domain = easyadmin.entity.translation_domain)|raw }}</span>
            {% endif %}

            {{- form_errors(form) -}}
        </div>
    </div>
{%- endblock form_row %}

{% block collection_row %}
    {{ block('form_row') }}

    {% if allow_add|default(false) %}
        {% set js_add_item %}
            $(function() {
                event.preventDefault();

                var collection = $('#{{ id }}');
                // Use a counter to avoid having the same index more than once
                var numItems = collection.data('count') || collection.children('div.form-group').length;

                collection.prev('.collection-empty').remove();

                var newItem = collection.attr('data-prototype')
                    .replace(/\>{{ prototype.vars.name }}label__\</g, '>' + numItems + '<')
                    .replace(/_{{ name }}_{{ prototype.vars.name }}/g, '_{{ name }}_' + numItems)
                    .replace(/{{ name }}\]\[{{ prototype.vars.name }}\]/g, '{{ name }}][' + numItems + ']')
                ;

                // Increment the counter and store it in the collection
                collection.data('count', ++numItems);

                collection.append(newItem).trigger('easyadmin.collection.item-added');
            });
        {% endset %}

        <div class="form-group field-collection-action">
            <div class="form-widget">
                <a href="#" onclick="{{ js_add_item|raw }}; return false;" class="btn btn-secondary btn-sm">
                    <i class="fa fa-plus"></i>
                    <span class="btn-label">{{ (form|length == 0 ? 'action.add_new_item' : 'action.add_another_item')|trans({}, 'EasyAdminBundle') }}</span>
                </a>
            </div>
        </div>
    {% endif %}
{% endblock collection_row %}

{% block button_row -%}
    <div class="form-group field-{{ block_prefixes|slice(-2)|first }} {{ easyadmin.field.css_class|default('') }}">
        {{- form_widget(form) -}}
    </div>
{%- endblock button_row %}

{# Labels #}

{% block form_label -%}
    {% if label is not same as(false) -%}
        {%- if compound is defined and compound -%}
            {%- set element = 'legend' -%}
            {%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' col-form-label')|trim}) -%}
        {%- else -%}
            {%- set label_attr = label_attr|merge({for: id, class: (label_attr.class|default('') ~ ' form-control-label')|trim}) -%}
        {%- endif -%}
        {% if required -%}
            {% set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' required')|trim}) %}
        {%- endif -%}
        {% if label is empty -%}
            {%- if label_format is not empty -%}
                {% set label = label_format|replace({
                    '%name%': name,
                    '%id%': id,
                }) %}
            {%- else -%}
                {% set label = name|humanize %}
            {%- endif -%}
        {%- endif -%}
        <{{ element|default('label') }}{% if label_attr %}{% with { attr: label_attr } %}{{ block('attributes') }}{% endwith %}{% endif %}>{{ translation_domain is same as(false) ? label : label|trans({}, translation_domain) }}</{{ element|default('label') }}>
    {%- endif -%}
{%- endblock form_label %}

{# Errors #}

{%- block form_widget_compound -%}
    <div class="form-widget-compound">
        {# the "is iterable" check is needed because if an object implements __toString() and
           returns an empty string, "is empty" returns true even if it's not a collection #}
        {% if value is null or (value is iterable and value is empty) %}
            {{ block('empty_collection') }}
        {% endif %}
        {% if value is iterable and value is empty or form.vars.prototype is defined %}
            {% set attr = attr|merge({'data-empty-collection': block('empty_collection') }) %}
        {% endif %}

        {{ parent() }}
    </div>
{%- endblock form_widget_compound -%}

{% block empty_collection %}
    <div class="empty collection-empty">
        {{ include(easyadmin.entity.templates.label_empty) }}
    </div>
{% endblock empty_collection %}

{% block vich_file_row %}
    {% set force_error = true %}
    {{ block('form_row') }}
{% endblock %}

{% block vich_file_widget %}
    <div class="easyadmin-vich-file">
        {% if download_uri|default('') is not empty %}
            {% set download_title = download_uri|split('/')|last ?: 'download'|trans({}, 'VichUploaderBundle') %}
            {% set file_extension = download_uri|split('.')|last %}
            {% set extension_icons = {
                'gif': 'fa-file-image-o',
                'jpg': 'fa-file-image-o',
                'pdf': 'fa-file-pdf-o',
                'png': 'fa-file-image-o',
                'zip': 'fa-file-archive-o'
            } %}
            <a class="easyadmin-vich-file-name" href="{{ asset(download_uri) }}">
                <i class="fa {{ extension_icons[file_extension] ?? 'fa-file-o' }}"></i>
                {{ download_title }}
            </a>
        {% endif %}

        {% set file_upload_js %}
            var newFile = document.getElementById('{{ form.file.vars.id }}').files[0];
            var fileSizeInMegabytes = newFile.size > 1024 * 1024;
            var fileSize = fileSizeInMegabytes ? newFile.size / (1024 * 1024) : newFile.size / 1024;
            document.getElementById('{{ form.file.vars.id }}_new_file_name').innerText = newFile.name + ' (' + fileSize.toFixed(2) + ' ' + (fileSizeInMegabytes ? 'MB' : 'KB') + ')';
        {% endset %}

        <div class="easyadmin-vich-file-actions">
            {# the container element is needed to allow customizing the <input type="file" /> #}
            <div class="btn btn-secondary input-file-container">
                <i class="fa fa-upload"></i> {{ 'action.choose_file'|trans({}, 'EasyAdminBundle') }}
                <span class="btn-label">{{ form_widget(form.file, { 'attr': { 'onchange': file_upload_js }}) }}</span>
            </div>

            {% if form.delete is defined %}
                {{ form_row(form.delete, { label: 'form.label.delete'|trans({}, 'VichUploaderBundle') }) }}
            {% endif %}
        </div>
        <div class="small" id="{{ form.file.vars.id }}_new_file_name"></div>
    </div>
{% endblock %}

{% block vich_image_row %}
    {% set force_error = true %}
    {{ block('form_row') }}
{% endblock %}

{% block vich_image_widget %}
    <div class="easyadmin-vich-image">
        {% if image_uri|default('') is not empty %}
            {% if download_uri|default('') is empty %}
                <div class="easyadmin-thumbnail">
                    <img style="cursor: initial" src="{{ asset(image_uri) }}">
                </div>
            {% else %}
                {% set _lightbox_id = 'easyadmin-lightbox-' ~ id %}

                <a href="#" class="easyadmin-thumbnail" data-featherlight="#{{ _lightbox_id }}" data-featherlight-close-on-click="anywhere">
                    <img src="{{ asset(download_uri) }}">
                </a>

                <div id="{{ _lightbox_id }}" class="easyadmin-lightbox">
                    <img src="{{ asset(download_uri) }}">
                </div>
            {% endif %}
        {% endif %}

        {% set file_upload_js %}
            var newFile = document.getElementById('{{ form.file.vars.id }}').files[0];
            var fileSizeInMegabytes = newFile.size > 1024 * 1024;
            var fileSize = fileSizeInMegabytes ? newFile.size / (1024 * 1024) : newFile.size / 1024;
            document.getElementById('{{ form.file.vars.id }}_new_file_name').innerText = newFile.name + ' (' + fileSize.toFixed(2) + ' ' + (fileSizeInMegabytes ? 'MB' : 'KB') + ')';
        {% endset %}

        <div class="easyadmin-vich-image-actions">
            {# the container element is needed to allow customizing the <input type="file" /> #}
            <div class="btn btn-secondary input-file-container">
                <i class="fa fa-upload"></i> {{ 'action.choose_file'|trans({}, 'EasyAdminBundle') }}
                <span class="btn-label">{{ form_widget(form.file, { 'attr': { 'onchange': file_upload_js }}) }}</span>
            </div>

            {% if form.delete is defined %}
                {{ form_row(form.delete, { label: 'form.label.delete'|trans({}, 'VichUploaderBundle') }) }}
            {% endif %}
        </div>
        <div class="small" id="{{ form.file.vars.id }}_new_file_name"></div>
    </div>
{% endblock %}

{% block easyadmin_rest %}
    {{- form_rest(form) -}}

    <section class="content-footer">
        <div class="form-actions">
            {{- block('item_actions') -}}
        </div>
    </section>
{% endblock easyadmin_rest %}

{% block item_actions %}
    {% set _translation_domain = easyadmin.entity.translation_domain %}
    {% set _trans_parameters = { '%entity_name%':  easyadmin.entity.name|trans, '%entity_label%': easyadmin.entity.label|trans } %}

    {# the 'save' action is hardcoded for the 'edit' and 'new' views #}
    <button type="submit" class="btn btn-primary action-save">
        <span class="btn-label">{{ 'action.save'|trans(_trans_parameters, _translation_domain) }}</span>
    </button>

    {% set _entity_actions = (easyadmin.view == 'new')
        ? easyadmin_get_actions_for_new_item(easyadmin.entity.name)
        : easyadmin_get_actions_for_edit_item(easyadmin.entity.name) %}

    {% set _entity_id = (easyadmin.view == 'new')
        ? null
        : attribute(easyadmin.item, easyadmin.entity.primary_key_field_name) %}

    {% set _request_parameters = { entity: easyadmin.entity.name, referer: app.request.query.get('referer') } %}

    {{ include('@EasyAdmin/default/includes/_actions.html.twig', {
        actions: _entity_actions,
        request_parameters: _request_parameters,
        translation_domain: _translation_domain,
        trans_parameters: _trans_parameters,
        item_id: _entity_id,
        item: easyadmin.item
    }, with_context = false) }}
{% endblock item_actions %}

{# EasyAdmin form type #}
{% block easyadmin_widget %}
    {% set _translation_domain = easyadmin.entity.translation_domain %}
    <div class="row">
        {% if easyadmin_form_tabs | length > 0 %}
            <div class="col-12">
                <div class="nav-tabs-custom form-tabs">
                    <ul class="nav nav-tabs">
                        {% for tab_name, tab_config in easyadmin_form_tabs %}
                            <li class="nav-item">
                                <a class="nav-link {% if tab_config.active %}active{% endif %}" href="#{{ tab_config['id'] }}" id="{{ tab_config['id'] }}-tab" data-toggle="tab">
                                    {% if tab_config.icon|default(false) %}
                                        <i class="fa fa-{{ tab_config.icon }}"></i>
                                    {% endif %}
                                    {{ tab_config['label']|trans(domain = _translation_domain) }}
                                    {% if tab_config.errors > 0 %}
                                        <span class="badge badge-danger" title="{{ 'form.tab.error_badge_title'|transchoice(tab_config.errors, {}, 'EasyAdminBundle') }}">
                                            {{ tab_config.errors }}
                                        </span>
                                    {% endif %}
                                </a>
                            </li>
                        {% endfor %}
                    </ul>
                    <div class="tab-content">
                        {% for tab_name, tab_config in easyadmin_form_tabs %}
                            <div id="{{ tab_config['id'] }}" class="tab-pane {% if tab_config.active %}active{% endif %}">
                                {% if tab_config['help']|default(false) %}
                                    <div class="content-header-help tab-help">
                                        {{ tab_config['help']|trans(domain = _translation_domain)|raw }}
                                    </div>
                                {% endif %}

                                <div class="row">
                                    {{ block('easyadmin_widget_groups') }}
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        {% else %}
            {{ block('easyadmin_widget_groups') }}
        {% endif %}
    </div>
{% endblock easyadmin_widget %}

{% block easyadmin_widget_groups %}
    {% for group_name, group_config in easyadmin_form_groups if not group_config.form_tab or group_config.form_tab == tab_name %}
        <div class="field-group col-{{ group_config.columns|default('12') }} {{ group_config.css_class|default('') }}">
            <fieldset>
                {% if group_config.label|default(false) or group_config.icon|default(false) or group_config.collapsible|default(false) %}
                    <legend class="{{ group_config.icon|default(false) ? 'with-icon' }}">
                        {% if group_config.icon|default(false) %}
                            <i class="fa fa-{{ group_config.icon }}"></i>
                        {% endif %}
                        {{ group_config.label|trans(domain = _translation_domain)|raw }}
                    </legend>

                    {% if group_config.help|default(false) %}
                        <div class="legend-help">{{ group_config.help|trans(domain = _translation_domain)|raw }}</div>
                    {% endif %}
                {% endif %}

                <div class="row">
                    {% for field in form if 'hidden' not in field.vars.block_prefixes and field.vars.easyadmin.form_group == group_name %}
                        {% if not field.vars.easyadmin.form_tab or field.vars.easyadmin.form_tab == tab_name %}
                            <div class="col-{{ field.vars.easyadmin.field.columns|default('12') }} {{ field.vars.easyadmin.field.css_class|default('') }}">
                                {{ form_row(field) }}
                            </div>
                        {% endif %}
                    {% endfor %}
                </div>
            </fieldset>
        </div>
    {% else %}
        {% for field in form if 'hidden' not in field.vars.block_prefixes and (not field.vars.easyadmin.form_tab or field.vars.easyadmin.form_tab == tab_name) %}
            <div class="col-{{ field.vars.easyadmin.field.columns|default('12') }} {{ field.vars.easyadmin.field.css_class|default('') }}">
                {{ form_row(field) }}
            </div>
        {% endfor %}
    {% endfor %}
{% endblock easyadmin_widget_groups %}

{# EasyAdminAutocomplete form type #}
{% block easyadmin_autocomplete_widget %}
    {{ form_widget(form.autocomplete, {
        attr: attr|merge({
            'data-easyadmin-autocomplete-url' : path('easyadmin', {
                action: 'autocomplete',
                entity: autocomplete_entity_name,
            })|raw })
        })
    }}
{% endblock easyadmin_autocomplete_widget %}

{% block easyadmin_autocomplete_inner_label %}
    {% set name = form.parent.vars.name %}
    {{- block('form_label') -}}
{% endblock easyadmin_autocomplete_inner_label %}

{# EasyAdminSection form type #}
{% block easyadmin_section_row %}
    {% set _translation_domain = easyadmin.entity.translation_domain %}
    <div class="form-section {{ easyadmin.field.icon|default(false) == false and easyadmin.field.label|default(false) == false ? 'form-section-empty' }} {{ easyadmin.field.css_class|default('') }}">
        <h2>
            {% if easyadmin.field.icon|default(false) %}<i class="fa fa-{{ easyadmin.field.icon }}"></i>{% endif %}
            <span>{% if easyadmin.field.label|default(false) %}{{ easyadmin.field.label|default('')|trans(domain = _translation_domain)|raw }}{% endif %}</span>
        </h2>

        {% if easyadmin.field.help|default(false) %}
            <p class="form-section-help">{{ easyadmin.field.help|trans(domain = _translation_domain)|raw }}</p>
        {% endif %}
    </div>
{% endblock easyadmin_section_row %}

{# EasyAdminBatch form type #}
{% block easyadmin_batch_widget %}
    {% set _translation_domain = easyadmin.entity.translation_domain %}
    {% set _trans_parameters = { '%entity_name%':  easyadmin.entity.name|trans, '%entity_label%': easyadmin.entity.label|trans } %}

    {{ form_widget(form.ids) }}
    <button type="button" class="btn btn-link deselect-batch-button">{{ 'action.deselect'|trans(_trans_parameters, _translation_domain) }}</button>
    {% for action in batch_actions %}
        <button type="submit" class="btn {{ action.css_class|default('btn-secondary') }}" title="{{ action.title|default('') is empty ? '' : action.title|trans(_trans_parameters) }}" name="{{ form.name.vars.full_name }}" value="{{ action.name }}">
            {%- if action.icon %}<i class="fa fa-{{ action.icon }}"></i> {% endif -%}
            {%- if action.label is defined and not action.label is empty -%}
                {{ action.label|trans }}
            {%- endif -%}
        </button>
    {% endfor %}
{% endblock easyadmin_batch_widget %}