<nz-alert
  *ngFor="let error of errors"
  nzBanner
  [nzMessage]="error"
  nzType="error"
  nzCloseable
  (nzOnClose)="onErrorBannerClose(error)"></nz-alert>
<nz-alert
  *ngIf="success"
  nzBanner
  nzMessage="Revision(s) successfully {{ success }}."
  nzType="success"
  nzCloseable
  (nzOnClose)="onSuccessBannerClose()"></nz-alert>
<nz-card
  nzTitle="Flags"
  class="card-list">
  <ng-container *ngIf="flags && flags.length > 0; else noFlags">
    <nz-space nzDirection="vertical">
      <ng-container *ngFor="let flag of flags">
        <nz-card
          [nzTitle]="flagCardHeaderTitle"
          [nzExtra]="flagCardHeaderExtra"
          nzType="inner"
          *nzSpaceItem>
          <cvc-comment-body
            *ngIf="flag.openActivity"
            [commentBodySegments]="
              flag.openActivity.parsedNote
            "></cvc-comment-body>
          <nz-divider></nz-divider>
          <ng-container *ngIf="flag.state == 'OPEN'; else flagResolved">
            <cvc-flag-resolve-form
              [flag]="flag"
              [flagResolvedCallback]="
                flagResolvedCallback
              "></cvc-flag-resolve-form>
          </ng-container>
          <ng-template #flagResolved>
            <nz-row>
              <nz-col nzSpan="16">
                <ng-container *ngIf="flag.resolutionActivity">
                  <cvc-comment-body
                    [commentBodySegments]="
                      flag.resolutionActivity.parsedNote
                    "></cvc-comment-body>
                </ng-container>
              </nz-col>
              <nz-col
                nzSpan="8"
                nz-typography
                nzType="secondary"
                style="text-align: right">
                Resolved By
                <cvc-user-tag
                  *ngIf="flag.resolutionActivity !== undefined"
                  [user]="flag.resolutionActivity.user"></cvc-user-tag>
                {{ flag.resolutionActivity?.createdAt | timeAgo }}
              </nz-col>
            </nz-row>
          </ng-template>

          <!-- header title -->
          <ng-template #flagCardHeaderTitle>
            <i
              nz-icon
              nzTheme="twotone"
              [nzTwotoneColor]="'Flag' | entityColor"
              nzType="civic-flag"></i>
            FID{{ flag.id }}
          </ng-template>

          <!-- header secondary & status -->
          <ng-template #flagCardHeaderExtra>
            <nz-space nzSize="small">
              <span *nzSpaceItem>
                <span
                  nz-typography
                  nzType="secondary"
                  >Flagged By</span
                >
                <cvc-user-tag [user]="flag.openActivity.user"></cvc-user-tag>
                <span
                  nz-typography
                  nzType="secondary"
                  >{{ flag.openActivity.createdAt | timeAgo }}</span
                >
              </span>
              <cvc-status-tag
                [status]="flag.state"
                *nzSpaceItem></cvc-status-tag>
            </nz-space>
          </ng-template>
        </nz-card>
      </ng-container>
    </nz-space>
  </ng-container>
  <ng-template #noFlags>
    <nz-empty
      nzNotFoundImage="simple"
      nzNotFoundContent="No Flags matching filters"></nz-empty>
  </ng-template>
</nz-card>
