{% form_theme form with app_form_themes() only %}

<div {{ attributes.defaults({ 'data-review-form': '', class: 'w-full' }) }}>
    {% if saved %}
        <div
            data-review-status
            class="mb-7 border border-emerald-200 bg-emerald-50 px-5 py-4 text-[15px] leading-7 text-emerald-800"
            role="status"
        >
            {{ (this.hasEligibleProducts ? 'marketing.review.form.saved_next' : 'marketing.review.form.saved')|trans }}
        </div>
    {% endif %}

    {% if this.hasEligibleProducts %}
        {{ form_start(form, {
            attr: {
                class: 'grid gap-6',
                'data-action': 'live#action:prevent',
                'data-live-action-param': 'submitReview',
                'data-model': 'norender|*',
                novalidate: 'true'
            }
        }) }}
            <div class="text-sm text-red-600 [&_ul]:space-y-1">
                {{ form_errors(form) }}
            </div>

            <div class="grid gap-2">
                {{ form_label(form.productId, null, {
                    label_attr: {
                        class: 'font-label text-[10px] font-semibold uppercase tracking-[0.18em] text-primary/70'
                    }
                }) }}
                <div class="relative">
                    {{ form_widget(form.productId, {
                        attr: {
                            class: 'min-h-[48px] w-full cursor-pointer appearance-none rounded-none border border-primary/12 bg-white px-4 pr-10 text-[15px] text-primary outline-none transition focus:border-primary'
                        }
                    }) }}
                    <span class="pointer-events-none absolute inset-y-0 right-3 flex items-center text-primary/55">
                        <span aria-hidden="true" class="material-symbols-outlined text-[18px] leading-none">expand_more</span>
                    </span>
                </div>
                <div class="text-sm text-red-600">{{ form_errors(form.productId) }}</div>
            </div>

            <div class="grid gap-2">
                {{ form_label(form.rating, null, {
                    label_attr: {
                        class: 'font-label text-[10px] font-semibold uppercase tracking-[0.18em] text-primary/70'
                    }
                }) }}
                <div class="relative">
                    {{ form_widget(form.rating, {
                        attr: {
                            class: 'min-h-[48px] w-full cursor-pointer appearance-none rounded-none border border-primary/12 bg-white px-4 pr-10 text-[15px] text-primary outline-none transition focus:border-primary'
                        }
                    }) }}
                    <span class="pointer-events-none absolute inset-y-0 right-3 flex items-center text-secondary">
                        <span aria-hidden="true" class="material-symbols-outlined text-[18px] leading-none">star</span>
                    </span>
                </div>
                <div class="text-sm text-red-600">{{ form_errors(form.rating) }}</div>
            </div>

            <div class="grid gap-2">
                {{ form_label(form.comment, null, {
                    label_attr: {
                        class: 'font-label text-[10px] font-semibold uppercase tracking-[0.18em] text-primary/70'
                    }
                }) }}
                {{ form_widget(form.comment, {
                    attr: {
                        class: 'min-h-44 w-full resize-y rounded-none border border-primary/12 bg-white px-4 py-3 text-[15px] leading-7 text-primary placeholder:text-primary/35 outline-none transition focus:border-primary'
                    }
                }) }}
                <div class="text-sm text-red-600">{{ form_errors(form.comment) }}</div>
            </div>

            <button
                class="inline-flex min-h-[48px] w-full cursor-pointer 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 disabled:cursor-not-allowed disabled:bg-primary/30 sm:w-auto"
                type="submit"
                data-loading="addAttribute(disabled)"
            >
                {{ 'marketing.review.form.submit'|trans }}
            </button>

            <div class="hidden">{{ form_rest(form) }}</div>
        {{ form_end(form) }}
    {% else %}
        <div data-review-status class="border border-primary/10 bg-white/70 p-6 text-center" role="status">
            <h2 class="font-display text-[28px] leading-tight font-semibold [font-optical-sizing:auto] text-primary">
                {{ 'marketing.review.form.complete_title'|trans }}
            </h2>
            <p class="mt-3 text-[15px] leading-7 text-primary/70">
                {{ 'marketing.review.form.complete_text'|trans }}
            </p>
        </div>
    {% endif %}
</div>
