<div class="form-group">
    <div class="game-selector">
        <div class="game-selector-level2">
            <x-form-field-title name="Related Entry" required="" />
            <input id="entry-search" class="form-input" type="text" wire:model.live.debounce="search" placeholder="Search an entry..." autocomplete="off"
                @focus="$wire.dropdown = $wire.search.length > 2" @click.outside="$wire.dropdown = false"
            >

            <input type="hidden" name="entry_id" value="{{ $selectedEntryId ?? '' }}" />

        </div>
        @if( $dropdown )
            <ul class="game-selector-dropdown">
                @forelse( $entries as $entry )
                    <li>
                        <button type="button"
                                wire:click="selectEntry({{ $entry->id }})" class="dropdown-item" {{ $selectedEntryId === $entry->id ? 'selected' : '' }}>
                            <span class="dropdown-item-name">
                                {{ $entry->complete_title ?? $entry->title }}
                            </span>
                            <span class="badge {{ $entry->type }}">
                                {{ \App\View\Components\EntryCard::ENTRY_TYPES_BADGE[$entry->type] ?? $entry->type }}
                            </span>
                        </button>
                    </li>
                @empty
                    <li class="dropdown-empty">No entry found</li>
                @endforelse
            </ul>
        @endif
    </div>

    <div style="display:flex;align-items: flex-end;justify-content: right;gap:15px;margin-top: 15px;">
        @if($selectedEntryId)
            <button type="button" class="btn" wire:click="clearEntry">
                Remove
            </button>
        @endif
    </div>

</div>
