@if (!inputBoxHostSvc) {
  <ng-container *ngTemplateOutlet="inputTemplateRef" />
}

<ng-template #inputTemplateRef>
  <span
    class="sky-country-field-container"
    [ngClass]="{
      'sky-country-field-disabled': disabled
    }"
  >
    <sky-autocomplete
      [ariaLabelledBy]="inputId"
      [data]="countries"
      [propertiesToSearch]="['name', 'iso2']"
      [searchResultTemplate]="countrySearchResultTemplate"
      [searchTextMinimumCharacters]="searchTextMinimumCharacters"
      (selectionChange)="onCountrySelected($event)"
    >
      <div
        class="sky-country-field-input"
        [ngClass]="{
          'sky-country-field-input-with-flag':
            selectedCountry && selectedCountry.iso2 && !hideSelectedCountryFlag
        }"
      >
        @if (
          selectedCountry && selectedCountry.iso2 && !hideSelectedCountryFlag
        ) {
          <div class="sky-country-field-flag">
            <div
              class="iti__flag"
              [ngClass]="'iti__' + selectedCountry.iso2.toLowerCase()"
            ></div>
          </div>
        }
        <textarea
          class="sky-form-control"
          name="selectedCountry"
          rows="1"
          skyAutocomplete
          [attr.aria-describedby]="ariaDescribedBy | async"
          [attr.id]="inputId"
          [autocompleteAttribute]="autocompleteAttribute"
          [formControl]="countrySearchFormControl"
          [placeholder]="
            context?.showPlaceholderText || currentTheme === 'default'
              ? ('skyux_country_field_search_placeholder' | skyLibResources)
              : ''
          "
          (blur)="onAutocompleteBlur()"
        ></textarea>
      </div>
    </sky-autocomplete>
  </span>
</ng-template>

<ng-template #countrySearchResultTemplate let-item="item">
  <div class="sky-country-field-search-result-flag">
    <div [ngClass]="'iti__flag iti__' + item.iso2.toLowerCase()"></div>
  </div>
  <div class="sky-country-field-search-result-info">
    {{ item.name }}
    @if (includePhoneInfo) {
      <span
        class="sky-font-deemphasized sky-country-field-search-result-dial-code"
      >
        {{ item.dialCode }}
      </span>
    }
  </div>
</ng-template>

<!-- This template should only be used in modern theme input boxes. -->
<ng-template #searchIconTemplateRef>
  <div class="sky-input-group-icon sky-input-box-icon-inset">
    <sky-icon icon="search" />
  </div>
</ng-template>