<cd-user-tabs></cd-user-tabs>

<cd-table [data]="users"
          columnMode="flex"
          [columns]="columns"
          identifier="username"
          selectionType="single"
          (fetchData)="getUsers()"
          (updateSelection)="updateSelection($event)">
  <cd-table-actions class="table-actions"
                    [permission]="permission"
                    [selection]="selection"
                    [tableActions]="tableActions">
  </cd-table-actions>
</cd-table>

<ng-template #userRolesTpl
             let-value="data.value">
  <span *ngFor="let role of value; last as isLast">
    {{ role }}{{ !isLast ? ", " : "" }}
  </span>
</ng-template>

<ng-template #warningTpl
             let-column="data.column"
             let-value="data.value"
             let-row="data.row">
  <div [class.border-danger]="row.remainingDays < this.expirationDangerAlert"
       [class.border-warning]="row.remainingDays < this.expirationWarningAlert && row.remainingDays >= this.expirationDangerAlert"
       class="border-margin">
    <div class="warning-content"> {{ value }} </div>
  </div>
</ng-template>

<ng-template #durationTpl
             let-column="data.column"
             let-value="data.value"
             let-row="data.row">
  <i *ngIf="row.remainingDays < this.expirationWarningAlert"
     i18n-title
     title="User's password is about to expire"
     [class.icon-danger-color]="row.remainingDays < this.expirationDangerAlert"
     [class.icon-warning-color]="row.remainingDays < this.expirationWarningAlert && row.remainingDays >= this.expirationDangerAlert"
     class="{{ icons.warning }}"></i>
  <span title="{{ value | cdDate }}">{{ row.remainingTimeWithoutSeconds / 1000 | duration }}</span>
</ng-template>
