@props(['target', 'thread' => null])

<div x-data="{ open: {{ ($errors->has('body') || $errors->has('rating')) ? 'true' : 'false' }}, rating: {{ (int) old('rating', 5) }} }" @open-review.window="open = true">
    <div x-show="open" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4" @keydown.escape.window="open=false">
        <div class="card w-full max-w-md p-5" @click.outside="open=false">
            <h3 class="mb-3 text-lg font-bold">Отзыв о пользователе {{ $target->displayName() }}</h3>
            <form method="POST" action="{{ route('reviews.store') }}" class="space-y-3">
                @csrf
                <input type="hidden" name="target_user_id" value="{{ $target->id }}">
                <input type="hidden" name="rating" :value="rating">

                <div class="flex gap-1 text-3xl">
                    <template x-for="n in 5" :key="n">
                        <button type="button" @click="rating = n"
                                :class="n <= rating ? 'text-amber-400' : 'text-gray-300'">★</button>
                    </template>
                </div>

                <textarea name="body" rows="4" class="input" placeholder="Поделитесь впечатлением (необязательно)">{{ old('body') }}</textarea>

                @error('rating') <p class="text-sm text-red-600">{{ $message }}</p> @enderror
                @error('body') <p class="text-sm text-red-600">{{ $message }}</p> @enderror

                <div class="flex justify-end gap-2">
                    <button type="button" @click="open=false" class="btn-ghost">Отмена</button>
                    <button type="submit" class="btn-brand">Отправить отзыв</button>
                </div>
            </form>
        </div>
    </div>
</div>