{% extends '@SyliusUi/Form/theme.html.twig' %}

{% block collection_widget -%}
    {% from '@SyliusResource/Macros/notification.html.twig' import error %}
    {% import _self as self %}
    {% set attr = attr|merge({'class': attr.class|default ~ ' controls collection-widget'}) %}

    {% apply spaceless %}
        <div data-form-type="collection" {{ block('widget_container_attributes') }}
            {% if prototype is defined and allow_add %}
                data-prototype='{{ self.collection_item(prototype, allow_delete, button_delete_label, prototype.vars.name)|e }}'
                data-prototype-name='{{ prototype.vars.name }}'
            {%- endif -%}
        >
            {{ error(form.vars.errors) }}

            {% if prototypes|default is iterable %}
                {% for key, subPrototype in prototypes %}
                    <input type="hidden" data-form-prototype="{{ key }}"
                           value="{{ self.collection_item(subPrototype, allow_delete, button_delete_label, subPrototype.vars.name)|e }}"
                           data-subprototype-name="{{ subPrototype.vars.name }}"
                    />
                {% endfor %}
            {% endif %}

            <div data-form-collection="list" class="ui three column stackable grid">
                {% for child in form %}
                    {{ self.collection_item(child, allow_delete, button_delete_label, loop.index0) }}
                {% endfor %}
            </div>

            {% if prototype is defined and allow_add %}
                <a href="#" class="ui labeled icon button" data-form-collection="add">
                    <i class="plus square outline icon"></i>
                    {{ button_add_label|trans }}
                </a>
            {% endif %}
        </div>
    {% endapply %}
{%- endblock collection_widget %}

{% macro collection_item(form, allow_delete, button_delete_label, index) %}
    {% apply spaceless %}
        <div data-form-collection="item" data-form-collection-index="{{ index }}" class="column">
            <div class="ui box segment">
                {{ form_widget(form) }}
            </div>
            {% if allow_delete %}
                <a href="#" data-form-collection="delete" class="ui red labeled icon button" style="margin-bottom: 1em;">
                    <i class="trash icon"></i>
                    {{ button_delete_label|trans }}
                </a>
            {% endif %}
        </div>
    {% endapply %}
{% endmacro %}

{% block sylius_product_image_widget %}
    {% apply spaceless %}
        {{ form_row(form.type) }}
        <label for="{{ form.file.vars.id }}" class="ui icon labeled button"><i class="cloud upload icon"></i> {{ 'sylius.ui.choose_file'|trans }}</label>
        {% if form.vars.value.path|default(null) is not null %}
            <img class="ui small bordered image" src="{{ form.vars.value.path|imagine_filter('sylius_small') }}" alt="{{ form.vars.value.type }}" />
        {% endif %}
        <div class="ui hidden element">
            {{ form_widget(form.file) }}
        </div>
        <div class="ui element">
            {{- form_errors(form.file) -}}
        </div>
        {% if product.id is not null and 0 != product.variants|length and not product.simple %}
            {{ form_row(form.productVariants) }}
        {% endif %}
    {% endapply %}
{% endblock %}

{% block sylius_taxon_image_widget %}
    {% apply spaceless %}
        {{ form_row(form.type) }}
        {% if form.vars.value.path|default(null) is null %}
            <label for="{{ form.file.vars.id }}" class="ui icon labeled button"><i class="cloud upload icon"></i> {{ 'sylius.ui.choose_file'|trans }}</label>
        {% else %}
            <img class="ui small bordered image" src="{{ form.vars.value.path|imagine_filter('sylius_small') }}" alt="{{ form.vars.value.type }}" />
            <label for="{{ form.file.vars.id }}" class="ui icon labeled button"><i class="cloud upload icon"></i> {{ 'sylius.ui.change_file'|trans }}</label>
        {% endif %}
        <div class="ui hidden element">
            {{ form_widget(form.file) }}
        </div>
        <div class="ui element">
            {{- form_errors(form.file) -}}
        </div>
    {% endapply %}
{% endblock %}

{% block sylius_avatar_image_widget %}
    {% apply spaceless %}
        {% if form.vars.value.path|default(null) is not null %}
            <img class="ui small bordered image" src="{{ form.vars.value.path|imagine_filter('sylius_small') }}" alt="{{ form.vars.value.type }}" />
        {% endif %}
        <div class="ui hidden element">
            {{ form_widget(form.file) }}
        </div>
        <div style="margin-top: 10px" >
            <label for="{{ form.file.vars.id }}" class="ui icon labeled button"><i class="cloud upload icon"></i> {{ 'sylius.ui.choose_file'|trans }}</label>
        </div>
        <div class="ui element">
            {{- form_errors(form.file) -}}
        </div>
    {% endapply %}
{% endblock %}