<div class="main-container" *ngIf="attacks">
    <div class="mat-h2 heading" style="display: flex; justify-content: space-between;">
        <div class="text">Záznamy o útocích</div>
        <div class="buttons">
            <button mat-button mat-raised-button color="accent" routerLink="/database/new">Vytvořit záznam</button>
        </div>
    </div>
    <form [formGroup]="controlForm">
        <div class="controls">
            <div>
                <mat-form-field>
                    <mat-label>Řadit dle {{ controlForm.controls['reverse'].value ? '(vzestupně)' : '(sestupně)' }}</mat-label>
                    <mat-select class="sort" formControlName="sortBy" (selectionChange)="onSort($event.value)">
                        <mat-option value="city">Město</mat-option>
                        <mat-option value="country">Stát</mat-option>
                        <mat-option value="date">Datum</mat-option>
                        <mat-option value="time">Čas</mat-option>
                        <mat-option value="epicenter">Epicentrum</mat-option>
                        <mat-option value="modusOperandi">Modus Operandi</mat-option>
                        <mat-option value="terroristOrganization">K útoku se přihlásili</mat-option>
                        <mat-option value="deaths">Počet mrtých</mat-option>
                        <mat-option value="injured">Počet zraněných</mat-option>
                        <mat-option value="potentialVictims">Počet potenciálních obětí</mat-option>
                        <mat-option value="numberOfAttackers">Počet útočníků</mat-option>
                    </mat-select>
                </mat-form-field>
                <button mat-icon-button (click)="reverseSort();" [matTooltip]="'Seřadit ' + (controlForm.controls['reverse'].value ? 'sestupně' : 'vzestupně')" matTooltipPosition="above">
                    <mat-icon>{{ controlForm.controls['reverse'].value ? 'expand_less' : 'expand_more' }}</mat-icon>
                </button>
            </div>
            <div>
                <button mat-icon-button (click)="onExportClick();" class="export-button" matTooltip="Exportovat aktuálně zobrazené útoky" matTooltipPosition="above">
                    <mat-icon color="accent" class="export-icon">get_app</mat-icon>
                </button>
                <mat-form-field class="search">
                    <mat-icon matPrefix class="search-icon" matTooltip="Vyhledávat lze pomocí více kritérií oddělených čárkou. Podporovaná kritéria jsou stát, město, datum, čas, typů měkkého cíle, k útoku se přihlásili a modus operandi." matTooltipPosition="below">search</mat-icon>
                    <input matInput placeholder="Vyhledávání" formControlName="searchBy" (input)="onSearch($event.target.value)" autocomplete="off">
                    <mat-icon *ngIf="controlForm.controls['searchBy'].value" (click)="onClearSearch();" matSuffix class="search-icon close-icon">close</mat-icon>
                </mat-form-field>
            </div>
        </div>
    </form>
    <mat-accordion multi="true">
        <mat-expansion-panel *ngFor="let attack of attacks"> 
            <mat-expansion-panel-header>
            <mat-panel-title>
                {{ attack.city }}, {{ attack.country }}
            </mat-panel-title>
            <mat-panel-description>
                {{ attack.date }}
            </mat-panel-description>
            </mat-expansion-panel-header>
            <ng-template matExpansionPanelContent>
                <div class="detail-group">
                    <div *ngIf="attack.time">
                        <h5>Čas</h5>
                        {{ attack.time }}
                    </div>
                    <div *ngIf="attack.terroristOrganization">
                        <h5>K útoku se přihlásili</h5>
                        {{ attack.terroristOrganization }}
                    </div>
                </div>
                <ng-container *ngIf="attack.softTargetTypes && attack.softTargetTypes.length > 0">
                    <h5>Měkké cíle</h5>
                    <ng-container *ngFor="let softTargetType of attack.softTargetTypes; let isLast = last">{{ softTargetType.softTargetType.label + (isLast ? '' : ', ') }}</ng-container>
                </ng-container>
                <ng-container *ngIf="attack.modusOperandi || attack.modusOperandiDetail">
                    <h5>Modus operandi</h5>
                    {{ attack.modusOperandi.label }}{{ attack.modusOperandi && attack.modusOperandiDetail ? ', ' : '' }}{{ attack.modusOperandiDetail }}
                </ng-container>
                <ng-container *ngIf="attack.attackers && attack.attackers.length > 0">
                    <h5>Útočníci</h5>
                    <ng-container *ngFor="let attacker of attack.attackers; let isLast = last">{{ attacker.name + (isLast ? '' : ', ') }}</ng-container>
                </ng-container>
                <ng-container *ngIf="attack.relatedAttacks && attack.relatedAttacks.length > 0">
                    <h5>Propojené útoky</h5>
                    <ng-container *ngFor="let relatedAttack of attack.relatedAttacks; let isLast = last">{{ attackLabelById(relatedAttack.relatedAttackId) }}<br *ngIf="!isLast"></ng-container>
                </ng-container>
            </ng-template>   
            <mat-action-row>
                <button mat-button mat-stroked-button color="accent" type="button" routerLink="/database/{{attack.id}}">Detail</button>
                <div>
                    <button mat-button mat-stroked-button color="primary" type="button" routerLink="/database/{{attack.id}}/edit">Upravit</button>
                    <button mat-button mat-stroked-button color="warn" type="button" (click)="onDeleteAttack(attack.id);">Smazat</button>
                </div>
            </mat-action-row> 
        </mat-expansion-panel>
    </mat-accordion>
</div>
