{% block artgris_media_widget %}

    {% import _self as artgris %}

    {% apply spaceless %}
        {{ artgris.render_media(form, false, form.vars.id, conf) }}
    {% 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 %}

    {% import _self as artgris %}

    {% apply spaceless %}
        {% if prototype is defined %}
            {% set attr = attr|merge({'data-prototype': artgris.render_media(prototype, true, form.vars.id, conf)}) %}
            {% 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 %}
            {{ artgris.render_media(media, true, form.vars.id, conf) }}
        {% endfor %}
        </div>

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

    {% endapply %}

{% endblock %}

{% macro render_media(form, collection = true, id, conf) %}
    {% apply spaceless %}
        <div class="artgris-media container-fluid {% if form.vars.errors|length > 0 %}error{% endif %}">
            <div class="row bg-white align-items-center">
                {% 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 = get_web_path(conf) %}
                {% set hotspot = false %}
                {% if form.vars.attr is defined and form.vars.attr is iterable and form.vars.attr.typemedia is defined and form.vars.attr.typemedia == "hotspot" %}
                    {% set hotspot = true %}
                {% endif %}

                {% if not hotspot %}
                    <div class="img-preview text-center {% if form.vars.data == "" %} col-auto {% else %} col-md-2 {% endif %} pl-0" id="preview-{{ form.vars.id }}" data-id="{{ id }}" data-conf="{{ conf }}"
                        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 ml-0" data-toggle="modal" data-target="#crop-modal-{{ id }}" data-backdrop="static">                            
                                <span class=""><i class="fas fa-pencil-alt"></i></span>
                                {{ preview|raw }}
                            </a>
                        {% else %}
                            {{ preview|raw }}
                        {% endif %}
                    </div>
                {% endif %}

                {% block fields %}
                    {#label + input#}
                    <div class="col pr-1 pl-1">
                        <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({},'filemanager')}}" {{ form.vars.readonly|default ? 'readonly="readonly"' }}>
                    </div>
                {% endblock %}

                {% if collection %}
                    <div class="col-auto pr-0 pl-2 text-center">
                        <div class="btn-group" role="group">
                            {% include '@ArtgrisMedia/form/_btn_manager.html.twig' with {'id' : id, 'form' : form, 'conf': conf} only %}
                        </div>
                    </div>
                {% else %}
                    <div class="col-auto pr-0 pl-2 text-center">
                        <div class="btn-group artgris-browse-group" role="group">
                            {% include '@ArtgrisMedia/form/_btn_manager.html.twig' with {'id' : id, 'form' : form, 'conf': conf, 'collection': false} only %}
                        </div>
                    </div>
                {% endif %}
                {% if collection %}
                    <div class="col-auto 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 hotspot %}
                <div class="row bg-white align-items-center p-2">
                    <div class="position-relative hotspot-field-wrap">
                        <div class="hotspot-field" id="preview-{{ form.vars.id }}" data-id="{{ id }}" data-conf="{{ conf }}"
                            data-base-path="{{ base_path }}" style="position:relative;display:block">
                            {% set dataExplode = form.vars.name|split("-_-") %}
                            {% set counter = dataExplode[1] %}
                            {% set preview = fileIcon(form.vars.data).html %}
                            {% set nameComponentHotspots = form.vars.name ~ "_content" %}
                            {% set valueHotspots = form.parent.children[nameComponentHotspots].vars.value %}
                            {% if 'img' in preview %}
                                {{ preview|raw }}
                            {% endif %}
                            <div id="divHotspots_{{ counter }}">{{ valueHotspots|raw }}</div>
                        </div>
                    </div>
                </div>
            {% endif %}

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

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