<div id="fuse-shortcuts" #shortcuts>

    <div class="shortcuts-mobile-toggle" *ngIf="!mobileShortcutsPanelActive" fxLayout="row" fxLayoutAlign="start center"
         fxHide fxShow.lt-md>
        <button md-icon-button (click)="showMobileShortcutsPanel()">
            <md-icon class="amber-600-fg">star</md-icon>
        </button>
    </div>

    <div class="shortcuts" fxHide fxShow.gt-sm [ngClass]="toolbarColor">

        <div fxLayout="row" fxLayoutAlign="space-between center" fxFlex="0 1 auto">

            <div fxLayout="row" fxLayoutAlign="start center">

                <div class="w-40 h-40 p-4" fxLayout="row" fxLayoutAlign="center center"
                     *ngFor="let shortcutItem of shortcutItems">

                    <a md-icon-button mdTooltip="{{shortcutItem.title}}" [routerLink]="shortcutItem.url">
                        <md-icon *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</md-icon>
                        <span *ngIf="!shortcutItem.icon" class="h2 secondary-text text-bold">
                            {{shortcutItem.title.substr(0, 1).toUpperCase()}}
                        </span>
                    </a>

                </div>

                <button md-icon-button [mdMenuTriggerFor]="addMenu" md-tooltip="Click to add/remove shortcut"
                        (onMenuOpen)="onMenuOpen()">
                    <md-icon class="amber-600-fg">star</md-icon>
                </button>

            </div>

            <div class="shortcuts-mobile-close" fxLayout="row" fxLayoutAlign="start center" fxHide fxShow.lt-md>
                <button md-icon-button (click)="hideMobileShortcutsPanel()">
                    <md-icon>close</md-icon>
                </button>
            </div>

        </div>

        <md-menu #addMenu="mdMenu" class="w-240">

            <md-input-container class="px-16 w-100-p" (click)="$event.stopPropagation()" floatPlaceholder="never">
                <input #searchInput mdInput placeholder="Search for an app or a page" (input)="search($event)">
            </md-input-container>

            <md-divider></md-divider>
            <md-nav-list *ngIf="!searching" style="max-height: 312px; overflow: auto" fusePerfectScrollbar>

                <md-list-item *ngFor="let shortcutItem of shortcutItems"
                              (click)="toggleShortcut($event, shortcutItem)">
                    <div class="w-100-p" fxLayout="row" fxLayoutAlign="start center">
                        <md-icon md-list-icon class="mr-8" *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</md-icon>
                        <span class="h2 w-32 h-32 p-4 mr-8 secondary-text text-bold" fxLayout="row"
                              fxLayoutAlign="center center" *ngIf="!shortcutItem.icon">
                            {{shortcutItem.title.substr(0, 1).toUpperCase()}}
                        </span>
                        <p md-line fxFlex>{{shortcutItem.title}}</p>
                        <md-icon class="ml-8">star</md-icon>
                    </div>
                </md-list-item>
                <md-list-item *ngIf="shortcutItems.length === 0">
                    <p>
                        <small>No shortcuts yet!</small>
                    </p>
                </md-list-item>
            </md-nav-list>

            <md-nav-list *ngIf="searching" style="max-height: 312px; overflow: auto" fusePerfectScrollbar>
                <md-list-item *ngFor="let navigationItem of filteredNavigationItems"
                              (click)="toggleShortcut($event, navigationItem)">
                    <div class="w-100-p" fxLayout="row" fxLayoutAlign="start center">
                        <md-icon md-list-icon class="mr-8" *ngIf="navigationItem.icon">{{navigationItem.icon}}</md-icon>
                        <span class="h2 w-32 h-32 p-4 mr-8 secondary-text text-bold" fxLayout="row"
                              fxLayoutAlign="center center" *ngIf="!navigationItem.icon">
                            {{navigationItem.title.substr(0, 1).toUpperCase()}}
                        </span>
                        <p md-line fxFlex>{{navigationItem.title}}</p>
                        <md-icon class="ml-8" *ngIf="isInShortcuts(navigationItem)">star</md-icon>
                    </div>
                </md-list-item>
            </md-nav-list>
        </md-menu>

    </div>

</div>
