<div [formGroup]="formGroup">
  <fieldset class="c8y-fieldset">
    <legend>{{ 'Source' | translate }}</legend>
    <div class="form-group">
      <label
        class="c8y-radio radio-inline"
        title="{{ 'Write Markdown' | translate }}"
      >
        <input
          name="uploadChoice"
          type="radio"
          [value]="MarkdownSourceType.WRITE"
          formControlName="uploadChoice"
          (change)="onChange(MarkdownSourceType.WRITE)"
        />
        <span></span>
        <span>{{ 'Write Markdown' | translate }}</span>
      </label>
      <label
        class="c8y-radio radio-inline m-l-8"
        title="{{ 'Upload a binary' | translate }}"
      >
        <input
          name="uploadChoice"
          type="radio"
          [value]="MarkdownSourceType.UPLOAD"
          formControlName="uploadChoice"
          (change)="onChange(MarkdownSourceType.UPLOAD)"
        />
        <span></span>
        <span>{{ 'Upload a binary' | translate }}</span>
      </label>
      <label
        class="c8y-radio radio-inline m-l-8"
        title="{{ 'Provide a file path' | translate }}"
      >
        <input
          name="uploadChoice"
          type="radio"
          [value]="MarkdownSourceType.URL"
          formControlName="uploadChoice"
          (change)="onChange(MarkdownSourceType.URL)"
        />
        <span></span>
        <span>{{ 'Provide a file path' | translate }}</span>
      </label>
    </div>
    @switch (uploadChoice) {
      @case (MarkdownSourceType.WRITE) {
        <c8y-editor
          class="d-block"
          style="height: 300px"
          [ngModel]="editorContent"
          (ngModelChange)="onEditorChange($event)"
          [ngModelOptions]="{ standalone: true }"
          [editorOptions]="{
            language: 'markdown',
            tabSize: 2,
            insertSpaces: true,
            minimap: { enabled: false },
            wordWrap: 'on'
          }"
        ></c8y-editor>
      }
      @case (MarkdownSourceType.UPLOAD) {
        <c8y-form-group class="m-b-24">
          <c8y-drop-area
            class="drop-area-sm"
            [title]="'Drop file or click to browse' | translate"
            formControlName="droppedFile"
            [maxAllowedFiles]="1"
            [accept]="'md'"
          ></c8y-drop-area>
        </c8y-form-group>
      }
      @case (MarkdownSourceType.URL) {
        <c8y-form-group class="m-b-24">
          <div class="input-group">
            <span class="input-group-addon">
              <i c8yIcon="globe"></i>
            </span>
            <input
              class="form-control"
              placeholder="{{ 'e.g.' | translate }} http://example.com/text.md"
              type="text"
              formControlName="contentUrl"
            />
          </div>
        </c8y-form-group>
      }
    }
  </fieldset>
</div>

<ng-template #markdownPreview>
  @if (previewMarkdown$ | async; as previewMarkdown) {
    <div
      class="p-16 p-t-0 markdown-content fit-h overflow-auto"
      [innerHTML]="previewMarkdown | markdownToHtml | async"
    ></div>
  } @else {
    <div class="fit-h d-flex d-col j-c-center a-i-center">
      <c8y-ui-empty-state
        [icon]="'file-text'"
        [title]="'No content to preview' | translate"
        [subtitle]="
          'Write Markdown, upload a file, or provide a URL to see the preview' | translate
        "
        [horizontal]="false"
      ></c8y-ui-empty-state>
    </div>
  }
</ng-template>