<ng-container *ngIf="!inputBoxHostSvc">
  <div class="sky-input-group sky-phone-field" [@blockAnimationOnLoad]>
    <ng-container *ngTemplateOutlet="countryBtnTemplateRef"></ng-container>
    <ng-container *ngTemplateOutlet="inputTemplateRef"></ng-container>
    <ng-container *ngTemplateOutlet="buttonsInsetTemplateRef"></ng-container>
  </div>
</ng-container>

<ng-template #countryBtnTemplateRef>
  <div
    class="sky-input-group-btn sky-phone-field-country-btn"
    [attr.data-sky-test-iso2]="selectedCountry?.iso2"
    [attr.data-sky-test-name]="selectedCountry?.name"
  >
    <button
      aria-live="polite"
      class="sky-btn sky-btn-default"
      type="button"
      [attr.title]="
        ('skyux_phone_field_country_select_label' | skyLibResources) +
        ' ' +
        ('skyux_phone_field_country_selected_label'
          | skyLibResources: selectedCountry?.name)
      "
      [attr.aria-label]="
        ('skyux_phone_field_country_select_label' | skyLibResources) +
        ' ' +
        ('skyux_phone_field_country_selected_label'
          | skyLibResources: selectedCountry?.name)
      "
      [disabled]="countrySelectDisabled"
      (click)="toggleCountrySearch(true)"
    >
      <div
        class="sky-phone-field-flag iti__flag"
        [ngClass]="'iti__' + selectedCountry?.iso2"
      ></div>
    </button>
  </div>
</ng-template>

<ng-template #inputTemplateRef>
  <span
    *ngIf="phoneInputShown"
    class="sky-phone-field-container"
    [@.disabled]="
      inputBoxHostSvc &&
      (themeSvc?.settingsChange | async)?.currentSettings?.theme?.name ===
        'modern'
    "
    [@phoneInputAnimation]="phoneInputShown ? 'open' : 'closed'"
    (@phoneInputAnimation.done)="phoneInputAnimationEnd($event)"
  >
    <ng-content></ng-content>
  </span>
  <span
    *ngIf="countrySearchShown"
    class="sky-phone-field-container"
    [@.disabled]="
      inputBoxHostSvc &&
      (themeSvc?.settingsChange | async)?.currentSettings?.theme?.name ===
        'modern'
    "
    [@countrySearchAnimation]="countrySearchShown ? 'open' : 'closed'"
    (@countrySearchAnimation.done)="countrySearchAnimationEnd($event)"
  >
    <div class="sky-phone-field-country-search" [formGroup]="countrySearchForm">
      <sky-country-field
        formControlName="countrySearch"
        [defaultCountry]="defaultCountry"
        [hideSelectedCountryFlag]="true"
        [includePhoneInfo]="true"
        [supportedCountryISOs]="supportedCountryISOs"
        (selectedCountryChange)="onCountrySelected($event)"
      >
      </sky-country-field>
    </div>
  </span>
</ng-template>

<ng-template #buttonsInsetTemplateRef>
  <div
    *ngIf="countrySearchShown"
    class="sky-input-group-btn sky-input-box-btn-inset sky-search-item-dismiss"
  >
    <button
      class="sky-btn sky-phone-field-search-btn-dismiss"
      type="button"
      [attr.title]="
        'skyux_phone_field_country_search_dismiss' | skyLibResources
      "
      [ngClass]="{
        'sky-btn-default':
          (themeSvc?.settingsChange | async)?.currentSettings?.theme?.name ===
          'modern'
      }"
      (click)="toggleCountrySearch(false)"
    >
      <sky-icon *skyThemeIf="'default'" icon="chevron-circle-left" size="lg">
      </sky-icon>
      <sky-icon
        *skyThemeIf="'modern'"
        icon="double-chevron-left"
        iconType="skyux"
        size="2x"
      >
      </sky-icon>
    </button>
  </div>
</ng-template>
