<app-header>
  <button
    *ngIf="!loading"
    type="button"
    buttonType="primary"
    bitButton
    (click)="addDomain()"
    startIcon="bwi-plus"
  >
    {{ (btnTextAddCreateFeatureFlag() ? "addDomain" : "newDomain") | i18n }}
  </button>
</app-header>

<p bitTypography="body1" class="tw-text-main tw-max-w-4xl">
  {{ "claimedDomainsDescription" | i18n }}
  <a
    bitLink
    target="_blank"
    rel="noreferrer"
    appA11yTitle="{{ 'learnMore' | i18n }}"
    href="https://bitwarden.com/help/claimed-accounts/"
    slot="end"
    startIcon="bwi-question-circle"
  ></a>
</p>

<ng-container *ngIf="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>
</ng-container>

<ng-container *ngIf="!loading">
  <ng-container *ngIf="orgDomains$ | async as orgDomains">
    <div class="tw-flex tw-flex-row">
      <bit-table class="tw-w-full tw-table-auto">
        <ng-container header>
          <tr>
            <th bitCell>{{ "name" | i18n }}</th>
            <th bitCell>{{ "status" | i18n }}</th>
            <th bitCell>{{ "lastChecked" | i18n }}</th>
            <th bitCell class="tw-text-right">{{ "options" | i18n }}</th>
          </tr>
        </ng-container>
        <ng-template body>
          <tr bitRow *ngFor="let orgDomain of orgDomains; index as i">
            <td bitCell>
              <button
                bitLink
                type="button"
                linkType="primary"
                (click)="editDomain(orgDomain)"
                appA11yTitle="{{ 'editDomain' | i18n }}"
              >
                {{ orgDomain.domainName }}
              </button>
            </td>
            <td bitCell>
              <span *ngIf="!orgDomain?.verifiedDate" bitBadge variant="warning">{{
                "domainStatusPending" | i18n
              }}</span>
              <span *ngIf="orgDomain?.verifiedDate" bitBadge variant="success">{{
                "domainStatusClaimed" | i18n
              }}</span>
            </td>
            <td bitCell class="tw-text-muted">
              {{ orgDomain.lastCheckedDate | date: "medium" }}
            </td>

            <td bitCell class="tw-text-right">
              <button
                [bitMenuTriggerFor]="orgDomainOptions"
                class="tw-border-none tw-bg-transparent tw-text-main"
                type="button"
                appA11yTitle="{{ 'options' | i18n }}"
              >
                <i class="bwi bwi-ellipsis-v bwi-lg" aria-hidden="true"></i>
              </button>
              <bit-menu #orgDomainOptions>
                <button bitMenuItem (click)="copyDnsTxt(orgDomain.txt)" type="button">
                  <i class="bwi bwi-fw bwi-clone" aria-hidden="true"></i>
                  {{ "copyDnsTxtRecord" | i18n }}
                </button>
                <button
                  bitMenuItem
                  (click)="verifyDomain(orgDomain.id, orgDomain.domainName)"
                  type="button"
                >
                  <i class="bwi bwi-fw bwi-check" aria-hidden="true"></i>
                  {{ "claimDomain" | i18n }}
                </button>
                <button
                  bitMenuItem
                  variant="danger"
                  (click)="deleteDomain(orgDomain.id)"
                  type="button"
                >
                  <bit-icon fixedWidth name="bwi-close" slot="start" />
                  {{ "remove" | i18n }}
                </button>
              </bit-menu>
            </td>
          </tr>
        </ng-template>
      </bit-table>
    </div>

    <div
      class="tw-mt-6 tw-flex tw-flex-col tw-items-center tw-justify-center"
      *ngIf="orgDomains?.length == 0"
    >
      <bit-no-items [icon]="domainIcon">
        <div slot="title">{{ "noDomains" | i18n }}</div>
        <div slot="description">{{ "noDomainsSubText" | i18n }}</div>
        <button
          slot="button"
          type="button"
          buttonType="secondary"
          bitButton
          (click)="addDomain()"
          [startIcon]="btnTextAddCreateFeatureFlag() ? null : 'bwi-plus'"
        >
          {{ (btnTextAddCreateFeatureFlag() ? "addDomain" : "newDomain") | i18n }}
        </button>
      </bit-no-items>
    </div>
  </ng-container>
</ng-container>
