<form [formGroup]="attackerForm">
  <div class="attacker-dialog">
    <mat-card-header>
      <mat-card-title>{{ editMode ? 'Upravit útočníka' : 'Nový útočník' }}</mat-card-title>
    </mat-card-header>
    <mat-dialog-content>
      <mat-form-field>
        <input matInput placeholder="Jméno *" formControlName="name" autocomplete="off">
        <mat-error *ngIf="attackerForm.controls['name'].hasError('required')">
          Jméno je <strong>povinné</strong>
        </mat-error>
        <mat-error *ngIf="attackerForm.controls['name'].hasError('maxlength')">
          Jméno může mít nanejvýš <strong>100</strong> znaků
        </mat-error>
      </mat-form-field>
      <mat-form-field>
        <mat-select placeholder="Pohlaví" formControlName="gender">
          <mat-option></mat-option>
          <mat-option *ngFor="let gender of genders" [value]="gender.name">
            {{gender.label}}
          </mat-option>
        </mat-select>
      </mat-form-field>
      <mat-form-field>
        <input matInput type="number" placeholder="Věk" formControlName="age" autocomplete="off">
      </mat-form-field>
      <mat-form-field>
        <input matInput placeholder="Státní příslušnost/rezidence" formControlName="residence" autocomplete="off">
        <mat-error *ngIf="attackerForm.controls['residence'].hasError('maxlength')">
          Státní příslušnost/rezidence může mít nanejvýš <strong>60</strong> znaků
        </mat-error>
      </mat-form-field>
      <mat-form-field>
        <mat-select placeholder="Lokalita vzhledem k bydlišti útočníků" formControlName="attackLocality">
          <mat-option></mat-option>
          <mat-option *ngFor="let locality of localities" [value]="locality.name">
            {{locality.label}}
          </mat-option>
        </mat-select>
      </mat-form-field>
      <mat-form-field>
        <input matInput placeholder="Původ útočníka" formControlName="origin" autocomplete="off">
        <mat-error *ngIf="attackerForm.controls['origin'].hasError('maxlength')">
          Původ útočníka může mít nanejvýš <strong>500</strong> znaků
        </mat-error>
      </mat-form-field>
    </mat-dialog-content>
    <mat-dialog-actions align="end">
      <button clickOnEnter type="button" [mat-dialog-close]="attackerForm" mat-button mat-raised-button color="accent" [disabled]="!attackerForm.valid">{{ editMode ? 'Upravit' : 'Přidat' }}</button>
    </mat-dialog-actions>
  </div>
</form>