<div class="container" style="display: flex; flex-direction: column; height: 100%;">
    <ion-header class="search-header">
        <ion-input
            placeholder="Start typing to search..."
            autofocus
            #ionInput
            class="search-input"
            (ionChange)="onSearchChange($event)"
        ></ion-input>
    </ion-header>
    <div class="search-results" style="height: 100%; overflow-y: scroll;">
        <ion-list *ngIf="!loading">
            <ion-item
                *ngFor="let result of (results | async)"
                button
                [title]="'Open '+result.type"
                (click)="openResult(result)"
            >
                <ion-label class="search-label" [ngClass]="result.type">
                    <i class="search-icon" [ngClass]="typeIcons[result.type]"></i>
                    <div class="search-title">{{ result.short_title }}</div>
                </ion-label>
                <div
                    class="search-assoc"
                    [ngClass]="result.associated.type"
                    *ngIf="result.associated"
                    [title]="result.associated.title"
                    (click)="openRelated($event, result)"
                >
                    <i class="assoc-icon" [ngClass]="typeIcons[result.associated.type]"></i>
                    <div class="assoc-title">{{ result.associated.title.slice(0, 30) + (result.associated.title.length > 30 ? '...' : '') }}</div>
                </div>
            </ion-item>
        </ion-list>
        <div class="loading-container" style="margin-top: 40px; text-align: center" *ngIf="loading">
            <i class="fa fa-spinner fa-spin" style="color: #cccccc; font-size: 56pt;"></i>
        </div>
    </div>
</div>