<sky-modal [headingText]="title">
  <sky-modal-content>
    <form [formGroup]="formGroup" (submit)="modalInstance.save()">
      @for (field of fields; track field) {
        <ng-container class="row">
          @switch (title) {
            @case ('Color') {
              <div class="sky-margin-stacked-sm">
                <label class="sky-control-label" [for]="input.id">{{
                  field
                }}</label>
                <sky-colorpicker #colorPicker>
                  <input
                    #input="skyId"
                    skyId
                    type="text"
                    [formControlName]="field"
                    [skyColorpickerInput]="colorPicker"
                  />
                </sky-colorpicker>
              </div>
            }
            @default {
              <sky-input-box [labelText]="field">
                <input type="text" [formControlName]="field" />
              </sky-input-box>
            }
          }
        </ng-container>
      }
    </form>
  </sky-modal-content>
  <sky-modal-footer>
    <button
      class="sky-btn sky-btn-primary sky-margin-inline-sm"
      type="button"
      (click)="modalInstance.save()"
    >
      Save
    </button>
    <button
      class="sky-btn sky-btn-link"
      type="button"
      (click)="modalInstance.close()"
    >
      Close
    </button>
  </sky-modal-footer>
</sky-modal>
