<div
    class="modal-overlay"
    x-show="reviewModalOpen"
    x-effect="reviewModalOpen && $nextTick(() => window.refreshIcons($el))"
    x-cloak
    x-transition.opacity.duration.300ms
    @keydown.escape.window="reviewModalOpen = false"
    @focus="window.refreshIcons($el)"
>
    <div @click.outside="reviewModalOpen = false" class="modal-window">

        <div class="modal-header">
            <span class="modal-title">Write a review</span>
            <button @click="reviewModalOpen = false" class="modal-close">
                <i data-lucide="x" size="18"></i>
            </button>
        </div>

        <form method="POST" action="{{ route('reviews.store', $entry) }}" class="modal-content">
            @csrf

            <div class="form-group" x-data="{ rating: {{ old('rating', 0) }} }">
                <label class="form-label">Your rating</label>
                <div class="star-input">
                    <template x-for="i in 5" :key="i">
                        <span
                            @click="rating = i"
                            :class="i <= rating ? 'star-filled' : 'star-empty'"
                            class="star-input-icon"
                        >
                            <i data-lucide="star" size="22"></i>
                        </span>
                    </template>
                    <input type="hidden" name="rating" :value="rating">
                </div>
                @error('rating')
                    <span class="form-error">{{ $message }}</span>
                @enderror
            </div>

            <div class="form-group">
                <label class="form-label" for="review-title">Title</label>
                <input
                    type="text"
                    id="review-title"
                    name="title"
                    class="form-input"
                    maxlength="100"
                    value="{{ old('title') }}"
                >
                @error('title')
                    <span class="form-error">{{ $message }}</span>
                @enderror
            </div>

            <div class="form-group">
                <label class="form-label" for="review-description">Review</label>
                <x-markdown-textarea name="description" value="{{ old('description', '') }}" />
                @error('description')
                    <span class="form-error">{{ $message }}</span>
                @enderror
            </div>

            <button type="submit" class="btn primary" style="width: 100%; justify-content: center;">
                <i data-lucide="send" size="14"></i> Post review
            </button>

        </form>
    </div>
</div>
