<div
  role="group"
  *ngFor="let s of sends"
  appA11yTitle="{{ s.name }}"
  class="box-content-row box-content-row-flex"
>
  <button
    type="button"
    class="row-main"
    (click)="selectSend(s)"
    appStopClick
    title="{{ title }} - {{ s.name }}"
  >
    <div class="app-vault-icon">
      <div class="icon" aria-hidden="true">
        <i class="bwi bwi-fw bwi-lg bwi-file-text" *ngIf="s.type === sendType.Text"></i>
        <i class="bwi bwi-fw bwi-lg bwi-file" *ngIf="s.type === sendType.File"></i>
      </div>
    </div>
    <div class="row-main-content">
      <span class="text">
        {{ s.name }}
        <ng-container *ngIf="s.disabled">
          <i
            class="bwi bwi-exclamation-triangle text-muted"
            title="{{ 'disabled' | i18n }}"
            aria-hidden="true"
          ></i>
          <span class="sr-only">{{ "disabled" | i18n }}</span>
        </ng-container>
        <ng-container *ngIf="s.password">
          <i
            class="bwi bwi-key text-muted"
            title="{{ 'passwordProtected' | i18n }}"
            aria-hidden="true"
          ></i>
          <span class="sr-only">{{ "passwordProtected" | i18n }}</span>
        </ng-container>
        <ng-container *ngIf="s.maxAccessCountReached">
          <i
            class="bwi bwi-ban text-muted"
            title="{{ 'maxAccessCountReached' | i18n }}"
            aria-hidden="true"
          ></i>
          <span class="sr-only">{{ "maxAccessCountReached" | i18n }}</span>
        </ng-container>
        <ng-container *ngIf="s.expired">
          <i class="bwi bwi-clock text-muted" title="{{ 'expired' | i18n }}" aria-hidden="true"></i>
          <span class="sr-only">{{ "expired" | i18n }}</span>
        </ng-container>
        <ng-container *ngIf="s.pendingDelete">
          <i
            class="bwi bwi-trash text-muted"
            title="{{ 'pendingDeletion' | i18n }}"
            aria-hidden="true"
          ></i>
          <span class="sr-only">{{ "pendingDeletion" | i18n }}</span>
        </ng-container>
      </span>
      <span class="detail">{{ s.deletionDate | date: "medium" }}</span>
    </div>
  </button>
  <div class="action-buttons">
    <button
      type="button"
      class="row-btn"
      appStopClick
      appStopProp
      appA11yTitle="{{ 'copySendLink' | i18n }}"
      (click)="copySendLink(s)"
    >
      <i class="bwi bwi-lg bwi-files" aria-hidden="true"></i>
    </button>
    <button
      type="button"
      class="row-btn"
      [ngClass]="{ disabled: disabledByPolicy }"
      [attr.disabled]="disabledByPolicy ? '' : null"
      appStopClick
      appStopProp
      appA11yTitle="{{ 'removePassword' | i18n }}"
      (click)="removePassword(s)"
      *ngIf="s.password"
    >
      <i class="bwi bwi-lg bwi-undo" aria-hidden="true"></i>
    </button>
    <button
      type="button"
      class="row-btn"
      appStopClick
      appStopProp
      appA11yTitle="{{ 'delete' | i18n }}"
      (click)="delete(s)"
    >
      <i class="bwi bwi-lg bwi-trash" aria-hidden="true"></i>
    </button>
  </div>
</div>
