<h3>Account users</h3>

@if (canEdit | async) {
  <div class="add-member">
    <pa-input
      icon="search"
      [paPopup]="potentialMembersList"
      sameWidth
      (valueChange)="searchMemberTerm$.next($event)">
      Search member to add
    </pa-input>
    <pa-dropdown #potentialMembersList>
      @for (member of potentialMembers$ | async; track member) {
        <pa-option
          icon="circle-plus"
          [description]="member.id"
          (selectOption)="addMember(member)">
          {{ member.name }} – {{ member.email }}
        </pa-option>
      }
    </pa-dropdown>
  </div>
}
<pa-table
  border
  columns="2fr repeat(2, 1fr) 104px 96px">
  <pa-table-header>
    <pa-table-cell header>Id</pa-table-cell>
    <pa-table-cell header>Name</pa-table-cell>
    <pa-table-cell header>Email</pa-table-cell>
    <pa-table-cell header>Is manager</pa-table-cell>
    <pa-table-cell-menu header></pa-table-cell-menu>
  </pa-table-header>
  @for (user of users | async; track user.id) {
    <pa-table-row
      [routerLink]="'/users/' + user.id"
      clickable>
      <pa-table-cell>
        <small>{{ user.id }}</small>
      </pa-table-cell>
      <pa-table-cell>{{ user.name || '' }}</pa-table-cell>
      <pa-table-cell>{{ user.email }}</pa-table-cell>
      <pa-table-cell>
        <div class="manager-container">
          @if (user.isManager) {
            <pa-icon name="shield-check"></pa-icon>
          }
        </div>
      </pa-table-cell>
      <pa-table-cell-menu>
        @if ((canEdit | async) && (!user.isManager || (hasSeveralManagers | async) === true)) {
          <pa-button
            icon="more-vertical"
            aspect="basic"
            [paPopup]="menu">
            Menu
          </pa-button>
          <pa-dropdown #menu>
            @if (user.isManager && (hasSeveralManagers | async) === true) {
              <pa-option (selectOption)="removeFromManagers($event, user)">Remove from managers</pa-option>
            }
            @if (!user.isManager) {
              <pa-option (selectOption)="addToManagers($event, user)">Add to managers</pa-option>
            }
            @if (!user.isManager || (hasSeveralManagers | async) === true) {
              <pa-separator></pa-separator>
              <pa-option
                destructive
                (selectOption)="removeUser($event, user)">
                Remove
              </pa-option>
            }
          </pa-dropdown>
        }
      </pa-table-cell-menu>
    </pa-table-row>
  }
</pa-table>
