<div class="sky-country-field-visual">
  <h2 class="sky-section-heading">Standard country field</h2>

  <div class="screenshot-country-field" id="screenshot-country-field-empty">
    <form>
      <sky-country-field
        name="countryField"
        required
        [disabled]="disableFields"
        [(ngModel)]="countryData"
      />
    </form>
  </div>

  @if (countryData) {
    <p>Selected Country is {{ countryData.name }}</p>
  }
</div>

<div class="sky-country-field-visual">
  <h2 class="sky-section-heading">
    Reactive country field with default country
  </h2>

  <form
    class="screenshot-country-field"
    id="screenshot-country-field-populated"
    [formGroup]="countryForm"
  >
    <sky-country-field
      formControlName="countryControl"
      [defaultCountry]="'AU'"
    />
  </form>

  @if (countryControl.value) {
    <p>Selected Country is {{ countryControl.value.name }}</p>
  }

  <button
    class="sky-btn sky-btn-primary"
    id="disable-toggle"
    type="button"
    (click)="toggleDisabledStates()"
  >
    Toggle Disabled States
  </button>

  <button
    class="sky-btn sky-btn-primary"
    type="button"
    (click)="toggleGermany()"
  >
    Set Germany
  </button>
</div>

<div class="sky-country-field-visual">
  <h2 class="sky-section-heading">Input box</h2>

  <div
    class="screenshot-country-field"
    id="screenshot-country-field-empty-input-box"
  >
    <form>
      <sky-input-box
        hintText="Here's some hint text."
        [disabled]="disableFields"
      >
        <label class="sky-control-label"> Country </label>
        <sky-country-field
          name="countryField"
          required
          [disabled]="disableFields"
        />
      </sky-input-box>
    </form>
  </div>

  @if (countryData) {
    <p>Selected Country is {{ countryData.name }}</p>
  }
</div>

<div class="sky-country-field-visual">
  <h2 class="sky-section-heading">Input box with default country</h2>

  <form
    class="screenshot-country-field"
    id="screenshot-country-field-populated-input-box"
  >
    <sky-input-box [disabled]="disableFields">
      <label class="sky-control-label"> Country </label>
      <sky-country-field
        name="countryFieldInputBox"
        [defaultCountry]="'AU'"
        [disabled]="disableFields"
        [(ngModel)]="countryDataInputBox"
      />
    </sky-input-box>
  </form>
</div>

<div class="sky-country-field-visual">
  <h2 class="sky-section-heading">
    Input box with default country and no label
  </h2>

  <form
    class="screenshot-country-field"
    id="screenshot-country-field-populated-input-box-no-label"
  >
    <sky-input-box [disabled]="disableFields">
      <sky-country-field
        name="countryFieldInputBoxNoLabel"
        [defaultCountry]="'AU'"
        [disabled]="disableFields"
        [(ngModel)]="countryDataInputBox"
      />
    </sky-input-box>
  </form>
</div>
