@if (users) {
  <div class="account-users page-spacing">
    <h1>{{ 'navbar.users' | translate }}</h1>

    <div>
      <div class="users-amount">
        {{ 'account.users_amount' | translate }}
        <strong>{{ users.length }}</strong>
      </div>
      @if (account && account.max_users != null) {
        <div class="users-left">
          {{ 'account.users_left' | translate }}
          <strong>{{ (account.max_users || 0) - (account.current_users || 0) }}</strong>
        </div>
      }
    </div>

    @if (canAddUsers | async) {
      <div
        class="add-user"
        [formGroup]="form">
        <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">{{ roleTranslations[role] | translate }}</pa-option>
          }
        </pa-select>
        <pa-button
          [disabled]="form.invalid"
          (click)="addUser()">
          {{ 'account.add_user' | translate }}
        </pa-button>
      </div>
    }

    <pa-table
      border
      columns="repeat(2, 1fr) 210px 96px">
      <pa-table-header>
        <pa-table-cell header>{{ 'generic.name' | translate }}</pa-table-cell>
        <pa-table-cell header>{{ 'generic.email' | translate }}</pa-table-cell>
        <pa-table-cell header>{{ 'generic.role' | translate }}</pa-table-cell>
        <pa-table-cell header></pa-table-cell>
      </pa-table-header>
      @for (user of users; track user) {
        <pa-table-row>
          <pa-table-cell>
            <span class="title-s">{{ user.name }}</span>
          </pa-table-cell>
          <pa-table-cell>
            {{ user.email }}
          </pa-table-cell>
          <pa-table-cell>
            <nsi-dropdown-button
              size="small"
              aspect="basic"
              [popupRef]="roleDropdown"
              [disabled]="!user.id || isItMe(user.id)">
              {{ roleTranslations[user.role] | translate }}
            </nsi-dropdown-button>
            <pa-dropdown #roleDropdown>
              @for (role of roleTranslations | keyvalue; track role) {
                <pa-option
                  [value]="role.key"
                  (selectOption)="changeRole(user, role.key)">
                  {{ role.value | translate }}
                </pa-option>
              }
            </pa-dropdown>
          </pa-table-cell>
          <pa-table-cell>
            @if (!isItMe(user.id)) {
              <pa-button
                aspect="basic"
                icon="trash"
                size="small"
                paTooltip="generic.delete"
                (click)="deleteUserConfirm(user)">
                {{ 'generic.delete' | translate }}
              </pa-button>
            }
          </pa-table-cell>
        </pa-table-row>
      }
      @for (invitation of invitations; track invitation) {
        <pa-table-row>
          <pa-table-cell>
            <pa-icon
              class="pending-icon"
              name="clock-dash"
              paTooltip="Pending: invitation sent"></pa-icon>
          </pa-table-cell>
          <pa-table-cell>
            {{ invitation.email }}
          </pa-table-cell>
          <pa-table-cell>
            <nsi-dropdown-button
              size="small"
              aspect="basic"
              disabled
              [popupRef]="roleDropdown2">
              {{ roleTranslations[invitation.role] | translate }}
            </nsi-dropdown-button>
            <pa-dropdown #roleDropdown2>
              @for (role of roleTranslations | keyvalue; track role) {
                <pa-option [value]="role.key">
                  {{ role.value | translate }}
                </pa-option>
              }
            </pa-dropdown>
          </pa-table-cell>
          <pa-table-cell>
            <pa-button
              aspect="basic"
              icon="trash"
              size="small"
              paTooltip="generic.delete"
              (click)="deleteInvitation(invitation)">
              {{ 'generic.delete' | translate }}
            </pa-button>
          </pa-table-cell>
        </pa-table-row>
      }
    </pa-table>
  </div>
}