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

  <div class="tw-bg-background-alt">
    <p>
      {{
        accountSwitcherEnabled ? ("excludedDomainsDescAlt" | i18n) : ("excludedDomainsDesc" | i18n)
      }}
    </p>
    <bit-section *ngIf="!isLoading">
      <bit-section-header>
        <h2 bitTypography="h6">{{ "domainsTitle" | i18n }}</h2>
        <span bitTypography="body2" slot="end">{{ excludedDomainsState?.length || 0 }}</span>
      </bit-section-header>

      <ng-container *ngIf="excludedDomainsState">
        <bit-item
          *ngFor="let domain of excludedDomainsState; let i = index; trackBy: trackByFunction"
        >
          <bit-item-content>
            <bit-label *ngIf="i >= fieldsEditThreshold">{{
              "websiteItemLabel" | i18n: i + 1
            }}</bit-label>
            <input
              *ngIf="i >= fieldsEditThreshold"
              #uriInput
              appInputVerbatim
              bitInput
              id="excludedDomain{{ i }}"
              inputmode="url"
              name="excludedDomain{{ i }}"
              type="text"
              (change)="fieldChange()"
              [(ngModel)]="excludedDomainsState[i]"
            />
            <div id="excludedDomain{{ i }}" *ngIf="i < fieldsEditThreshold">{{ domain }}</div>
          </bit-item-content>
          <button
            *ngIf="i < fieldsEditThreshold"
            appA11yTitle="{{ 'remove' | i18n }}"
            bitIconButton="bwi-minus-circle"
            buttonType="danger"
            size="small"
            slot="end"
            type="button"
            (click)="removeDomain(i)"
          ></button>
        </bit-item>
      </ng-container>
      <button bitLink class="tw-pt-2" type="button" linkType="primary" (click)="addNewDomain()">
        <i class="bwi bwi-plus-circle bwi-fw" aria-hidden="true"></i> {{ "addDomain" | i18n }}
      </button>
    </bit-section>
  </div>
  <popup-footer slot="footer">
    <button
      bitButton
      buttonType="primary"
      type="submit"
      [disabled]="dataIsPristine"
      (click)="saveChanges()"
    >
      {{ "save" | i18n }}
    </button>
  </popup-footer>
</popup-page>
