<!-- Start of action bar section -->

<div class="global-action-bar row pb-2 pt-2 mr-0" *ngIf="(vm$ | async) as vm">
    <div class="col-6">
        <form name="global-search" class="global-search">
            <div class="input-group">
                <input [(ngModel)]="searchTerm"
                       type="text"
                       name="global-search-term"
                       class="form-control global-search-term"
                       placeholder="{{vm.appStrings['LBL_SEARCH'] || ''}}..."
                       aria-label="Search"
                       required>
                <div class="input-group-append">
                    <button class="btn btn-default search-button"
                            aria-label="Search"
                            scrm-button-loading
                            (click)="search()">
                        <scrm-image class="search-icon sicon" image="search"></scrm-image>
                    </button>
                </div>
            </div>
        </form>
    </div>
    <div class="col justify-content-right">
        <div class="action-group">
            <div class="action-alert dropdown">
                <button class="alerts-button dropdown-toggle" type="button" aria-label="Toggle Alerts">
                    <scrm-image class="action-btn-icon" image="alert"></scrm-image>
                </button>
                <div class="dropdown-menu dropdown-menu-right">
                    <li class="alert-list-item">
                        <h4>ASSIGNED TASK</h4>
                        <a href="#">
                            <scrm-image class="action-btn-icon" image="alert">
                            </scrm-image>
                            Create Wireframe
                        </a>
                    </li>
                    <li class="alert-list-item">
                        <h4>DUE DATE EXPIRED</h4>
                        <a href="#">
                            <scrm-image class="action-btn-icon" image="alert">
                            </scrm-image>
                            Call John Doe to discuss...
                        </a>
                    </li>
                    <li class="alert-list-item">
                        <h4>ASSIGNED LEAD</h4>
                        <a href="#">
                            <scrm-image class="action-btn-icon" image="alert">
                            </scrm-image>
                            John Doe
                        </a>
                    </li>
                    <li class="alert-list-item">
                        <h4>NEW CASE</h4>
                        <a href="#">
                            <scrm-image class="action-btn-icon" image="alert">
                            </scrm-image>
                            Johnston &amp; Co
                        </a>
                    </li>
                    <li>
                        <a class="action-view-all" href="#">
                            View All >
                        </a>
                    </li>
                </div>
            </div>
            <div class="action-favourite dropdown">
                <button class="favourites-button dropdown-toggle" type="button" aria-label="Toggle Favourites">
                    <scrm-image class="action-btn-icon" image="star"></scrm-image>
                </button>
                <div class="dropdown-menu dropdown-menu-right">
                    <li class="favourite-list-item">
                        <h4>JOHN DOE</h4>
                        <a href="#">
                            <scrm-image class="action-btn-icon" image="star">
                            </scrm-image>
                            This is a favourited record
                        </a>
                    </li>
                    <li class="favourite-list-item">
                        <h4>JOHNSTON & CO</h4>
                        <a href="#">
                            <scrm-image class="action-btn-icon" image="star">
                            </scrm-image>
                            This is a favourited record
                        </a>
                    </li>
                    <li class="favourite-list-item">
                        <h4>CREATE WIREFRAME</h4>
                        <a href="#">
                            <scrm-image class="action-btn-icon" image="star">
                            </scrm-image>
                            This is a favourited record
                        </a>
                    </li>
                    <li>
                        <a class="action-view-all" href="#">
                            View All >
                        </a>
                    </li>
                </div>
            </div>
            <div class="action-new dropdown">
                <button class="quickcreate-button dropdown-toggle" type="button" aria-label="Quick Create">
                    {{vm.appStrings['LBL_NEW'] || ''}}
                </button>
                <ul class="dropdown-menu dropdown-menu-right">
                    <li class="new-list-item" *ngFor="let createLink of actionBar.createLinks">
                        <a [routerLink]="createLink.route">
                            <scrm-image class="action-btn-icon" image="plus"></scrm-image>
                            {{vm.appListStrings.moduleList && vm.appListStrings.moduleList[createLink.label]}}
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- End of action bar section -->