<section class="chat-compose-panel" ...attributes>
    <header class="chat-compose-panel-header">
        <div class="chat-compose-panel-title">
            <h2>New Chat</h2>
            <span>Select one or more teammates</span>
        </div>
        <button type="button" class="chat-inbox-icon-button" aria-label="Close new chat" {{on "click" @close}}>
            <FaIcon @icon="times" />
        </button>
    </header>

    <div class="chat-compose-form">
        <label class="chat-compose-label" for="chat-compose-name">Chat name</label>
        <input id="chat-compose-name" type="text" value={{@channelName}} placeholder="Optional" {{on "input" @setChannelName}} />

        {{#if this.hasSelectedUsers}}
            <div class="chat-compose-selected-users">
                {{#each @selectedUsers as |user|}}
                    <span class="chat-compose-selected-user">
                        <Image src={{user.avatar_url}} @fallbackSrc={{config "defaultValues.userImage"}} alt={{user.name}} />
                        <span>{{user.name}}</span>
                        <button type="button" aria-label={{concat "Remove " user.name}} {{on "click" (fn @removeSelectedUser user)}}>
                            <FaIcon @icon="times" />
                        </button>
                    </span>
                {{/each}}
            </div>
        {{/if}}

        <label class="chat-compose-label" for="chat-compose-search">Contacts</label>
        <div class="chat-inbox-search">
            <FaIcon @icon="search" />
            <input id="chat-compose-search" type="search" value={{@searchQuery}} placeholder="Search teammates" {{on "input" @setSearchQuery}} />
        </div>
    </div>

    <div class="chat-compose-contact-list">
        {{#if @isLoading}}
            <div class="chat-inbox-empty-state">
                <Spinner @loadingMessage="Loading contacts" />
            </div>
        {{else if this.hasUsers}}
            {{#each @users as |user|}}
                <ChatTray::ContactRow @user={{user}} @selectedUsers={{@selectedUsers}} @toggle={{@toggleUser}} />
            {{/each}}
        {{else}}
            <div class="chat-inbox-empty-state">
                <div class="chat-inbox-empty-icon">
                    <FaIcon @icon="user-plus" />
                </div>
                <h3>No contacts found</h3>
                <p>Try a different name, email, or phone number.</p>
            </div>
        {{/if}}
    </div>

    <footer class="chat-compose-footer">
        <Button @type="default" @text="Cancel" @size="sm" @onClick={{@close}} />
        <Button @type="primary" @icon="paper-plane" @text="Create Chat" @size="sm" @onClick={{@create}} @disabled={{not @canCreate}} @isLoading={{@isSaving}} />
    </footer>
</section>
