{% extends 'base.html.twig' %}
{% form_theme form with app_form_themes() only %}

{% block title %}{{ 'marketing.review_report.form.page_title'|trans }}{% endblock %}

{% block meta %}
    <meta name="robots" content="noindex,nofollow">
{% endblock %}

{% block main %}
    <section class="relative min-h-screen overflow-hidden bg-background pt-32 pb-16 md:pt-36 md:pb-20">
        <div class="absolute inset-x-0 top-0 h-28 bg-primary md:h-32"></div>
        <div class="pointer-events-none absolute inset-x-0 top-0 h-[30rem] bg-[radial-gradient(circle_at_top,rgba(173,156,118,0.12),transparent_64%)]"></div>

        <div class="relative z-10 mx-auto max-w-[1440px] px-4 md:px-16">
            <header class="mx-auto max-w-3xl text-center">
                <span class="font-label text-[11px] font-semibold uppercase tracking-[0.22em] text-secondary">
                    {{ 'marketing.review.public.title'|trans }}
                </span>
                <h1 class="mt-4 font-display text-[34px] leading-[1.02] font-semibold [font-optical-sizing:auto] text-primary md:text-[48px]">
                    {{ 'marketing.review_report.form.heading'|trans }}
                </h1>
                <p class="mx-auto mt-4 max-w-2xl text-[15px] leading-7 text-primary/72">
                    {{ 'marketing.review_report.form.intro'|trans }}
                </p>
            </header>

            <div class="mx-auto mt-10 max-w-3xl border border-primary/10 bg-surface-container-low p-5 shadow-[0_20px_60px_rgba(51,38,28,0.06)] md:p-7">
                <div class="border border-primary/8 bg-white/70 p-5 md:p-7">
                    {% for message in app.flashes('review-report-success') %}
                        <div class="mb-7 border border-emerald-200 bg-emerald-50 px-5 py-4 text-[15px] leading-7 text-emerald-800" role="status">
                            {{ message }}
                        </div>
                    {% endfor %}

                    <article class="mb-8 border border-primary/10 bg-background/70 p-5">
                        <p class="font-label text-[11px] font-semibold uppercase tracking-[0.16em] text-secondary">
                            {{ review.product.fullName }} — {{ review.rating }}/5
                        </p>
                        {% if review.title %}
                            <h2 class="mt-3 font-display text-[24px] leading-tight font-semibold [font-optical-sizing:auto] text-primary">
                                {{ review.title }}
                            </h2>
                        {% endif %}
                        <p class="mt-3 whitespace-pre-line text-[15px] leading-7 text-primary/75">{{ review.comment }}</p>
                    </article>

                    {% if already_reported %}
                        <p class="border border-primary/10 bg-background/70 p-5 text-[15px] leading-7 text-primary/72" role="status">
                            {{ 'marketing.review_report.form.already_saved'|trans }}
                        </p>
                    {% else %}
                        {{ form_start(form, {attr: {class: 'grid gap-6'}}) }}
                            <div class="grid gap-2">
                                {{ form_label(form.reason, null, {
                                    label_attr: {
                                        class: 'font-label text-[10px] font-semibold uppercase tracking-[0.18em] text-primary/70'
                                    }
                                }) }}
                                <div class="relative">
                                    {{ form_widget(form.reason, {
                                        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.reason) }}</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-36 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'
                                    }
                                }) }}
                                {% if form.comment.vars.help %}
                                    <p class="text-[13px] leading-6 text-primary/55">
                                        {{ form.comment.vars.help|trans({}, form.comment.vars.translation_domain) }}
                                    </p>
                                {% endif %}
                                <div class="text-sm text-red-600">{{ form_errors(form.comment) }}</div>
                            </div>

                            {{ form_row(form.captcha) }}

                            <div class="flex flex-wrap items-center gap-4">
                                <button
                                    class="inline-flex min-h-[48px] 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"
                                    type="submit"
                                >
                                    {{ 'marketing.review_report.form.submit'|trans }}
                                </button>
                                {% if review.product.category %}
                                    <a
                                        class="inline-flex min-h-[48px] items-center justify-center border border-primary px-6 py-3 font-label text-[11px] font-semibold uppercase tracking-[0.18em] text-primary transition hover:border-secondary hover:text-secondary"
                                        href="{{ path('shop_product', {
                                            categorySlug: review.product.category.slug,
                                            slug: review.product.slug
                                        }) }}"
                                    >
                                        {{ 'marketing.review_report.form.cancel'|trans }}
                                    </a>
                                {% endif %}
                            </div>
                        {{ form_end(form) }}
                    {% endif %}
                </div>
            </div>
        </div>
    </section>
{% endblock %}
