@props([
    'type',      // listing | seller | review
    'id',
    'label' => null,
])

{{--
    Reporting.

    Open to people who are not signed in — somebody who spots a scam should be
    able to say so without first making an account. The dialog is inline rather
    than a separate page so that reporting takes one click from the thing being
    reported.
--}}
<div x-data="{ open: false }" {{ $attributes->only('class') }}>
    <button type="button" @click="open = true"
            class="inline-flex items-center gap-1.5 text-xs text-text-muted underline-offset-4 transition hover:text-error hover:underline">
        <x-icon name="alert" class="size-3.5" />
        {{ $label ?? __('Report this') }}
    </button>

    <div x-show="open" x-cloak x-trap.noscroll="open" @keydown.escape.window="open = false"
         class="fixed inset-0 z-50 flex items-center justify-center p-4"
         role="dialog" aria-modal="true" aria-labelledby="report-title-{{ $type }}-{{ $id }}">

        <div class="absolute inset-0 bg-dark/60" @click="open = false" aria-hidden="true"></div>

        <div class="relative w-full max-w-md rounded-2xl border border-border bg-surface p-6 shadow-raised">
            <h2 id="report-title-{{ $type }}-{{ $id }}" class="font-display text-title font-bold text-text">
                {{ __('Report this') }}
            </h2>

            <p class="mt-1.5 text-sm text-text-secondary">
                {{ __('Tell us what is wrong. We do not tell them who reported it.') }}
            </p>

            <form action="{{ route('report.store', ['type' => $type, 'id' => $id]) }}" method="POST"
                  class="mt-5 space-y-4">
                @csrf
                @include('public.partials.honeypot')

                <x-form.select name="reason" :label="__('What is wrong?')"
                               :options="\App\Enums\ReportReason::options()" required
                               :placeholder="__('— Choose one —')" />

                <x-form.textarea name="detail" :label="__('Anything else')" rows="3" />

                <div class="flex flex-wrap justify-end gap-3">
                    <button type="button" @click="open = false" class="btn-ghost btn-sm">{{ __('Cancel') }}</button>
                    <button type="submit" class="btn-primary btn-sm">{{ __('Send report') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>