<popup-page>
  <popup-header slot="header" pageTitle="{{ 'removeMasterPassword' | i18n }}">
    <ng-container slot="end">
      <app-pop-out></app-pop-out>
    </ng-container>
  </popup-header>

  @if (loading) {
    <div class="tw-text-center">
      <i
        class="bwi bwi-spinner bwi-spin bwi-2x tw-text-muted"
        title="{{ 'loading' | i18n }}"
        aria-hidden="true"
      ></i>
      <span class="tw-sr-only">{{ "loading" | i18n }}</span>
    </div>
  } @else {
    <p>{{ "removeMasterPasswordForOrganizationUserKeyConnector" | i18n }}</p>
    <p class="tw-mb-0">{{ "organizationName" | i18n }}:</p>
    <p class="tw-text-muted tw-mb-6">{{ organization.name }}</p>
    <p class="tw-mb-0">{{ "keyConnectorDomain" | i18n }}:</p>
    <p class="tw-text-muted tw-mb-6">{{ organization.keyConnectorUrl }}</p>
    <button
      type="button"
      bitButton
      buttonType="primary"
      block
      (click)="convert()"
      [disabled]="action"
      class="tw-mb-2"
    >
      <i
        class="bwi bwi-spinner bwi-spin"
        title="{{ 'loading' | i18n }}"
        aria-hidden="true"
        *ngIf="continuing"
      ></i>
      {{ "removeMasterPassword" | i18n }}
    </button>

    <button type="button" bitButton block (click)="leave()" [disabled]="action">
      <i
        class="bwi bwi-spinner bwi-spin"
        title="{{ 'loading' | i18n }}"
        aria-hidden="true"
        *ngIf="leaving"
      ></i>
      {{ "leaveOrganization" | i18n }}
    </button>
  }
</popup-page>
