{{-- Modal: wybór użytkowników do rozmowy / grupy --}}
<div class="modal fade" id="conversationUserPickerModal" tabindex="-1" aria-labelledby="conversationUserPickerLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="conversationUserPickerLabel">
                    Wybierz uczestników rozmowy
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"
                        aria-label="Close"></button>
            </div>
            <div class="modal-body d-flex flex-column">

                {{-- tryb: direct / group (ukryte) --}}
                <input type="hidden" id="conv-mode" value="direct">

                {{-- nazwa grupy (pokazywana tylko w trybie group) --}}
                <div class="mb-3" id="group-name-wrapper" style="display: none;">
                    <label class="form-label small text-muted">
                        Nazwa grupy
                    </label>
                    <input type="text" class="form-control form-control-sm" id="group-name-input"
                           placeholder="Np. Dział księgowości">
                </div>

                {{-- Wyszukiwarka użytkowników --}}
                <div class="mb-3">
                    <label class="form-label small text-muted">
                        Wyszukaj użytkowników
                    </label>
                    <div class="input-group input-group-sm">
                        <span class="input-group-text bg-body">
                            <i class="bi bi-search"></i>
                        </span>
                        <input type="text"
                               class="form-control"
                               id="user-search-input"
                               placeholder="Wpisz część imienia, nazwiska lub e-mail...">
                    </div>
                </div>

                {{-- Lista wyników --}}
                <div class="flex-grow-1 border rounded small overflow-auto" style="max-height: 320px;">
                    <table class="table table-sm mb-0 align-middle">
                        <tbody id="user-search-results">
                        {{-- wypełniane przez JS --}}
                        </tbody>
                    </table>
                </div>

                {{-- Wybrane osoby --}}
                <div class="mt-3">
                    <span class="small text-muted d-block mb-1">Wybrani użytkownicy:</span>
                    <div id="selected-users-badges" class="d-flex flex-wrap gap-1 small">
                        {{-- badge z wybranymi userami --}}
                    </div>
                </div>

            </div>
            <div class="modal-footer justify-content-between">
                <div class="small text-muted" id="picker-helper-text">
                    Wybierz jednego użytkownika, aby rozpocząć rozmowę 1:1.
                </div>

                <div>
                    <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">
                        Anuluj
                    </button>
                    <button type="button" class="btn btn-primary btn-sm" id="btn-create-conversation">
                        Utwórz rozmowę
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>