<div class="author-search" x-data>
    <div class="author-search-input">
        <i data-lucide="search" size="14"></i>
        <input type="text" class="form-input" wire:model.live.debounce.300ms="search" autocomplete="off">
        @if($selected)
            <span class="author-search-selected">
                <i data-lucide="check" size="13"></i>
                {{ $selectedUsername }}
            </span>
            <button type="button" class="btn" wire:click="$set('selected', null); $set('search', '')">
                Remove
            </button>
        @endif
        @if($selected)
            <input type="hidden" name="owner_user_id" value="{{ $selected }}">
        @endif
        @if(count($this->results) > 0)
            <div class="author-search-dropdown">
                @foreach($this->results as $user)
                    <button
                        type="button"
                        class="author-search-item"
                        wire:click="selectUser({{ $user->user_id }}, '{{ addslashes($user->username) }}')"
                    >
                        {{ $user->username }}
                    </button>
                @endforeach
            </div>
        @endif
    </div>
</div>
