{% block artgris_media_widget %}

    {% apply spaceless %}
        {% with {'form': form, 'collection': false, 'id': form.vars.id, 'conf': conf, 'extra': extra } only %}
            {{ block('render_media') }}
        {% endwith %}
    {% endapply %}

    {% include '@ArtgrisMedia/form/_modal.html.twig' %}
    {% include '@ArtgrisMedia/form/_crop_modal.html.twig' with {crop_options: form.vars.crop_options} %}

{% endblock %}

{% block artgris_media_collection_widget %}

    {% apply spaceless %}
        {% if prototype is defined %}
            {% set data_prototype %}
                {% with {'form': prototype, 'collection': true, 'id': form.vars.id, 'conf': conf, 'extra': extra } only %}
                    {{ block('render_media') }}
                {% endwith %}
            {% endset %}
            {% set attr = attr|merge({'data-prototype': data_prototype}) %}
            {% set attr = attr|merge({'data-prototype-name': prototype.vars.name}) %}
        {% endif %}
        {% set attr = attr|merge({'data-allow-add': allow_add ? 1 : 0}) %}
        {% set attr = attr|merge({'data-max': data_max ? data_max : 100}) %}
        {% set attr = attr|merge({'data-min': data_min ? data_min : 0}) %}
        {% set attr = attr|merge({'data-init-with-n-elements': data_init_with_n_elements ? data_init_with_n_elements : 1}) %}
        {% set attr = attr|merge({'data-add-at-the-end': data_add_at_the_end ? data_add_at_the_end : false}) %}
        {% set attr = attr|merge({'data-allow-remove': allow_delete ? 1 : 0 }) %}
        {% set attr = attr|merge({'data-name-prefix': full_name}) %}

        <div id="{{ form.vars.id }}" class="artgris-media-list artgris-media-collection" {% for k, v in attr %} {{ k }}="{{ v|e }}"{% endfor %}>
        {% for media in form %}
            {% with {'form': media, 'collection': true, 'id': form.vars.id, 'conf': conf, 'extra': extra } only %}
                {{ block('render_media') }}
            {% endwith %}
        {% endfor %}
        </div>

        {% include '@ArtgrisMedia/form/_modal.html.twig' %}
        {% set crop_options = prototype is defined ? prototype.vars.crop_options : (form.children|first).vars.crop_options|default %}
        {% if crop_options %}
            {% include '@ArtgrisMedia/form/_crop_modal.html.twig' with {crop_options: crop_options} %}
        {% endif %}

    {% endapply %}

{% endblock %}

{#
{% with {'form': form, 'collection': true, 'id': form.vars.id, 'conf': conf } only %}
    {{ block('render_media') }}
{% endwith %}
#}
{% block render_media %}
    {% apply spaceless %}
        <div class="artgris-media container-fluid mb-2 {% if form.vars.errors|length > 0 %}error{% endif %}">

            <div class="row border bg-white align-items-center p-2">
                {% if collection %}
                    <div class="col-md-1">
                        <table class="table-sort">
                            <tr class="table-sort-up">
                                <td><a href="#" class="collection-up btn btn-light btn-x-sm"><span class="fas fa-chevron-up"></span></a></td>
                            </tr>
                            <tr class="table-sort-down">
                                <td><a href="#" class="collection-down btn btn-light btn-x-sm"><span class="fas fa-chevron-down"></span></a></td>
                            </tr>
                        </table>
                    </div>
                {% endif %}

                {% set base_path = form.vars.allow_crop ? get_web_path(conf, extra) : 1 %}
                {% block file_preview %}
                    <div class="img-preview text-center col-md-2 p-2" id="preview-{{ form.vars.id }}" data-id="{{ id }}" data-conf="{{ conf }}"
                         data-extra="{{ extra|json_encode }}" data-base-path="{{ base_path }}">
                        {% set preview = fileIcon(form.vars.data).html %}
                        {% if form.vars.allow_crop and '<img' in preview and '.svg' not in preview and form.vars.data[:base_path|length] == base_path %}
                            <a href="#" class="js-crop crop-hover" data-toggle="modal" data-bs-toggle="modal" data-target="#crop-modal-{{ id }}"
                               data-bs-target="#crop-modal-{{ id }}" data-backdrop="static">
                                <span class="artgris-media-crop-wrapper"><i class="fas fa-crop"></i></span>
                                {{ preview|raw }}
                            </a>
                        {% else %}
                            {{ preview|raw }}
                        {% endif %}
                    </div>
                {% endblock %}

                {# label + input #}
                <div class="{% if collection %}col-md-6{% else %}col-md-7{% endif %}">
                    {% block fields %}
                        <input type="text" class="form-control artgris-media-path" id="{{ form.vars.id }}" name="{{ form.vars.full_name }}"
                               {% if form.vars.required %}required="required"{% endif %} value="{{ form.vars.value }}"
                               placeholder="{{ 'artgris.media.path.placeholder'|trans }}" {{ form.vars.readonly|default ? 'readonly="readonly"' }}>
                    {% endblock %}
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" style="width: 0" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>

                {% if collection %}
                    <div class="col-md-2 p-2 text-center">
                        <div class="btn-group" role="group">
                            {% block media_buttons_collection %}
                                {% include '@ArtgrisMedia/form/_btn_manager.html.twig' with {'id' : id, 'form' : form, 'conf': conf, 'extra': extra} only %}
                            {% endblock %}
                        </div>
                    </div>
                {% else %}
                    <div class="col-md-3 p-2 text-center">
                        <div class="btn-group artgris-browse-group" role="group">
                            {% block media_buttons %}
                                {% include '@ArtgrisMedia/form/_btn_manager.html.twig' with {'id' : id, 'form' : form, 'conf': conf, 'extra': extra, 'collection': false} only %}
                            {% endblock %}
                        </div>
                    </div>
                {% endif %}
                {% if collection %}
                    <div class="col-md-1 p-0 align-top order-md-last order-first">
                        <a href="#"
                           class="float-right js-remove-collection artgris-collection-remove btn btn-sm btn-danger collection-remove collection-action">
                            <span class="fas fa-times"></span></a>
                    </div>
                {% endif %}
            </div>

            {% if collection and form.vars.errors|length > 0 %}
                <div class="m-2 text-danger">
                    <b> {{ form_errors(form) }}</b>
                </div>
            {% endif %}

        </div>
    {% endapply %}
{% endblock %}