<div>
    <div class="position-relative">
        @if ($id && $name)
            <div class="position-relative">
                <div class="d-flex flex-wrap align-items-center text-muted gap-2">
                    <a
                        class="w-100 d-flex flex-row align-items-center justify-content-between gap-2 badge bg-secondary-subtle text-secondary-emphasis border border-secondary-subtle rounded text-decoration-none py-2 px-2">
                        <div class="d-flex align-items-center gap-3">
                            <div class="d-grid align-items-center">
                                <span class="fw-bold fs-6 text-ellipsis">
                                    {{ $name }}
                                </span>
                            </div>
                        </div>
                        <button wire:click="unsetUser" class="btn-close" type="button"></button>
                        <input type="text" name="user_id" class="d-none form-control" aria-label="User name"
                            value="{{ $id }}">
                    </a>
                </div>
            </div>
        @else
            <div class="position-relative">
                <div class="position-absolute top-20" style="left: 10px;top:20%">
                    <i class="bi bi-search"></i>
                </div>
                <input type="text" wire:model.live="query" class="form-control py-2"
                    placeholder="Поиск пользователя..." autocomplete="false"
                    style="padding-right: 40px; padding-left: 35px;">
                @if ($query)
                    <div class="position-absolute" style="right: 10px;top:20%">
                        <button wire:click="clearSearch" class="btn-close" type="button"></button>
                    </div>
                @endif
            </div>
            @if ($query && count($users) == 0)
                <div class="position-absolute w-100 z-3">
                    <div class="border rounded shadow bg-light-subtle" style="width: inherit;">
                        <div class="d-grid justify-content-center align-item-center p-3">
                            <i class="bi bi-person fs-2 text-center"></i>
                            <p class="mb-0 fs-6 fw-semibold">Пользователь не найден</p>
                        </div>
                    </div>
                </div>
            @endif
            @if ($query && count($users) > 0)
                <div wire:replace class="position-absolute w-100 z-3">
                    <div class="border rounded shadow bg-light-subtle" style="width: inherit;">
                        <ul class="list-unstyled mb-0 px-2 py-2 overflow-y-auto box-custom-dropdown-user-selector"
                            style="">
                            @foreach ($users as $user)
                                <li>
                                    <a type="button"
                                        class="dropdown-item d-flex align-items-center gap-2 py-2 px-2 bg-secondary-soft-hover rounded-2 user-item"
                                        wire:click="setUser({{ $user['id'] }})">
                                        <span class="text-wrap fw-semibold">
                                            {{ $user['name'] }}
                                        </span>
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            @endif
        @endif
    </div>
</div>
