<div class="submit-level" x-data="{
    nsfw: null,
    state: '{{ old('submit-state', $defaultState) }}',
    deleteOpen: false,
    featuredOpen: false,
    init(){
        this.$watch('nsfw', (val) => {
            if( val && this.state === 'published' ) {
                this.state = 'draft';
            }
        });
    }
}" x-init="init()">
    @if($isEdit)
        @if(!$news && $entry && !$entry->featured )
            <div>
                <button type="button" id="entry-featured-button" class="btn" @click="featuredOpen = true; $dispatch('modal:opened')">
                    <i data-lucide="star" size="13"></i> Featured
                </button>
            </div>
        @endif
        <div>
            <button type="button" class="btn danger" @click="deleteOpen = true; $dispatch('modal:opened')">
                <i data-lucide="trash-2" size="13"></i> Delete
            </button>
        </div>
    @endif
    <div>
        @if( section_must_be( [ 'romhacks', 'homebrew' ], $section ) && !$isEdit && $VISITOR->nsfw_content === 1 )
            <label class="nsfw-label"><input id="nsfw-checkbox" type="checkbox" name="nsfw-entry" x-model="nsfw" style="transform: scale(1.5)"> NSFW</label>
        @endif
    </div>
    <select class="form-select" name="submit-state" x-model="state">
        @foreach( $states as $k => $v )
            @if( $k == 'published' )
                <template x-if="!nsfw">
                    <option value="{{ $k }}" {{ $defaultState == $k ? 'selected' : '' }}>{{ $v }}</option>
                </template>
            @else
                <option value="{{ $k }}" {{ $defaultState == $k ? 'selected' : '' }}>{{ $v }}</option>
            @endif
        @endforeach
    </select>

    @if($isEdit)
        @if(!$news && $entry && !$entry->featured )
            <template x-teleport="body">
                <div
                    class="modal-overlay"
                    x-cloak
                    x-show="featuredOpen"
                    x-transition.opacity
                    @click.self="featuredOpen = false"
                    @keydown.escape.window="featuredOpen = false"
                    @modal:opened.window="refreshIcons($el)"
                >
                    <div class="modal-window" x-show="featuredOpen" x-transition>
                        <div class="modal-header">
                            <span class="modal-title">Request as featured</span>
                            <button type="button" class="modal-close" @click="featuredOpen = false">
                                <i data-lucide="x" size="20"></i>
                            </button>
                        </div>

                        <div class="modal-body" id="entry-featured-body">
                            <p style="margin-bottom: 1.5rem; color: var(--text, #333);">
                                Please do not overuse this feature. Send only one request at a time.
                            </p>

                            <div class="queue-mod-actions" id="entry-featured-actions">
                                <button type="button" class="btn" @click="featuredOpen = false">
                                    Cancel
                                </button>
                                <button type="button" class="btn" @click="Submission().requestFeatured({{ $entry->id }})">
                                    <i data-lucide="star" size="14"></i>
                                    Request as featured
                                </button>
                            </div>

                        </div>

                    </div>
                </div>
            </template>
        @endif
    <template x-teleport="body">
        <div
            class="modal-overlay"
            x-cloak
            x-show="deleteOpen"
            x-transition.opacity
            @click.self="deleteOpen = false"
            @keydown.escape.window="deleteOpen = false"
            @modal:opened.window="refreshIcons($el)"
        >
            <div class="modal-window" x-show="deleteOpen" x-transition>
                <div class="modal-header">
                    <span class="modal-title">Delete entry</span>
                    <button type="button" class="modal-close" @click="deleteOpen = false">
                        <i data-lucide="x" size="20"></i>
                    </button>
                </div>

                <div class="modal-body">
                    <p style="margin-bottom: 1.5rem; color: var(--text, #333);">
                        Are you sure you want to delete this entry? This action cannot be undone.
                    </p>

                    <form action="{{ $news ? route('news.destroy', [ 'news' => $news ] ) : route('submit.destroy', ['section' => $section, 'entry' => $entry ]) }}" method="POST">
                        @csrf
                        @method('DELETE')

                        <div class="queue-mod-actions">
                            <button type="button" class="btn" @click="deleteOpen = false">
                                Cancel
                            </button>
                            <button type="submit" class="btn danger">
                                <i data-lucide="trash-2" size="14"></i>
                                Confirm deletion
                            </button>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </template>
    @endif
</div>
