{{-- Форма «знайти користувача за повним email і виконати дію». Атрибути data-* потрапляють на select --}}
@props([
    'action',
    'searchUrl',
    'label',
    'submitLabel',
    'placeholder',
    'chooseLabel',
    'selectLabel',
    'searching',
    'notFound',
    'failed' => 'Не вдалося виконати пошук.',
])

<form method="POST" action="{{ $action }}" class="flex flex-wrap items-end gap-3"
    x-data="emailLookup(@js(['searchUrl' => $searchUrl, 'messages' => ['searching' => $searching, 'notFound' => $notFound, 'failed' => $failed]]))"
    x-on:submit="guard($event)">
    @csrf
    <input type="hidden" name="email" x-bind:value="query.trim()">
    <div class="relative min-w-64 flex-1">
        <flux:input name="email-search" type="email" :label="$label" autocomplete="off" required
            x-model="query" x-on:input="lookup($event.target)" />
        <flux:select name="user_id" {{ $attributes->whereStartsWith('data-') }} :aria-label="$selectLabel" class="mt-2" required
            x-model="selected" x-bind:disabled="results.length === 0">
            <option value="" x-text="results.length ? @js($chooseLabel) : @js($placeholder)">{{ $placeholder }}</option>
            <template x-for="result in results" :key="result.id">
                <option :value="String(result.id)" x-text="`${result.email} — ${result.name}`"></option>
            </template>
        </flux:select>
        <flux:text class="mt-1" aria-live="polite" x-show="status" x-text="status" x-cloak></flux:text>
        <flux:error name="email"/>
    </div>
    <flux:button type="submit" variant="primary" :loading="false" x-bind:disabled="!selected">{{ $submitLabel }}</flux:button>
</form>