<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>
      {{ "excludedDomainsDesc" | i18n }}
    </p>
    <bit-section *ngIf="!isLoading">
      <bit-section-header>
        <h2 bitTypography="h6">{{ "domainsTitle" | i18n }}</h2>
        <span bitTypography="body2" slot="end">{{
          excludedDomainsState.length + domainForms.value.length
        }}</span>
      </bit-section-header>
      <bit-item
        *ngFor="let domain of excludedDomainsState; let i = index; trackBy: trackByFunction"
      >
        <bit-item-content *ngIf="i < fieldsEditThreshold">
          <div id="excludedDomain{{ i }}">{{ domain }}</div>
        </bit-item-content>
        <button
          *ngIf="i < fieldsEditThreshold"
          label="{{ 'remove' | i18n }}"
          bitIconButton="bwi-minus-circle"
          buttonType="dangerGhost"
          size="small"
          slot="end"
          type="button"
          (click)="removeDomain(i)"
        ></button>
      </bit-item>
      <form [formGroup]="domainListForm">
        <bit-card
          formArrayName="domains"
          *ngFor="let domain of domainForms.controls; let i = index"
        >
          <bit-form-field disableMargin>
            <bit-label>{{ "websiteItemLabel" | i18n: i + fieldsEditThreshold + 1 }}</bit-label>
            <input
              bitInput
              #uriInput
              appInputVerbatim
              bitInput
              id="excludedDomain{{ i + fieldsEditThreshold }}"
              inputmode="url"
              name="excludedDomain{{ i + fieldsEditThreshold }}"
              type="text"
              (change)="fieldChange()"
              formControlName="{{ i }}"
            />
          </bit-form-field>
        </bit-card>
        <button
          bitLink
          class="tw-pt-2"
          type="button"
          linkType="primary"
          (click)="addNewDomain()"
          startIcon="bwi-plus-circle"
        >
          {{ "addDomain" | i18n }}
        </button>
      </form>
    </bit-section>
  </div>
  <popup-footer slot="footer">
    <button
      bitButton
      buttonType="primary"
      type="submit"
      [disabled]="dataIsPristine"
      (click)="saveChanges()"
    >
      {{ "save" | i18n }}
    </button>
    <button (click)="goBack()" bitButton type="button" buttonType="secondary">
      {{ "cancel" | i18n }}
    </button>
  </popup-footer>
</popup-page>
