<div class="main-container" *ngIf="attack">
  <div class="heading mat-h2">{{ attack.city + ', ' + attack.country + ', ' + attack.date }}</div>
  <mat-card class="attack-detail-card">
    <mat-card-content class="content">
      <div class="web-view-group">
        <div class="group">
          <div>
            <h5>Stát</h5>
            {{ attack.country }}
          </div>
          <div>
            <h5>Město</h5>
            {{ attack.city }}
          </div>
        </div>
        <div class="group">
          <div *ngIf="attack.peak">
            <h5>Čas</h5>
            {{ attack.time }}
          </div>
          <div>
            <h5>Datum</h5>
            {{ attack.date }}
          </div>
          <div *ngIf="attack.peak">
            <h5>Peak</h5>
            {{ attack.peak }}
          </div>
        </div>
      </div>
      <div class="group" *ngIf="attack.latitude || attack.longitude">
        <div *ngIf="attack.latitude">
          <h5>Zeměpisná délka</h5>
          {{ attack.latitude }}
        </div>
        <div *ngIf="attack.longitude">
          <h5>Zeměpisná šířka</h5>
          {{ attack.longitude }}
        </div>
      </div>

      <div *ngIf="attack.softTargetDescription">
        <h5>Popis měkkého cíle (funkčnost)</h5>
        {{ attack.softTargetDescription }}
      </div>

      <div *ngIf="attack.softTargetTypes.length > 0">
        <h5>Typy měkkého cíle</h5>
        <mat-list>
          <mat-list-item *ngFor="let softTargetType of attack.softTargetTypes">
            <span matLine>{{ softTargetType.softTargetType.label }}</span>
            <span matLine class="note-line" *ngIf="softTargetType.softTargetTypeDetail">{{ softTargetType.softTargetTypeDetail }}</span>
          </mat-list-item>
        </mat-list>
      </div>

      <div class="web-view-group">
        <div class="group terror-security-group">
          <div *ngIf="attack.terror">
            <h5>Teror</h5>
            {{ attack.terror.label }}
          </div>
          <div *ngIf="attack.entranceSecurity">
            <h5>Ochranka u vstupu</h5>
            {{ attack.entranceSecurity.label }}
          </div>
        </div>
        <div *ngIf="attack.epicenter">
          <h5>Epicentrum</h5>
          {{ attack.epicenter.label }}
        </div>
      </div>

      <div class="web-view-group">
        <div *ngIf="attack.modusOperandi" class="modus-operandi">
          <h5>Modus Operandi</h5>
          {{ attack.modusOperandi.label }}
        </div>
        <div *ngIf="attack.modusOperandiDetail">
          <h5>Detail Modu Operandi</h5>
          {{ attack.modusOperandiDetail }}
        </div>
      </div>
      <div class="web-view-group">
        <div *ngIf="attack.terroristOrganization" class="terrorist-organization">
          <h5>K útoku se přihlásili</h5>
          {{ attack.terroristOrganization }}
        </div>
        <div class="web-view-group">
          <div class="group deaths-injured-group">
            <div *ngIf="attack.deaths">
              <h5>Počet mrtvých</h5>
              {{ attack.deaths }}
            </div>
            <div *ngIf="attack.injured">
              <h5>Počet zraněných</h5>
              {{ attack.injured }}
            </div>
          </div>
          <div *ngIf="attack.potentialVictims" class="potential-victims">
            <h5>Počet potenciálních obětí</h5>
            {{ attack.potentialVictims }}
          </div>
        </div>
      </div>
      <div *ngIf="attack.attackers.length > 0">
        <h5>Útočníci</h5>
        <mat-list>
          <mat-list-item matLine *ngFor="let attacker of attack.attackers">
            {{ attacker.name +  (attacker.gender ? ', '+attacker.gender.label : '') +  (attacker.age ? ', '+attacker.age : '') + (attacker.residence ? ', '+attacker.residence : '') + (attacker.attackLocality ? ', '+attacker.attackLocality.label : '') + (attacker.origin ? ', '+attacker.origin : '') }}
          </mat-list-item>
        </mat-list>
      </div>
      <div *ngIf="attack.relatedAttacks.length > 0">
        <h5>Propojené útoky</h5>
        <mat-list>
          <mat-list-item *ngFor="let relatedAttack of attack.relatedAttacks">
              <span matLine>{{ getRelatedAttackDescById(relatedAttack.relatedAttackId) }}</span>
              <span matLine class="note-line" *ngIf="relatedAttack.note">{{ relatedAttack.note }}</span>
          </mat-list-item>
        </mat-list>      
      </div>
      <div *ngIf="attack.note">
        <h5>Poznámka</h5>
        {{ attack.note }}
      </div>
      <div *ngIf="attack.link">
        <h5>Odkaz</h5>
        {{ attack.link }}
      </div>
    </mat-card-content>
  </mat-card>
</div>