@props(['context' => null])

<div class="rounded-lg border border-line bg-surface p-4">
    @if (session('report_sent'))
        <p class="text-sm font-medium text-emerald-800">{{ session('report_sent') }}</p>
    @else
        <details {{ $errors->hasAny(['message', 'email', 'url']) ? 'open' : '' }}>
            <summary class="cursor-pointer text-sm font-semibold text-title-2 hover:text-rep-blue">
                Signaler une erreur sur cette page
            </summary>
            <form method="POST" action="{{ route('signalement.store') }}" class="mt-3 space-y-3">
                @csrf
                <input type="hidden" name="url" value="{{ url()->current() }}">
                <input type="hidden" name="context" value="{{ $context }}">
                {{-- Honeypot invisible --}}
                <div class="hidden" aria-hidden="true">
                    <label>Ne pas remplir <input type="text" name="website" tabindex="-1" autocomplete="off"></label>
                </div>
                <div>
                    <label for="report-message" class="block text-xs font-semibold text-muted">Quelle erreur avez-vous constatée&nbsp;?</label>
                    <textarea name="message" id="report-message" rows="3" required minlength="10" maxlength="2000"
                              placeholder="Ex. : le délai indiqué ne correspond pas au texte cité."
                              class="mt-1 w-full rounded-md border border-line px-3 py-2 text-sm focus:border-rep-blue">{{ old('message') }}</textarea>
                    @error('message')<p class="mt-1 text-xs text-rep-red">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label for="report-email" class="block text-xs font-semibold text-muted">E-mail <span class="font-normal">(optionnel, pour vous répondre)</span></label>
                    <input type="email" name="email" id="report-email" value="{{ old('email') }}" maxlength="200"
                           class="mt-1 w-full rounded-md border border-line px-3 py-2 text-sm focus:border-rep-blue">
                    @error('email')<p class="mt-1 text-xs text-rep-red">{{ $message }}</p>@enderror
                </div>
                <button type="submit" class="rounded-md bg-primary px-4 py-2 text-sm font-semibold text-white hover:opacity-90">Envoyer le signalement</button>
                <p class="text-xs text-muted">Chaque signalement est examiné par l'équipe éditoriale avant toute correction.</p>
            </form>
        </details>
    @endif
</div>