<form [formGroup]="formGroup" [bitSubmit]="submit" bit-dialog dialogSize="large">
  <span bitDialogTitle>
    {{ "editMember" | i18n }}
    @if (!loading()) {
      <span class="tw-text-sm tw-normal-case tw-text-muted">{{ params.name }}</span>
    }
  </span>
  @if (isRevoked()) {
    <span bitDialogHeaderEnd class="tw-mr-4">
      <span bitBadge variant="subtle">{{ "revoked" | i18n }}</span>
    </span>
  }
  <div bitDialogContent>
    @if (loading()) {
      <i
        class="bwi bwi-spinner bwi-spin tw-text-muted"
        title="{{ 'loading' | i18n }}"
        aria-hidden="true"
      ></i>
      <span class="tw-sr-only">{{ "loading" | i18n }}</span>
    }
    @if (!loading() && organization$ | async; as organization) {
      <bit-tab-group [selectedIndex]="tabIndex()" (selectedIndexChange)="tabIndex.set($event)">
        @if (detailsTabEnabled()) {
          <bit-tab [label]="'details' | i18n">
            <bit-form-field>
              <bit-label>{{ "name" | i18n }}</bit-label>
              <input bitInput type="text" formControlName="name" />
              @if (!nameEditable()) {
                <bit-hint>{{ "nameNotClaimedHint" | i18n }}</bit-hint>
              }
            </bit-form-field>
            <bit-form-field>
              <bit-label>{{ "email" | i18n }}</bit-label>
              <input bitInput type="email" formControlName="email" />
              @if (emailEditable()) {
                <bit-hint>{{ "emailUpdateOnSave" | i18n }}</bit-hint>
              } @else if (!params.claimedByOrganization) {
                <bit-hint>{{ "emailNotClaimedHint" | i18n }}</bit-hint>
              } @else {
                <bit-hint>{{ "emailHasMasterPasswordHint" | i18n }}</bit-hint>
              }
            </bit-form-field>
            <bit-form-field>
              <bit-label>
                {{ "memberRole" | i18n }}
                <a
                  bitLink
                  target="_blank"
                  rel="noreferrer"
                  appA11yTitle="{{ 'learnMoreAboutMemberRoles' | i18n }}"
                  href="https://bitwarden.com/help/user-types-access-control/"
                  slot="end"
                  startIcon="bwi-question-circle"
                ></a>
              </bit-label>
              <bit-select formControlName="type" data-testid="role">
                <bit-option
                  [value]="organizationUserType.User"
                  [description]="'userDesc' | vfo1I18n: 'userDescSharedFolders'"
                  [label]="'user' | i18n"
                ></bit-option>
                <bit-option
                  [value]="organizationUserType.Admin"
                  [description]="'adminRoleDesc' | vfo1I18n: 'adminRoleDescSharedFolders'"
                  [label]="'admin' | i18n"
                ></bit-option>
                <bit-option
                  [value]="organizationUserType.Owner"
                  [description]="'ownerDesc' | i18n"
                  [label]="'owner' | i18n"
                ></bit-option>
                <bit-option
                  [value]="organizationUserType.Custom"
                  [description]="'customDesc' | i18n"
                  [label]="'custom' | i18n"
                  [disabled]="!organization.useCustomPermissions"
                ></bit-option>
              </bit-select>
            </bit-form-field>
            @if (organization.useSecretsManager) {
              <bit-form-control>
                <input
                  type="checkbox"
                  [disabled]="params.isOnSecretsManagerStandalone || null"
                  bitCheckbox
                  formControlName="accessSecretsManager"
                />
                <bit-label>
                  {{ "userAccessSecretsManagerGA" | i18n }}
                  <a
                    bitLink
                    target="_blank"
                    rel="noreferrer"
                    appA11yTitle="{{ 'learnMore' | i18n }}"
                    href="https://bitwarden.com/help/manage-your-organization/#access-to-secrets-manager"
                    slot="end"
                  >
                    <i class="bwi bwi-question-circle" aria-hidden="true"></i>
                  </a>
                </bit-label>
              </bit-form-control>
            }
            @if (customUserTypeSelected()) {
              <div class="tw-grid tw-grid-cols-12 tw-gap-4" [formGroup]="permissionsGroup">
                <div class="tw-col-span-4">
                  <bit-form-control>
                    <input type="checkbox" bitCheckbox formControlName="accessEventLogs" />
                    <bit-label>{{ "accessEventLogs" | i18n }}</bit-label>
                  </bit-form-control>
                  <bit-form-control>
                    <input type="checkbox" bitCheckbox formControlName="accessImportExport" />
                    <bit-label>{{ "accessImportExport" | i18n }}</bit-label>
                  </bit-form-control>
                  <bit-form-control>
                    <input type="checkbox" bitCheckbox formControlName="accessReports" />
                    <bit-label>{{ "accessReports" | i18n }}</bit-label>
                  </bit-form-control>
                </div>
                <div class="tw-col-span-4">
                  <app-nested-checkbox
                    parentId="manageAllCollections"
                    [checkboxes]="permissionsGroup.controls.manageAllCollectionsGroup"
                  >
                  </app-nested-checkbox>
                </div>
                <div class="tw-col-span-4">
                  <div class="tw-mb-3">
                    <bit-form-control>
                      <input type="checkbox" bitCheckbox formControlName="manageGroups" />
                      <bit-label>{{ "manageGroups" | i18n }}</bit-label>
                    </bit-form-control>
                    <bit-form-control>
                      <input type="checkbox" bitCheckbox formControlName="manageSso" />
                      <bit-label>{{ "manageSso" | i18n }}</bit-label>
                    </bit-form-control>
                    <bit-form-control>
                      <input type="checkbox" bitCheckbox formControlName="managePolicies" />
                      <bit-label>{{ "managePolicies" | i18n }}</bit-label>
                    </bit-form-control>
                    <bit-form-control>
                      <input
                        id="manageUsers"
                        type="checkbox"
                        bitCheckbox
                        formControlName="manageUsers"
                      />
                      <bit-label>{{ "manageUsers" | i18n }}</bit-label>
                    </bit-form-control>
                    <bit-form-control>
                      <input type="checkbox" bitCheckbox formControlName="manageResetPassword" />
                      <bit-label>{{ "manageAccountRecovery" | i18n }}</bit-label>
                    </bit-form-control>
                  </div>
                </div>
              </div>
            }
            @if (params.createdDate) {
              <div class="tw-mt-4 tw-border-b tw-border-solid tw-border-secondary-300 tw-pb-2">
                <p class="tw-mb-0 tw-text-sm tw-text-muted">{{ "createdDate" | i18n }}</p>
                <p class="tw-mt-1">{{ params.createdDate | date: "medium" }}</p>
              </div>
            }
          </bit-tab>
        } @else {
          <bit-tab [label]="'role' | i18n">
            <bit-radio-group formControlName="type" [block]="true">
              <bit-label>
                {{ "memberRole" | i18n }}
                <a
                  bitLink
                  target="_blank"
                  rel="noreferrer"
                  appA11yTitle="{{ 'learnMoreAboutMemberRoles' | i18n }}"
                  href="https://bitwarden.com/help/user-types-access-control/"
                  slot="end"
                >
                  <i class="bwi bwi-question-circle" aria-hidden="true"></i>
                </a>
              </bit-label>
              <bit-radio-button id="userTypeUser" [value]="organizationUserType.User">
                <bit-label>{{ "user" | i18n }}</bit-label>
                <bit-hint>{{ "userDesc" | vfo1I18n: "userDescSharedFolders" }}</bit-hint>
              </bit-radio-button>
              <bit-radio-button id="userTypeAdmin" [value]="organizationUserType.Admin">
                <bit-label>{{ "admin" | i18n }}</bit-label>
                <bit-hint>{{ "adminDesc" | vfo1I18n: "adminDescSharedFolders" }}</bit-hint>
              </bit-radio-button>
              <bit-radio-button id="userTypeOwner" [value]="organizationUserType.Owner">
                <bit-label>{{ "owner" | i18n }}</bit-label>
                <bit-hint>{{ "ownerDesc" | i18n }}</bit-hint>
              </bit-radio-button>
              <bit-radio-button
                id="userTypeCustom"
                [value]="organizationUserType.Custom"
                [disabled]="!organization.useCustomPermissions || null"
              >
                <bit-label>{{ "custom" | i18n }}</bit-label>
                <bit-hint>
                  @if (!organization.useCustomPermissions) {
                    <p>
                      {{ "customDescNonEnterpriseStart" | i18n
                      }}<a
                        bitLink
                        href="https://bitwarden.com/contact/"
                        target="_blank"
                        rel="noreferrer"
                        >{{ "customDescNonEnterpriseLink" | i18n }}</a
                      >{{ "customDescNonEnterpriseEnd" | i18n }}
                    </p>
                  } @else {
                    <p>{{ "customDesc" | i18n }}</p>
                  }
                </bit-hint>
              </bit-radio-button>
            </bit-radio-group>
            @if (customUserTypeSelected()) {
              <div class="tw-grid tw-grid-cols-12 tw-gap-4" [formGroup]="permissionsGroup">
                <div class="tw-col-span-4">
                  <bit-form-control>
                    <input type="checkbox" bitCheckbox formControlName="accessEventLogs" />
                    <bit-label>{{ "accessEventLogs" | i18n }}</bit-label>
                  </bit-form-control>
                  <bit-form-control>
                    <input type="checkbox" bitCheckbox formControlName="accessImportExport" />
                    <bit-label>{{ "accessImportExport" | i18n }}</bit-label>
                  </bit-form-control>
                  <bit-form-control>
                    <input type="checkbox" bitCheckbox formControlName="accessReports" />
                    <bit-label>{{ "accessReports" | i18n }}</bit-label>
                  </bit-form-control>
                </div>
                <div class="tw-col-span-4">
                  <app-nested-checkbox
                    parentId="manageAllCollections"
                    [checkboxes]="permissionsGroup.controls.manageAllCollectionsGroup"
                  >
                  </app-nested-checkbox>
                </div>
                <div class="tw-col-span-4">
                  <div class="tw-mb-3">
                    <bit-form-control>
                      <input type="checkbox" bitCheckbox formControlName="manageGroups" />
                      <bit-label>{{ "manageGroups" | i18n }}</bit-label>
                    </bit-form-control>
                    <bit-form-control>
                      <input type="checkbox" bitCheckbox formControlName="manageSso" />
                      <bit-label>{{ "manageSso" | i18n }}</bit-label>
                    </bit-form-control>
                    <bit-form-control>
                      <input type="checkbox" bitCheckbox formControlName="managePolicies" />
                      <bit-label>{{ "managePolicies" | i18n }}</bit-label>
                    </bit-form-control>
                    <bit-form-control>
                      <input
                        id="manageUsers"
                        type="checkbox"
                        bitCheckbox
                        formControlName="manageUsers"
                      />
                      <bit-label>{{ "manageUsers" | i18n }}</bit-label>
                    </bit-form-control>
                    <bit-form-control>
                      <input type="checkbox" bitCheckbox formControlName="manageResetPassword" />
                      <bit-label>{{ "manageAccountRecovery" | i18n }}</bit-label>
                    </bit-form-control>
                  </div>
                </div>
              </div>
            }
            @if (organization.useSecretsManager) {
              <h3 class="tw-mt-4">
                {{ "secretsManager" | i18n }}
                <a
                  bitLink
                  target="_blank"
                  rel="noreferrer"
                  appA11yTitle="{{ 'learnMore' | i18n }}"
                  href="https://bitwarden.com/help/manage-your-organization/#access-to-secrets-manager"
                >
                  <i class="bwi bwi-question-circle" aria-hidden="true"></i>
                </a>
              </h3>
              <p class="tw-text-muted">{{ "secretsManagerAccessDescription" | i18n }}</p>
              <bit-form-control>
                <input
                  type="checkbox"
                  [disabled]="params.isOnSecretsManagerStandalone || null"
                  bitCheckbox
                  formControlName="accessSecretsManager"
                />
                <bit-label>
                  {{ "userAccessSecretsManagerGA" | i18n }}
                </bit-label>
              </bit-form-control>
            }
            @if (externalId() != null) {
              <bit-form-field>
                <bit-label>{{ "externalId" | i18n }}</bit-label>
                <input bitInput type="text" formControlName="externalId" readonly />
                <bit-hint>{{ "externalIdDesc" | i18n }}</bit-hint>
              </bit-form-field>
            }
            @if (ssoExternalId() != null) {
              <bit-form-field>
                <bit-label>{{ "ssoExternalId" | i18n }}</bit-label>
                <input bitInput type="text" formControlName="ssoExternalId" readonly />
                <bit-hint>{{ "ssoExternalIdDesc" | i18n }}</bit-hint>
              </bit-form-field>
            }
          </bit-tab>
        }
        @if (organization.useGroups) {
          <bit-tab [label]="'groups' | i18n">
            <div class="tw-mb-6">
              {{
                (restrictEditingSelf$ | async)
                  ? ("restrictedGroupAccess" | i18n)
                  : ("groupAccessUserDesc" | vfo1I18n: "groupAccessUserDescSharedFolders")
              }}
            </div>
            <bit-access-selector
              formControlName="groups"
              [items]="groupAccessItems()"
              [columnHeader]="'groups' | i18n"
              [selectorLabelText]="'selectGroups' | i18n"
              [emptySelectionText]="'noGroupsAdded' | i18n"
              [hideMultiSelect]="restrictEditingSelf$ | async"
            ></bit-access-selector>
          </bit-tab>
        }
        <bit-tab [label]="'collections' | vfo1I18n: 'sharedFolders'">
          @if (restrictEditingSelf$ | async) {
            <div class="tw-mb-6">
              {{ "cannotAddYourselfToCollections" | vfo1I18n: "cannotAddYourselfToSharedFolders" }}
            </div>
          }
          @if (
            !(restrictEditingSelf$ | async) &&
            (organization.useGroups || !(canAssignAccessToAnyCollection$ | async))
          ) {
            <div class="tw-mb-6">
              @if (organization.useGroups) {
                <span>
                  {{ "userPermissionOverrideHelperDesc" | i18n }}
                </span>
              }
              @if (!(canAssignAccessToAnyCollection$ | async)) {
                <span>
                  {{
                    "restrictedCollectionAssignmentDesc"
                      | vfo1I18n: "restrictedSharedFolderAssignmentDesc"
                  }}
                </span>
              }
            </div>
          }
          <bit-access-selector
            [permissionMode]="PermissionMode.Edit"
            formControlName="access"
            [showGroupColumn]="organization.useGroups"
            [items]="collectionAccessItems()"
            [columnHeader]="'collection' | vfo1I18n: 'sharedFolder'"
            [selectorLabelText]="'selectCollections' | vfo1I18n: 'selectSharedFolders'"
            [emptySelectionText]="'noCollectionsAdded' | vfo1I18n: 'noSharedFoldersAdded'"
            [hideMultiSelect]="restrictEditingSelf$ | async"
          ></bit-access-selector>
        </bit-tab>
      </bit-tab-group>
    }
  </div>
  <ng-container bitDialogFooter>
    @if (detailsTabEnabled()) {
      <bit-menu #actionsMenu>
        @if (isRevoked()) {
          <button
            type="button"
            bitMenuItem
            [disabled]="loading()"
            (click)="handleMenuAction(restore)"
          >
            {{ "restoreMember" | i18n }}
          </button>
        } @else {
          <button
            type="button"
            bitMenuItem
            [disabled]="loading()"
            (click)="handleMenuAction(revoke)"
          >
            {{ "revokeMember" | i18n }}
          </button>
        }
        @if (!params.claimedByOrganization) {
          <button
            type="button"
            bitMenuItem
            variant="danger"
            [disabled]="loading()"
            (click)="handleMenuAction(remove)"
          >
            {{ "removeMember" | i18n }}
          </button>
        }
        @if (params.claimedByOrganization) {
          <button
            type="button"
            bitMenuItem
            variant="danger"
            [disabled]="loading()"
            (click)="handleMenuAction(delete)"
          >
            {{ "deleteMember" | i18n }}
          </button>
        }
      </bit-menu>
      <button type="submit" bitButton bitFormButton buttonType="primary" [disabled]="loading()">
        {{ "save" | i18n }}
      </button>
      <button
        type="button"
        bitButton
        buttonType="secondary"
        [bitMenuTriggerFor]="actionsMenu"
        [disabled]="loading()"
      >
        {{ "moreActions" | i18n }}
        <bit-icon name="bwi-angle-down" class="tw-ml-1"></bit-icon>
      </button>
    } @else {
      <button type="submit" bitButton bitFormButton buttonType="primary" [disabled]="loading()">
        {{ "save" | i18n }}
      </button>
      <button
        type="button"
        bitButton
        bitFormButton
        buttonType="secondary"
        (click)="cancel()"
        [disabled]="loading()"
      >
        {{ "cancel" | i18n }}
      </button>
      <div class="tw-flex tw-gap-2 tw-ml-auto">
        @if (isRevoked()) {
          <button
            type="button"
            bitButton
            bitFormButton
            buttonType="secondary"
            [bitAction]="restore"
            [disabled]="loading()"
          >
            {{ "restore" | i18n }}
          </button>
        }
        @if (!isRevoked()) {
          <button
            type="button"
            bitButton
            bitFormButton
            buttonType="secondary"
            [bitAction]="revoke"
            [disabled]="loading()"
          >
            {{ "revoke" | i18n }}
          </button>
        }
        @if (!params.claimedByOrganization) {
          <button
            type="button"
            buttonType="danger"
            bitButton
            bitFormButton
            [bitAction]="remove"
            [disabled]="loading()"
          >
            {{ "remove" | i18n }}
          </button>
        }
        @if (params.claimedByOrganization) {
          <button
            type="button"
            buttonType="danger"
            bitButton
            bitFormButton
            [bitAction]="delete"
            [disabled]="loading()"
          >
            {{ "delete" | i18n }}
          </button>
        }
      </div>
    }
  </ng-container>
</form>
