{% if this.isEnabled %}
    <div {{ attributes.defaults({ class: 'mx-auto w-full max-w-2xl' }) }}>
        <div class="border-y border-primary/10 py-4 md:px-1">
            {% if this.isActive %}
                <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-6">
                    <p class="max-w-[58ch] text-[14px] leading-6 text-on-surface-variant">
                        {{ 'shop.view_partner_price'|trans({'%code%': currentGroupName|default(currentCode), '%group%': currentGroupName|default(currentCode)}) }}
                    </p>

                    <button
                        type="button"
                        data-action="live#action"
                        data-live-action-param="reset"
                        class="inline-flex min-h-11 shrink-0 items-center self-start px-1 font-label text-[12px] font-semibold text-primary underline decoration-primary/25 underline-offset-4 transition hover:decoration-primary sm:self-auto"
                        title="{{ 'shop.reset_partner_code'|trans }}"
                    >
                        {{ 'shop.reset'|trans }}
                    </button>
                </div>
            {% else %}
                <div class="flex h-full flex-col gap-4">
                    <span class="block font-label text-[10px] font-semibold uppercase tracking-[0.18em] text-secondary">
                        {{ 'shop.partner_area'|trans }}
                    </span>

                    <div class="grid gap-3 md:grid-cols-[minmax(0,1fr)_auto] md:items-end">
                        <label class="block">
                            <input
                                type="text"
                                data-model="norender|code"
                                value="{{ code }}"
                                placeholder="{{ 'shop.group_code_placeholder'|trans }}"
                                class="min-w-0 w-full border border-primary/15 bg-white px-4 py-3 text-[14px] uppercase tracking-[0.14em] text-primary outline-none transition placeholder:text-on-surface-variant/45 focus:border-primary"
                            >
                        </label>

                        <button
                            type="button"
                            data-action="live#action"
                            data-live-action-param="apply"
                            class="inline-flex min-h-[48px] items-center justify-center bg-primary px-6 py-3 font-label text-[11px] font-semibold uppercase tracking-[0.18em] text-white transition hover:bg-secondary"
                        >
                            {{ 'shop.partner_valid'|trans }}
                        </button>
                    </div>

                    {% if errorMessage %}
                        <div class="border border-red-200 bg-red-50 px-4 py-3 text-sm leading-6 text-red-700">
                            {{ errorMessage }}
                        </div>
                    {% endif %}
                </div>
            {% endif %}
        </div>
    </div>
{% endif %}
