<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="mail.SearchMessageInput">
        <div class="o-mail-SearchMessageInput d-flex py-2">
            <div class="input-group">
                <div class="o_searchview form-control d-flex align-items-center bg-view p-0" role="search" aria-autocomplete="list">
                    <div class="o_searchview_input_container d-flex flex-grow-1 flex-wrap gap-1 h-100">
                        <input type="text" class="o_searchview_input flex-grow-1 w-auto border-0 rounded-start px-2 bg-view" accesskey="Q" placeholder="Search" t-model="state.searchTerm" t-on-keydown="onKeydownSearch" t-ref="autofocus" role="searchbox"/>
                    </div>
                </div>
                <button class="btn" t-att-class="state.searchedTerm === state.searchTerm ? 'btn-outline-secondary' : 'btn-secondary'" t-on-click="() => this.search()" aria-label="Search button">
                    <i t-if="!props.messageSearch.searching" class="o_searchview_icon oi oi-search" role="img" aria-label="Search Messages" title="Search Messages"/>
                    <i t-else="" class="fa fa-circle-o-notch fa-spin" aria-label="Search in progress" title="Search in progress"/>
                </button>
            </div>
            <Dropdown t-if="env.inChatter">
                <button class="btn btn-outline-secondary ms-3" aria-label="Filter Messages" title="Filter Messages">
                    <i class="fa fa-filter" role="img"/>
                </button>
                <t t-set-slot="content">
                    <t t-foreach="searchFilters" t-as="searchFilter" t-key="searchFilter.label">
                        <DropdownItem onSelected="() => this.onChangeSearchFilter(searchFilter)">
                            <input type="radio" class="form-check-input ms-0 me-2" t-att-checked="searchFilter.is_notification === this.props.messageSearch.is_notification" value="searchFilter.label"/>
                            <t t-esc="searchFilter.name"/>
                        </DropdownItem>
                    </t>
                </t>
            </Dropdown>
            <button t-if="env.inChatter" class="btn btn-outline-secondary ms-3" t-on-click="() => this.clear()" aria-label="Close button">
                <i class="o_searchview_icon oi oi-close cursor-pointer" role="img" aria-label="Close search" title="Close"/>
            </button>
        </div>
    </t>
</templates>
