<div>
    <div class="form-group grid-c2" x-ref="authorsSelector">
        <div>
            @if( $newAuthor === false)
                <div class="game-selector">
                    <div class="game-selector-level2">
                        <x-form-field-title name="Authors" helper="Person or Group who created this, if it's you add/select yourself." required="true" />
                        <input id="author-search" class="form-input" type="text" wire:model.live.debounce="search" placeholder="Search an author..." autocomplete="off"
                               @focus="$wire.dropdown = $wire.search.length >= 2" @click.outside="$wire.dropdown = false" >
                    </div>
                    @if( $dropdown )
                        <ul class="game-selector-dropdown">
                            @forelse($authors as $author)
                                <li>
                                    <button type="button" wire:click="selectAuthor({{ $author->id }}, '{{ addslashes($author->name) }}')"
                                            class="dropdown-item">
                                        <span class="dropdown-item-name">{{ $author->name }}</span>
                                    </button>
                                </li>
                            @empty
                                <li class="dropdown-empty">No author found</li>
                            @endforelse
                        </ul>
                    @endif
                </div>
            @else
                <div class="new-author">
                    <x-form-field-title name="New author" required="true" />
                    <input class="form-input" wire:model="newAuthorName" type="text" autocomplete="off" value="" required>
                </div>
            @endif
            <div style="display:flex;align-items: flex-end;justify-content: right;gap:15px;margin-top:20px;">
                @if($newAuthor)
                    <button type="button" class="btn primary" wire:click="addNewAuthor" :disabled="$wire.newAuthorName.trim() === ''">
                        Add
                    </button>
                @endif
                <button type="button" class="btn {{ $newAuthor ? '' : 'primary' }}" wire:click="switchNewAuthor">{{ $newAuthor ? "Cancel" : "Add an author" }}</button>
            </div>
        </div>
        <div>
            <x-form-field-title name="Selected authors" />
            <div class="form-group level authors-list">
                @foreach($selectedAuthors as $i => $author)
                    <div class="author-item">
                        <span>{{ $author['name'] }}</span>
                        <button type="button" class="btn author-item-remove" wire:click="removeAuthor({{ $i }})">
                            X
                        </button>
                    </div>
                    @if( $author['id'] )
                        <input type="hidden" name="authors[]" value="{{ $author['id'] }}">
                    @else
                        <input type="hidden" name="new-authors[]" value="{{ $author['name'] }}">
                    @endif
                @endforeach
            </div>
        </div>
    </div>
</div>
