{% use '@CpCreationVitiCore/admin/form/fields.html.twig' %}

{% macro input(field, class = '') %}
    {% set field_attr = field.vars.attr|default({}) %}
    {% set input_class = 'w-full rounded-md border border-stone-300 bg-white px-3 py-2 text-sm text-stone-900 shadow-sm outline-none transition placeholder:text-stone-400 focus:border-[#9d7c47] focus:ring-2 focus:ring-[#9d7c47]/20 disabled:cursor-not-allowed disabled:bg-stone-100 ' ~ class %}
    <div class="grid gap-1.5">
        {{ form_label(field, null, {
            label_attr: {
                class: 'text-xs font-extrabold uppercase tracking-wide text-stone-500'
            }
        }) }}
        {{ form_widget(field, {
            attr: field_attr|merge({
                class: (field_attr.class|default('') ~ ' ' ~ input_class)|trim
            })
        }) }}
        {% if field.vars.help is defined and field.vars.help %}
            <p class="m-0 text-xs leading-5 text-stone-500">{{ field.vars.help|trans({}, field.vars.translation_domain|default('form')) }}</p>
        {% endif %}
        {{ form_errors(field) }}
    </div>
{% endmacro %}

{% macro checkbox(field) %}
    {% set field_attr = field.vars.attr|default({}) %}
    <div>
        <label class="flex items-start gap-3 rounded-md border border-stone-200 bg-white p-3 text-sm font-semibold leading-5 text-stone-700">
            {{ form_widget(field, {
                attr: field_attr|merge({
                    class: (field_attr.class|default('') ~ ' mt-0.5 h-4 w-4 rounded border-stone-300 text-[#9d7c47] focus:ring-[#9d7c47]')|trim
                })
            }) }}
            <span>{{ field.vars.label|trans({}, field.vars.translation_domain|default('form')) }}</span>
        </label>
        {{ form_errors(field) }}
    </div>
{% endmacro %}

{% import _self as ui %}

{% block image_widget %}
    {% import _self as ui %}
    <div class="grid gap-3 rounded-md border border-stone-200 bg-stone-50/70 p-4">
        {% if form.vars.title %}
            {{ ui.input(form.title) }}
        {% endif %}

        <div class="grid gap-2">
            <span class="text-xs font-extrabold uppercase tracking-wide text-stone-500">Fichier</span>
            {{ form_widget(form.file, {
                attr: {
                    class: 'block w-full cursor-pointer rounded-md border border-stone-300 bg-white text-sm text-stone-700 shadow-sm file:mr-4 file:border-0 file:bg-[#9d7c47] file:px-4 file:py-2 file:text-sm file:font-bold file:text-white hover:file:bg-[#80622f] focus:outline-none'
                }
            }) }}
            {{ form_errors(form.file) }}
        </div>

        {% if form.vars.data is not null and form.vars.data.path is not null %}
            <div class="flex flex-wrap items-start gap-3">
                <img class="h-24 w-36 rounded-md border border-stone-200 object-cover"
                     src="{{ asset(form.vars.data.path) | imagine_filter('relative_widen_100_filter') }}"
                     data-id="{{ form.vars.data.id.__toString }}">
                {% if form.parent.parent is null %}
                    <a href="#" class="remove-media inline-flex min-h-9 items-center justify-center rounded border border-red-700 bg-red-700 px-3 text-xs font-bold text-white transition hover:bg-red-800" data-id="{{ form.vars.data.id.__toString }}">
                        <i class="fa fa-trash" aria-hidden="true"></i>
                    </a>
                {% endif %}
            </div>
        {% endif %}
    </div>
{% endblock %}

{% block shop_config_multiple_widget %}
    {% import _self as ui %}
    <div class="rounded-md border border-stone-200 bg-stone-50/70 p-4">
        <div class="grid gap-4 xl:grid-cols-12">
            <div class="xl:col-span-2">
                {{ ui.input(form.qtyOf) }}
            </div>
            <div class="xl:col-span-2">
                {{ ui.input(form.qtyAt) }}
            </div>
            <div class="xl:col-span-2">
                {{ ui.input(form.multiple) }}
            </div>
            <div class="xl:col-span-3">
                {{ ui.input(form.zones, 'min-h-28') }}
            </div>
            <div class="xl:col-span-3">
                {{ ui.input(form.types, 'min-h-28') }}
            </div>
            <div class="xl:col-span-9">
                {{ ui.checkbox(form.minimum) }}
            </div>
            <div class="flex flex-wrap items-end gap-2 xl:col-span-3 xl:justify-end">
                <a href="#" class="collection-up inline-flex h-9 w-9 items-center justify-center rounded border border-stone-200 bg-white text-stone-600 transition hover:border-[#9d7c47] hover:text-stone-900">
                    <i class="fa fa-arrow-up" aria-hidden="true"></i>
                </a>
                <a href="#" class="collection-down inline-flex h-9 w-9 items-center justify-center rounded border border-stone-200 bg-white text-stone-600 transition hover:border-[#9d7c47] hover:text-stone-900">
                    <i class="fa fa-arrow-down" aria-hidden="true"></i>
                </a>
                <a href="#" class="collection-remove inline-flex h-9 w-9 items-center justify-center rounded border border-red-700 bg-red-700 text-white transition hover:bg-red-800">
                    <i class="fa fa-trash" aria-hidden="true"></i>
                </a>
            </div>
        </div>
    </div>
{% endblock %}

{% block shop_config_disable_country_widget %}
    {% import _self as ui %}
    <div class="grid gap-4 rounded-md border border-stone-200 bg-stone-50/70 p-4">
        <div class="grid gap-4 md:grid-cols-[minmax(220px,0.45fr)_minmax(0,1fr)]">
            {{ ui.input(form.country) }}
            <div class="grid gap-3">
                {% for locale, translation in form.translations %}
                    <div class="rounded-md border border-stone-200 bg-white p-3">
                        <div class="mb-3 inline-flex rounded border border-stone-200 bg-stone-50 px-2 py-1 text-xs font-extrabold uppercase tracking-wide text-stone-500">
                            {{ locale }}
                        </div>
                        {{ ui.input(translation.description, 'min-h-32') }}
                    </div>
                {% endfor %}
            </div>
        </div>
        <div class="flex flex-wrap justify-end gap-2">
            <a href="#" class="collection-up inline-flex h-9 w-9 items-center justify-center rounded border border-stone-200 bg-white text-stone-600 transition hover:border-[#9d7c47] hover:text-stone-900">
                <i class="fa fa-arrow-up" aria-hidden="true"></i>
            </a>
            <a href="#" class="collection-down inline-flex h-9 w-9 items-center justify-center rounded border border-stone-200 bg-white text-stone-600 transition hover:border-[#9d7c47] hover:text-stone-900">
                <i class="fa fa-arrow-down" aria-hidden="true"></i>
            </a>
            <a href="#" class="collection-remove inline-flex h-9 w-9 items-center justify-center rounded border border-red-700 bg-red-700 text-white transition hover:bg-red-800">
                <i class="fa fa-trash" aria-hidden="true"></i>
            </a>
        </div>
    </div>
{% endblock %}
