<! --
/**
* SuiteCRM is a customer relationship management program developed by SalesAgility Ltd.
* Copyright (C) 2023 SalesAgility Ltd.
*
* This program is free software; you can redistribute it and/or modify it under
* the terms of the GNU Affero General Public License version 3 as published by the
* Free Software Foundation with the addition of the following permission added
* to Section 15 as permitted in Section 7(a): FOR ANY PART OF THE COVERED WORK
* IN WHICH THE COPYRIGHT IS OWNED BY SALESAGILITY, SALESAGILITY DISCLAIMS THE
* WARRANTY OF NON INFRINGEMENT OF THIRD PARTY RIGHTS.
*
* This program is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
* FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
* details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program.  If not, see http://www.gnu.org/licenses.
*
* In accordance with Section 7(b) of the GNU Affero General Public License
* version 3, these Appropriate Legal Notices must retain the display of the
* "Supercharged by SuiteCRM" logo. If the display of the logos is not reasonably
* feasible for technical reasons, the Appropriate Legal Notices must display
* the words "Supercharged by SuiteCRM".
*/
-->

<ng-container *ngIf="(vm$ | async) as vm">
    <form name="search-bar" class="search-bar" [ngClass]="klass" [formGroup]="searchForm">
        <div class="input-group dropdown" [ngClass]="{'search-focused': isFocused}">
            <input
                formControlName="searchTerm"
                type="text"
                name="search-bar-term"
                class="form-control dropdown-toggle search-bar-term"
                placeholder="{{vm.appStrings[labelKey] || ''}}..."
                aria-label="Search"
                (focus)="onFocus()"
                (blur)="onBlur()"
                (keydown.enter)="searchTrigger === 'enter' ? searchWithEnter() : null"
                (input)="searchTrigger === 'input' ? searchWithInput(searchInput.value) : null"
                data-toggle="dropdown"
                autocomplete="off"
                #searchInput
                required>
            <ul class="dropdown-menu global-search-dropdown" *ngIf="searchWord.length && hasSearchTyped && (searchTrigger === 'enter')">
                <li class="dropdown-item-block" [ngClass]="{'dropdown-active': searchWord}">
                    <a class="dropdown-item" (click)="searchWithEnter()">
                        <scrm-image class="search-icon sicon" image="search"></scrm-image>
                        <span class="dropdown-text ml-2">"<strong>{{searchWord}}</strong>" {{vm.appStrings['LBL_IN_EVERYWHERE'] | lowercase}}</span>
                    </a>
                </li>
            </ul>

            <div class="input-group-append">
                <button *ngIf="!hasSearchTyped" class="btn btn-default search-button d-flex align-items-center"
                        aria-label="Search"
                        scrm-button-loading
                        (click)="searchWithEnter()">
                    <scrm-image class="search-icon sicon" image="search"></scrm-image>
                </button>

                <button *ngIf="hasSearchTyped" class="btn btn-default search-button d-flex align-items-center"
                        aria-label="Close Search"
                        scrm-button-loading
                        (click)="clearSearchTerm()">
                    <scrm-image class="search-icon sicon" image="cross"></scrm-image>
                </button>

            </div>
        </div>
    </form>
</ng-container>

