{% extends 'extends/form/form.html.twig' %}

{% block form_label %}
    {% if label is not same as(false) %}
        {% if not compound %}
            {% set label_attr = label_attr|merge({ for: id }) %}
        {% endif %}

        {% set label_attr = label_attr|merge({
            class: ('text-[11px] uppercase tracking-[0.18em] text-primary/65 ' ~ (label_attr.class|default('')))|trim
        }) %}

        {% 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 %}

        <label{% with { attr: label_attr } %}{{ block('attributes') }}{% endwith %}>
            {% if translation_domain is same as(false) %}
                {{ label }}
            {% else %}
                {{ label|trans(label_translation_parameters, translation_domain) }}
            {% endif %}
            {% if required %}
                <span class="text-secondary">*</span>
            {% endif %}
        </label>
    {% endif %}
{% endblock %}

{% block form_widget_simple %}
    {% set has_errors = errors|length > 0 %}
    {% set attr = attr|merge({
        class: ('block h-12 w-full min-w-0 max-w-full border bg-white px-5 text-[15px] text-primary outline-none transition placeholder:text-primary/35 focus:ring-0 ' ~
        (has_errors ? 'border-red-400 focus:border-red-400' : 'border-primary/10 focus:border-secondary/60') ~ ' ' ~
        (attr.class|default('')))|trim
    }) %}
    {{ parent() }}
{% endblock %}

{% block textarea_widget %}
    {% set has_errors = errors|length > 0 %}
    {% set attr = attr|merge({
        class: ('block min-h-[180px] w-full min-w-0 max-w-full border bg-white px-5 py-4 text-[15px] text-primary outline-none transition placeholder:text-primary/35 focus:ring-0 ' ~
        (has_errors ? 'border-red-400 focus:border-red-400' : 'border-primary/10 focus:border-secondary/60') ~ ' ' ~
        (attr.class|default('')))|trim
    }) %}
    {{ parent() }}
{% endblock %}

{% block choice_widget_collapsed %}
    {% set has_errors = errors|length > 0 %}
    {% set attr = attr|merge({
        class: ('block h-12 w-full min-w-0 max-w-full border bg-white px-5 text-[15px] text-primary outline-none transition focus:ring-0 ' ~
        (has_errors ? 'border-red-400 focus:border-red-400' : 'border-primary/10 focus:border-secondary/60') ~ ' ' ~
        (attr.class|default('')))|trim
    }) %}
    {{ parent() }}
{% endblock %}

{% block form_errors %}
    {% if errors|length > 0 %}
        <ul class="mt-1 text-sm text-red-600">
            {% for error in errors %}
                <li>{{ error.message }}</li>
            {% endfor %}
        </ul>
    {% endif %}
{% endblock %}

{% block _checkout_paymentMethod_widget %}
    {% set choices = form.vars.payment_method_choices|default([]) %}

    <div class="space-y-3">
        {% for choice in choices %}
            {% set child = choice.child %}
            {% set widget_attr = child.vars.attr|merge({
                class: ((child.vars.attr.class|default('')) ~ ' h-4 w-4 border-primary/20 text-secondary focus:ring-secondary')|trim,
                'data-action': 'change->live#action',
                'data-live-action-param': 'savePaymentMethod',
                'data-loading': 'action(savePaymentMethod)|addAttribute(disabled)'
            }) %}

            <label
                for="{{ child.vars.id }}"
                class="flex cursor-pointer items-center gap-4 border px-4 py-4 transition {% if child.vars.checked %}border-secondary/50 bg-[#fffaf3]{% else %}border-primary/8 bg-white hover:border-secondary/35{% endif %}"
            >
                {{ form_widget(child, {
                    attr: widget_attr
                }) }}

                <span class="flex-1">
                    {% set payment_description = choice.method.configuration['text']|default('')|striptags|trim %}
                    {% set choice_subtitle = choice.subtitle is not empty
                        ? choice.subtitle
                        : (choice.payment_online
                            ? 'checkout_design.payment_card_subtitle'|trans
                            : (payment_description is not empty ? 'checkout_design.payment_bank_subtitle'|trans : '')) %}
                    <span class="block text-sm font-semibold uppercase tracking-[0.12em] text-primary">{{ choice.name }}</span>
                    {% if choice_subtitle is not empty %}
                        <span class="mt-1 block text-sm text-primary/70">{{ choice_subtitle }}</span>
                    {% endif %}
                </span>

                {% if choice.icon_path %}
                    <span class="flex h-10 w-16 shrink-0 items-center justify-center border border-primary/8 bg-surface px-2">
                        <twig:Image
                            local
                            responsive="{{ false }}"
                            path="{{ asset(choice.icon_path|imagine_filter('relative_widen_100_filter')) }}"
                            imageWidth="100"
                            imageHeight="40"
                            alt="{{ choice.icon_alt }}"
                            class="h-full w-full"
                            img:class="max-h-6 w-auto object-contain"
                        />
                    </span>
                {% endif %}

                {% if choice.payment_online %}
                    <span class="bg-primary px-3 py-1 text-[10px] uppercase tracking-[0.14em] text-white">
                        {{ 'checkout_design.payment_secure_badge'|trans }}
                    </span>
                {% endif %}
            </label>
        {% endfor %}
    </div>
{% endblock %}
