<DModalBody @title="discourse_ai.ai_helper.title">
  <span>{{i18n "discourse_ai.ai_helper.description"}}</span>

  <ComboBox
    @value={{this.selected}}
    @content={{this.helperOptions}}
    @onChange={{action this.updateSelected}}
    @valueProperty="value"
    @class="ai-helper-mode"
  />

  <div class="text-preview">
    <Textarea
      @value={{this.composedMessage}}
      disabled="true"
      class="preview-area"
    />
  </div>

  <div class="selection-hint">{{i18n
      "discourse_ai.ai_helper.selection_hint"
    }}</div>

  <div class="text-preview">
    <ConditionalLoadingSpinner @condition={{this.loading}} />

    {{#unless this.loading}}
      {{#if this.selectingTopicTitle}}
        <div class="radios">
          {{#each this.generatedTitlesSuggestions as |title index|}}
            <label class="radio-label" for="title-suggestion-{{index}}">
              <RadioButton
                @id="title-suggestion-{{index}}"
                @name="title-suggestion"
                @value={{title}}
                @selection={{this.selectedTitle}}
              />
              <b>{{title}}</b>
            </label>
          {{/each}}
        </div>
      {{else if this.proofreadingText}}
        {{html-safe this.proofreadDiff}}
      {{else if this.translatingText}}
        <Textarea
          @value={{this.translatedSuggestion}}
          disabled="true"
          class="preview-area"
        />
      {{/if}}
    {{/unless}}
  </div>

</DModalBody>

<div class="modal-footer">
  {{#if this.canSave}}
    <DButton
      @class="btn-primary create"
      @action={{this.applySuggestion}}
      @label="save"
    />
    <DModalCancel @close={{route-action "closeModal"}} />
  {{else}}
    <div class="ai-helper-waiting-selection">{{i18n
        "discourse_ai.modals.select_option"
      }}</div>
  {{/if}}
</div>