<div class="main-container">
  <form *ngIf="formData && attacks" [formGroup]="attackForm" (ngSubmit)="onAttackFormSubmit()">
    <mat-card class="attack-edit-card">
      <mat-card-header>
        <mat-card-title>
          {{ editMode ? 'Upravit záznam o útoku #'+attackForm.controls['id'].value : 'Nový záznam o útoku' }}
        </mat-card-title>
      </mat-card-header>
      <mat-card-content>
        <div class="form-field-group">
          <mat-form-field>
            <input matInput placeholder="Stát *" formControlName="country" [matAutocomplete]="countriesAutoComplete">
            <mat-error *ngIf="attackForm.controls['country'].hasError('required')">
              Stát je <strong>povinný</strong>
            </mat-error>
            <mat-error *ngIf="attackForm.controls['country'].hasError('maxlength')">
              Stát může mít nanejvýš <strong>50</strong> znaků
            </mat-error>
            <mat-autocomplete #countriesAutoComplete="matAutocomplete">
              <mat-option *ngFor="let country of countries | async" [value]="country">
                {{country}}
              </mat-option>
            </mat-autocomplete>
          </mat-form-field>
          <mat-form-field>
            <input matInput placeholder="Město *" formControlName="city" [matAutocomplete]="citiesAutoComplete">
            <mat-error *ngIf="attackForm.controls['city'].hasError('required')">
              Město je <strong>povinné</strong>
            </mat-error>
            <mat-error *ngIf="attackForm.controls['city'].hasError('maxlength')">
              Město může mít nanejvýš <strong>50</strong> znaků
            </mat-error>
            <mat-autocomplete #citiesAutoComplete="matAutocomplete">
              <mat-option *ngFor="let city of cities | async" [value]="city">
                {{city}}
              </mat-option>
            </mat-autocomplete>
          </mat-form-field>
        </div>
        <div class="form-field-group">
          <mat-form-field>
            <input matInput type="time" placeholder="Čas" formControlName="time" autocomplete="off">
          </mat-form-field>
          <mat-form-field class="mat-form-field-date">          
            <input matInput [matDatepicker]="picker" placeholder="Datum *" formControlName="date" autocomplete="off">
            <mat-error *ngIf="attackForm.controls['date'].errors">
              Datum musí být ve formátu <strong>den.měsíc.rok</strong>
            </mat-error>
            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
            <mat-datepicker #picker></mat-datepicker>
          </mat-form-field>
          <mat-form-field>
            <input matInput type="time" placeholder="Peak" formControlName="peak" autocomplete="off">
          </mat-form-field>
        </div>
        <div class="form-field-group">
          <mat-form-field>
            <input type="number" class="position-input" matInput placeholder="Zeměpisná délka" formControlName="latitude">
            <mat-icon class="warn-icon" matTooltip="Aby bylo možné zobrazit tento útok na mapu, musí být zadána jak zeměpisná délka, tak zeměpisná šířka." matSuffix *ngIf="!attackForm.controls['latitude'].value">error_outline</mat-icon>
            <mat-error *ngIf="attackForm.controls['latitude'].hasError('pattern')">
              Zeměpisná délka může mít nanejvýš <strong>6 desetinných míst</strong>
            </mat-error>
            <mat-error *ngIf="!attackForm.controls['latitude'].hasError('pattern') && (attackForm.controls['latitude'].hasError('min') || attackForm.controls['latitude'].hasError('max'))">
              Zeměpisná délka může nabývat hodnoty <strong>od -90 do 90</strong>
            </mat-error>
          </mat-form-field>
          <mat-form-field>
            <input type="number" class="position-input" matInput placeholder="Zeměpisná šířka" formControlName="longitude">
            <mat-icon class="warn-icon" matTooltip="Aby bylo možné zobrazit tento útok na mapu, musí být zadána jak zeměpisná délka, tak zeměpisná šířka." matSuffix *ngIf="!attackForm.controls['longitude'].value">error_outline</mat-icon>
            <mat-error *ngIf="attackForm.controls['longitude'].hasError('pattern')">
              Zeměpisná šířka může mít nanejvýš <strong>6 desetinných míst</strong>
            </mat-error>
            <mat-error *ngIf="!attackForm.controls['longitude'].hasError('pattern') && (attackForm.controls['longitude'].hasError('min') || attackForm.controls['longitude'].hasError('max'))">
              Zeměpisná šířka může nabývat hodnoty <strong>od -180 do 180</strong>
            </mat-error>
          </mat-form-field>
        </div>
        <mat-form-field>
          <input matInput placeholder="Popis měkkého cíle (funkčnost)" formControlName="softTargetDescription" [matAutocomplete]="stdAutocomplete">
          <mat-error *ngIf="attackForm.controls['softTargetDescription'].hasError('maxlength')">
            Popis měkkého cíle může mít nanejvýš <strong>200</strong> znaků
          </mat-error>
          <mat-autocomplete #stdAutocomplete="matAutocomplete">
            <mat-option *ngFor="let softTargetDescription of softTargetDescriptions | async" [value]="softTargetDescription">
              {{softTargetDescription}}
            </mat-option>
          </mat-autocomplete>
        </mat-form-field>
        <h5>Typy měkkého cíle</h5>
        <mat-list>
          <mat-list-item *ngFor="let softTargetType of attackForm.controls['softTargetTypes'].value">
            <span matLine>{{ getSoftTargetTypeLabelByName(softTargetType.softTargetType) }}</span>
            <span matLine class="note-line" *ngIf="softTargetType.softTargetTypeDetail">{{ softTargetType.softTargetTypeDetail }}</span>
            <button type="button" mat-icon-button color="accent" (click)="onUnlinkSoftTargetType($event, softTargetType.softTargetType);">
              <mat-icon>remove_circle</mat-icon>
            </button>
          </mat-list-item>
          <mat-list-item (click)="onAddSoftTargetType();" class="list-item-add">
            <button type="button" mat-icon-button color="accent">
              <mat-icon>add_circle</mat-icon>
            </button>
            Přidat typ měkkého cíle
          </mat-list-item>
        </mat-list>
        <div class="form-field-group">
          <mat-form-field>
            <mat-select placeholder="Teror" formControlName="terror">
              <mat-option></mat-option>
              <mat-option *ngFor="let closedResponse of formData.closedResponses" [value]="closedResponse.name">
                {{closedResponse.label}}
              </mat-option>
            </mat-select>
          </mat-form-field>
          <mat-form-field>
            <mat-select placeholder="Epicentrum" formControlName="epicenter">
              <mat-option></mat-option>
              <mat-option *ngFor="let epicenter of formData.epicenters" [value]="epicenter.name">
                {{epicenter.label}}
              </mat-option>
            </mat-select>
          </mat-form-field>
          <mat-form-field class="mat-form-field-entrance-security">
            <mat-select placeholder="Ochranka u vstupu" formControlName="entranceSecurity">
              <mat-option></mat-option>
              <mat-option *ngFor="let closedResponse of formData.closedResponses" [value]="closedResponse.name">
                {{closedResponse.label}}
              </mat-option>
            </mat-select>
          </mat-form-field>
        </div>
        <div class="form-field-group">
          <mat-form-field class="mat-form-field-modus-operandi">
            <mat-select placeholder="Modus Operandi" formControlName="modusOperandi">
              <mat-option></mat-option>
              <mat-option *ngFor="let modusOperandi of formData.modusOperandis" [value]="modusOperandi.name">
                {{modusOperandi.label}}
              </mat-option>
            </mat-select>
          </mat-form-field>
          <mat-form-field>
            <input matInput placeholder="Detail Modu Operandi" formControlName="modusOperandiDetail" autocomplete="off">
            <mat-error *ngIf="attackForm.controls['modusOperandiDetail'].hasError('maxlength')">
              Detail Modu Operandi může mít nanejvýš <strong>200</strong> znaků
            </mat-error>
          </mat-form-field>
        </div>
        <mat-form-field>
          <input matInput placeholder="K útoku se přihlásili" formControlName="terroristOrganization" [matAutocomplete]="TOAutoComplete">
          <mat-error *ngIf="attackForm.controls['terroristOrganization'].hasError('maxlength')">
            Toto pole může mít nanejvýš <strong>200</strong> znaků
          </mat-error>
          <mat-autocomplete #TOAutoComplete="matAutocomplete">
            <mat-option *ngFor="let terroristOrganization of terroristOrganizations | async" [value]="terroristOrganization">
              {{terroristOrganization}}
            </mat-option>
          </mat-autocomplete>
        </mat-form-field>
        <h5>Útočníci</h5>
        <mat-list>
          <mat-list-item *ngFor="let attacker of attackForm.controls['attackers'].value">
            <p matLine>
              <span>{{ attacker.name }}{{ attacker.age ? ', ' + attacker.age : '' }}</span>
            </p>
            <button type="button" mat-icon-button color="accent" (click)="onEditAttacker(attacker);">
              <mat-icon>edit</mat-icon>
            </button>
            <button type="button" mat-icon-button color="accent" (click)="onDeleteAttacker($event, attacker);">
              <mat-icon>remove_circle</mat-icon>
            </button>
          </mat-list-item>
          <mat-list-item (click)="onAddAttacker();" class="list-item-add">
            <button type="button" mat-icon-button color="accent">
              <mat-icon>add_circle</mat-icon>
            </button>
            Přidat útočníka
          </mat-list-item>
        </mat-list>
        <div class="form-field-group">
          <mat-form-field>
            <input matInput type="number" placeholder="Počet mrtvých" formControlName="deaths" autocomplete="off">
          </mat-form-field>
          <mat-form-field>
            <input matInput type="number" placeholder="Počet zraněných" formControlName="injured" autocomplete="off">
          </mat-form-field>
          <mat-form-field>
            <input matInput type="number" placeholder="Počet potenciálních obětí" formControlName="potentialVictims" autocomplete="off">
          </mat-form-field>
        </div>
        <h5>Propojené útoky</h5>
        <mat-list>
          <mat-list-item *ngFor="let relatedAttack of attackForm.controls['relatedAttacks'].value">
            <span matLine>{{ getRelatedAttackDescById(relatedAttack.relatedAttackId) }}</span>
            <span matLine class="note-line" *ngIf="relatedAttack.note">{{ relatedAttack.note }}</span>
            <button type="button" mat-icon-button color="accent" (click)="onUnlinkRelatedAttack($event, relatedAttack.relatedAttackId);">
              <mat-icon>remove_circle</mat-icon>
            </button>
          </mat-list-item>
          <mat-list-item (click)="onAddRelatedAttack();" class="list-item-add">
            <button type="button" mat-icon-button color="accent">
              <mat-icon>add_circle</mat-icon>
            </button>
            Přidat propojený útok
          </mat-list-item>
        </mat-list>
        <mat-form-field>
          <input matInput placeholder="Poznámka" formControlName="note" autocomplete="off">
          <mat-error *ngIf="attackForm.controls['note'].hasError('maxlength')">
            Poznámka může mít nanejvýš <strong>1000</strong> znaků
          </mat-error>
        </mat-form-field>
        <mat-form-field>
          <input matInput placeholder="Odkaz" formControlName="link" autocomplete="off">
          <mat-error *ngIf="attackForm.controls['link'].hasError('maxlength')">
            Odkaz může mít nanejvýš <strong>1000</strong> znaků
          </mat-error>
        </mat-form-field>
      </mat-card-content>
      <mat-card-actions align="end">
        <button clickOnEnter type="submit" mat-raised-button color="primary" [disabled]="!attackForm.valid">{{ editMode ? 'Uložit' : 'Vytvořit' }}</button>
        <button *ngIf="editMode" (click)="onDeleteAttack();" type="button" mat-raised-button color="warn" [disabled]="!attackForm.valid">Smazat</button>
      </mat-card-actions>
    </mat-card>
  </form>
</div>