<h2 class="sky-font-heading-2">Standard phone field</h2>

<div id="screenshot-phone-field" class="phone-field-playground-instance">
  <sky-phone-field returnFormat="international" [allowExtensions]="false">
    <input skyPhoneFieldInput [(ngModel)]="phoneNumber" />
  </sky-phone-field>
</div>

@if (phoneNumber) {
  <p>Entered phone number is {{ phoneNumber }}</p>
}

<h2 class="sky-font-heading-2">Reactive phone field with default country</h2>

<form
  id="screenshot-phone-field-default"
  class="phone-field-playground-instance"
  [formGroup]="phoneForm"
>
  <sky-phone-field [defaultCountry]="'US'" [selectedCountry]="selectedCountry">
    <input formControlName="phoneControl" skyPhoneFieldInput />
  </sky-phone-field>
</form>

@if (phoneControl.value) {
  <p>Entered phone number is {{ phoneControl.value }}</p>
}

<button
  type="button"
  class="sky-btn sky-btn-primary"
  (click)="switchToAustralia()"
>
  Switch to AU
</button>

<h2 class="sky-font-heading-2">Phone field inside input box</h2>

<div
  id="screenshot-phone-field-input-box"
  class="phone-field-playground-instance"
>
  <div
    id="screenshot-phone-field-input-box-easy"
    class="phone-field-playground-instance"
  >
    <sky-input-box
      hintText="We'll call this number when it's your birthday."
      labelText="Input box (easy)"
      mode="detect"
    >
      <sky-phone-field>
        <input skyPhoneFieldInput [(ngModel)]="phoneNumberInputBox" />
      </sky-phone-field>
    </sky-input-box>
  </div>

  <input type="text" />
</div>
