<form [formGroup]="formGroup">
  <fieldset class="c8y-fieldset">
    <legend>{{ 'Source' | translate }}</legend>
    <div class="form-group">
      <label
        class="c8y-radio radio-inline"
        title="{{ 'Upload file' | translate }}"
      >
        <input
          name="source"
          type="radio"
          value="file"
          formControlName="source"
        />
        <span></span>
        <span>{{ 'Upload file' | translate }}</span>
      </label>
      <label
        class="c8y-radio radio-inline m-l-8"
        title="{{ 'Paste text' | translate }}"
      >
        <input
          name="source"
          type="radio"
          value="text"
          formControlName="source"
        />
        <span></span>
        <span>
          {{ 'Paste text' | translate }}
        </span>
      </label>
      @if (isAiAvailable()) {
        <label
          class="c8y-radio radio-inline m-l-8"
          title="{{ 'Generate with AI' | translate }}"
        >
          <input
            name="source"
            type="radio"
            value="ai"
            formControlName="source"
          />
          <span></span>
          <div
            class="btn btn-ai btn-icon-dot btn-sm btn-ai-hint m-l-4 m-r-4"
            aria-hidden="true"
          >
            <span></span>
          </div>
          <span>
            {{ 'Generate with AI' | translate }}
          </span>
        </label>
      }
    </div>

    @switch (formGroup.get('source')?.value) {
      @case ('file') {
        <c8y-form-group class="m-b-24">
          <c8y-drop-area
            class="drop-area-sm"
            [icon]="'upload'"
            #dropArea
            [accept]="'.svg'"
            [maxAllowedFiles]="1"
            (dropped)="onSvgFileDropped($event)"
            [message]="'Browse or drop file here…' | translate"
          ></c8y-drop-area>
        </c8y-form-group>
      }
      @case ('text') {
        <c8y-form-group class="m-b-24">
          <textarea
            class="form-control"
            aria-label="{{ 'Paste SVG code here' | translate }}"
            id="svgCode"
            placeholder="{{ placeholderText }}"
            rows="6"
            formControlName="svgCode"
          ></textarea>
        </c8y-form-group>
        <button
          class="btn btn-default"
          (click)="applySvgCode()"
          translate
          [disabled]="!formGroup.get('svgCode')?.value?.trim()"
        >
          Apply
        </button>
      }
      @case ('ai') {
        @if (isAiAvailable()) {
          <c8y-agent-chat
            #agentChat
            [chatConfig]="chatConfig"
            [suggestions]="agentChat.isWelcoming() ? suggestions : []"
            [agent]="agent"
            [variables]="variables"
            [preprocessAgentMessage]="preprocessAgentMessage"
            [assistantMessageDisplayConfig]="assistantMessageDisplayConfig"
          ></c8y-agent-chat>
        }
      }
    }
  </fieldset>

  <div formGroupName="svgDisplaySettings">
    <fieldset class="c8y-fieldset">
      <legend>
        {{ 'Image display' | translate }}
      </legend>
      <c8y-form-group class="form-group-sm m-b-0">
        <c8y-list-group
          class="no-border-last p-b-16"
          role="list"
        >
          @for (displayOption of displayOptions; track displayOption.value) {
            <c8y-li role="listitem">
              <label class="c8y-radio">
                <input
                  type="radio"
                  formControlName="displayOption"
                  [value]="displayOption.value"
                />
                <span></span>
                <span class="l-h-1">
                  {{ displayOption.label | translate }}
                  <br />
                  <small class="text-muted">
                    {{ displayOption.description | translate }}
                  </small>
                </span>
              </label>
            </c8y-li>
          }
        </c8y-list-group>
      </c8y-form-group>
    </fieldset>
    @if (formGroup.get('svgDisplaySettings')?.get('displayOption')?.value === 'contain') {
      <fieldset class="c8y-fieldset">
        <legend>
          {{ 'Image alignment' | translate }}
        </legend>
        <div class="row">
          <div class="col-md-6">
            <c8y-form-group class="form-group-sm">
              <label>{{ 'Horizontal`alignment`' | translate }}</label>
              <div class="c8y-select-wrapper">
                <select
                  class="form-control"
                  formControlName="horizontalAlignment"
                >
                  @for (option of horizontalAlignmentOptions; track option.value) {
                    <option [ngValue]="option.value">
                      {{ option.label | translate }}
                    </option>
                  }
                </select>
              </div>
            </c8y-form-group>
          </div>
          <div class="col-md-6">
            <c8y-form-group class="form-group-sm">
              <label>{{ 'Vertical`alignment`' | translate }}</label>
              <div class="c8y-select-wrapper">
                <select
                  class="form-control"
                  formControlName="verticalAlignment"
                >
                  @for (option of verticalAlignmentOptions; track option.value) {
                    <option [ngValue]="option.value">
                      {{ option.label | translate }}
                    </option>
                  }
                </select>
              </div>
            </c8y-form-group>
          </div>
        </div>
      </fieldset>
    }
  </div>
</form>