@if (canAddUsers | async) {
  <h3>{{ 'stash.users.new_user' | translate }}</h3>
  <form
    class="add-user"
    (ngSubmit)="addUser()"
    [formGroup]="addForm">
    <pa-input
      type="email"
      formControlName="email"
      stfLowerCaseInput>
      {{ 'accounts.add_user_input' | translate }}
    </pa-input>
    <pa-select
      formControlName="role"
      label="{{ 'generic.role' | translate }}"
      dim>
      @for (role of roles; track role) {
        <pa-option [value]="role">
          {{ roleTitles[role] | translate }}
        </pa-option>
      }
    </pa-select>
    <pa-button
      type="submit"
      kind="primary"
      [disabled]="addForm.invalid">
      {{ 'generic.add' | translate }}
    </pa-button>
  </form>
}

<div class="users-list-header">
  <div class="title-s">{{ 'stash.users.users_list' | translate }}</div>
  <div>
    <nsi-dropdown-button
      aspect="basic"
      [popupRef]="orderUsers"
      [open]="orderOpen">
      {{ 'stash.users.sort_by_' + (order | async) | translate }}
    </nsi-dropdown-button>
    <pa-dropdown
      #orderUsers
      (onClose)="orderOpen = false"
      (onOpen)="orderOpen = true">
      <pa-option
        value="role"
        (selectOption)="changeOrder('role')">
        {{ 'stash.users.sort_by_role' | translate }}
      </pa-option>
      <pa-option
        value="name"
        (selectOption)="changeOrder('name')">
        {{ 'stash.users.sort_by_name' | translate }}
      </pa-option>
    </pa-dropdown>
  </div>
</div>

<pa-table
  border
  columns="repeat(3, 1fr) 64px">
  <pa-table-header>
    <pa-table-cell header>
      <span class="title-xxs">{{ 'generic.name' | translate }}</span>
    </pa-table-cell>
    <pa-table-cell header>
      <span class="title-xxs">{{ 'generic.email' | translate }}</span>
    </pa-table-cell>
    <pa-table-cell header>
      <span class="title-xxs">{{ 'generic.role' | translate }}</span>
    </pa-table-cell>
    <pa-table-cell-menu header></pa-table-cell-menu>
  </pa-table-header>

  @for (user of userRows | async; track user.id) {
    <pa-table-row>
      <pa-table-cell>
        <span class="title-s">{{ user.name }}</span>
      </pa-table-cell>
      <pa-table-cell>
        <div class="email-container">
          <span class="body-s">{{ user.email }}</span>
          @if (user.expires) {
            <pa-icon
              name="clock-dash"
              [paTooltip]="'kb.users.pending-invitation' | translate: { date: user.expires | date: 'short' }"></pa-icon>
          }
        </div>
      </pa-table-cell>
      <pa-table-cell>
        <nsi-dropdown-button
          size="small"
          aspect="basic"
          [popupRef]="roleDropdown"
          [disabled]="(user.role === 'SOWNER' && (hasSeveralOwners | async) === false) || !!user.expires">
          {{ roleTitles[user.role] | translate }}
        </nsi-dropdown-button>
        <pa-dropdown #roleDropdown>
          @for (role of roles; track role) {
            <pa-option
              [value]="role"
              (selectOption)="changeRole(user.id, role)">
              {{ roleTitles[role] | translate }}
            </pa-option>
          }
        </pa-dropdown>
      </pa-table-cell>
      <pa-table-cell-menu>
        <div class="actions">
          <pa-button
            aspect="basic"
            icon="trash"
            size="small"
            [disabled]="
              !user.expires &&
              (((userCount | async) || 0) < 2 || (user.role === 'SOWNER' && (hasSeveralOwners | async) === false))
            "
            (click)="deleteUser(user)">
            {{ 'generic.delete' | translate }}
          </pa-button>
        </div>
      </pa-table-cell-menu>
    </pa-table-row>
  }
</pa-table>