{% import 'components/avatar.html' as avatar with context %}

<div class="modal-card jid-search-dialog">
    <header class="modal-card-head">
        <p class="modal-card-title">Start New Chat</p>
        <button class="delete action_close"></button>
    </header>
    <section class="modal-card-body">

        <div class="tabs is-boxed mt-4">
            <ul>
                <li class="is-active" data-tab="direct">
                    <a>
                        <span class="icon has-text-info">
                            <i class="fa-solid fa-user"></i>
                        </span>
                        <span>Persons</span>
                        <span class="tag is-info is-light ml-2 direct-count">0</span>
                    </a>
                </li>
                <li data-tab="groups">
                    <a>
                        <span class="icon has-text-success">
                            <i class="fa-solid fa-users"></i>
                        </span>
                        <span>Group Chats</span>
                    </a>
                </li>
            </ul>
        </div>

        <!-- Direct Messages Tab -->
        <div class="direct-content pt-4">
            <div class="field">
                <label class="label">Direct contact search.</label>
                <p class="help">Use names, JIDs, or keywords.</p>
                <div class="control has-icons-left has-icons-right">
                    <input class="input search-input" type="search"
                           placeholder="Search contacts…">
                    <span class="icon is-small is-left">
                        <i class="fa-solid fa-magnifying-glass"></i>
                    </span>
                    <span class="icon is-right action_clear_search">
                        <a role="button" class="delete is-small" aria-label="Clear search"></a>
                    </span>
                </div>
            </div>
            <div class="direct-items">
            </div>
        </div>

        <!-- Group Chats Tab -->
        <div class="groups-content is-hidden pt-4">
            <div class="field">
                <label class="label">Room search.</label>
                <p class="help">Use names, JIDs, or keywords.</p>
                <div class="control has-icons-left has-icons-right">
                    <input class="input search-input" type="search"
                           placeholder="Search rooms…">
                    <span class="icon is-small is-left">
                        <i class="fa-solid fa-magnifying-glass"></i>
                    </span>
                    <span class="icon is-right action_clear_search">
                        <a role="button" class="delete is-small" aria-label="Clear search"></a>
                    </span>
                </div>
            </div>
            <div class="is-flex is-justify-content-space-between mb-4">
                <button class="button is-success is-light action_new_room">
                    <span class="icon">
                        <i class="fa-solid fa-plus"></i>
                    </span>
                    <span>Create New Room</span>
                </button>
            </div>

            <!-- New Room Form (initially hidden) -->
            <div class="box is-hidden mb-4 panel_new_room">
                <div class="field">
                    <label class="label">Room Name</label>
                    <div class="control has-icons-left">
                        <input class="input input-room-name" type="text" placeholder="Enter room name">
                        <span class="icon is-small is-left">
                            <i class="fa-solid fa-hashtag"></i>
                        </span>
                    </div>
                </div>
                <div class="field">
                    <label class="label">Room Type</label>
                    <div class="control">
                        <div class="select is-fullwidth">
                            <select>
                                <option>Public Room</option>
                                {#
                                FIXME: only public room is supported for now, need to
                                    check config option to use.
                                <option>Private Room</option>
                                #}
                            </select>
                        </div>
                    </div>
                </div>
                <div class="field is-grouped">
                    <div class="control">
                        <button class="button is-success is-small action_create_room">Create Room</button>
                    </div>
                </div>
                <div class="notification is-danger error-message is-hidden mt-4">
                    <button class="delete action_hide_error_message"></button>
                    <p></p>
                </div>
            </div>

            <!-- Search Result -->
            <div class="groups-items"></div>
        </div>
    </section>
    <footer class="modal-card-foot is-justify-content-flex-end">
        <button class="button action_close">Cancel</button>
        <button class="button is-primary ml-2 action_ok" disabled>Start Chat</button>
    </footer>
</div>