<sky-input-box class="sky-margin-inline-lg theme-selector-input">
  <label class="sky-control-label" [for]="inputBoxSelect.id">Theme</label>
  <select
    #inputBoxSelect="skyId"
    skyId
    class="sky-theme-selector sky-form-control"
    [(ngModel)]="themeName"
  >
    <option value="default">Default</option>
    <option value="modern">Modern</option>
  </select>
</sky-input-box>
<sky-input-box class="sky-margin-inline-lg theme-selector-input">
  <label class="sky-control-label" [for]="inputBoxSelectMode.id">Mode</label>
  <select
    #inputBoxSelectMode="skyId"
    class="sky-theme-selector sky-form-control"
    skyId
    [disabled]="modeValues().length === 1"
    [(ngModel)]="themeMode"
  >
    @for (modeValue of modeValues(); track modeValue) {
      <option [value]="modeValue">
        {{ modeValue.charAt(0).toUpperCase() + modeValue.substring(1) }}
      </option>
    }
  </select>
</sky-input-box>

<sky-input-box class="sky-margin-inline-lg theme-selector-input">
  <label class="sky-control-label" [for]="inputBoxSelectSpacing.id"
    >Spacing</label
  >
  <select
    #inputBoxSelectSpacing="skyId"
    skyId
    class="sky-theme-selector sky-form-control"
    [disabled]="spacingValues().length === 1"
    [(ngModel)]="themeSpacing"
  >
    @for (spacingValue of spacingValues(); track spacingValue) {
      <option [value]="spacingValue">
        {{ spacingValue.charAt(0).toUpperCase() + spacingValue.substring(1) }}
      </option>
    }
  </select>
</sky-input-box>
<sky-checkbox
  labelText="Enable modern v2"
  [disabled]="themeName() === 'default'"
  [(ngModel)]="modernV2Enabled"
/>
