<div class="page-spacing widget-form-page">
  <nsi-back-button link="..">{{ 'search.widgets.form.actions.back' | translate }}</nsi-back-button>
  <div class="page-header">
    <div>
      <div class="page-title">{{ savedWidget?.name }}</div>
      <div class="page-description">{{ 'search.widgets.form.description' | translate }}</div>
    </div>
    <div class="action-container">
      <pa-button
        kind="primary"
        [disabled]="isNotModified"
        (click)="saveChanges()">
        {{ 'search.widgets.form.actions.save' | translate }}
      </pa-button>
      <pa-button
        icon="code"
        iconAndText
        [disabled]="!snippets"
        (click)="embedWidget()">
        {{ 'search.widgets.form.actions.embed-widget' | translate }}
      </pa-button>
      <div>
        <pa-button
          icon="more-vertical"
          aspect="basic"
          [paPopup]="menu">
          {{ 'search.widgets.form.actions.more' | translate }}
        </pa-button>
        <pa-dropdown #menu>
          <pa-option (selectOption)="rename()">
            {{ 'search.widgets.action.rename' | translate }}
          </pa-option>
          <pa-option (selectOption)="duplicateAsNew()">
            {{ 'search.widgets.action.duplicate' | translate }}
          </pa-option>
          <pa-option
            destructive
            (selectOption)="delete()">
            {{ 'search.widgets.action.delete' | translate }}
          </pa-option>
        </pa-dropdown>
      </div>
    </div>
  </div>

  <div class="widget-form-page-body">
    <div class="widget-form-container">
      <pa-accordion-item
        #widgetOptions
        id="widget-options"
        [(expanded)]="widgetFormExpanded"
        [itemTitle]="'search.widgets.form.widget-options.section-title' | translate"
        [description]="'search.widgets.form.widget-options.section-description' | translate">
        <pa-accordion-item-body>
          @if (!(inArag | async)) {
            <form [formGroup]="form">
              <div class="config-form-field">
                <pa-toggle
                  formControlName="customizePlaceholder"
                  withBackground
                  spaceBetweenLabelAndToggle
                  (valueChange)="updateWidgetOptionsHeight()">
                  <span class="toggle-label">
                    {{ 'search.widgets.form.widget-options.placeholder.toggle-label' | translate }}
                  </span>
                </pa-toggle>
                <div class="config-form-help">
                  {{ 'search.widgets.form.widget-options.placeholder.toggle-description' | translate }}
                </div>
                <div
                  class="extra-fields"
                  [class.visible]="customizePlaceholderEnabled">
                  <pa-input formControlName="placeholder">
                    {{ 'search.widgets.form.widget-options.placeholder.input-label' | translate }}
                  </pa-input>
                </div>
              </div>
              <div class="config-form-field">
                <pa-toggle
                  formControlName="customizeChatPlaceholder"
                  withBackground
                  spaceBetweenLabelAndToggle
                  (valueChange)="updateWidgetOptionsHeight()">
                  <span class="toggle-label">
                    {{ 'search.widgets.form.widget-options.chat-placeholder.toggle-label' | translate }}
                  </span>
                </pa-toggle>
                <div class="config-form-help">
                  {{ 'search.widgets.form.widget-options.chat-placeholder.toggle-description' | translate }}
                </div>
                <div
                  class="extra-fields"
                  [class.visible]="customizeChatPlaceholderEnabled">
                  <pa-input
                    formControlName="chatPlaceholder"
                    help="search.widgets.form.widget-options.chat-placeholder.input-help">
                    {{ 'search.widgets.form.widget-options.placeholder.input-label' | translate }}
                  </pa-input>
                </div>
              </div>
              <div class="config-form-field">
                <pa-toggle
                  formControlName="customizeNotEnoughDataMessage"
                  withBackground
                  spaceBetweenLabelAndToggle
                  (valueChange)="updateWidgetOptionsHeight()">
                  <span class="toggle-label">
                    {{ 'search.widgets.form.widget-options.customize-insufficient-data.toggle-label' | translate }}
                  </span>
                </pa-toggle>
                <div class="config-form-help">
                  {{ 'search.widgets.form.widget-options.customize-insufficient-data.toggle-description' | translate }}
                </div>
                <div
                  class="extra-fields"
                  [class.visible]="customizeNotEnoughDataEnabled">
                  <pa-textarea
                    externalLabel
                    acceptHtmlTags
                    resizable
                    formControlName="notEnoughDataMessage"
                    (resizing)="updateWidgetOptionsHeight()">
                    {{ 'search.widgets.form.widget-options.customize-insufficient-data.input-label' | translate }}
                  </pa-textarea>
                </div>
              </div>
              <div class="config-form-field">
                <div class="title-xs">{{ 'search.widgets.form.widget-options.style.title' | translate }}</div>
                <pa-radio-group
                  formControlName="widgetMode"
                  (valueChange)="onWidgetModeChange($event)">
                  <pa-radio value="page">
                    {{ 'search.widgets.form.widget-options.style.page' | translate }}
                  </pa-radio>
                  <pa-radio value="chat">
                    {{ 'search.widgets.form.widget-options.style.chat' | translate }}
                  </pa-radio>
                  <pa-radio value="popup">
                    {{ 'search.widgets.form.widget-options.style.popup' | translate }}
                  </pa-radio>
                  <pa-radio value="floating-chat">
                    {{ 'search.widgets.form.widget-options.style.floating-chat' | translate }}
                  </pa-radio>
                </pa-radio-group>
              </div>
              @if (floatingChatStyleEnabled) {
                <div class="config-form-field">
                  <div class="title-xs">{{ 'search.widgets.form.widget-options.fab.position.title' | translate }}</div>
                  <div class="fab-option">
                    <span class="body-s">{{ 'search.widgets.form.widget-options.fab.position.help' | translate }}</span>
                    <pa-radio-group formControlName="fabPosition">
                      <pa-radio value="bottom-right">
                        {{ 'search.widgets.form.widget-options.fab.position-bottom-right' | translate }}
                      </pa-radio>
                      <pa-radio value="bottom-left">
                        {{ 'search.widgets.form.widget-options.fab.position-bottom-left' | translate }}
                      </pa-radio>
                    </pa-radio-group>
                  </div>
                </div>
                <div class="config-form-field">
                  <div class="title-xs">{{ 'search.widgets.form.widget-options.fab.size.title' | translate }}</div>
                  <div class="fab-option">
                    <span class="body-s">{{ 'search.widgets.form.widget-options.fab.size.help' | translate }}</span>
                    <pa-radio-group formControlName="fabSize">
                      <pa-radio value="small">
                        {{ 'search.widgets.form.widget-options.fab.size-small' | translate }}
                      </pa-radio>
                      <pa-radio value="medium">
                        {{ 'search.widgets.form.widget-options.fab.size-medium' | translate }}
                      </pa-radio>
                      <pa-radio value="large">
                        {{ 'search.widgets.form.widget-options.fab.size-large' | translate }}
                      </pa-radio>
                    </pa-radio-group>
                  </div>
                </div>
                <div class="config-form-field">
                  <pa-input
                    type="number"
                    formControlName="panelWidth"
                    [help]="'search.widgets.form.widget-options.fab.panel-width.help' | translate"
                    min="0">
                    {{ 'search.widgets.form.widget-options.fab.panel-width.label' | translate }}
                  </pa-input>
                </div>
                <div class="config-form-field">
                  <pa-input
                    type="number"
                    formControlName="panelHeight"
                    [help]="'search.widgets.form.widget-options.fab.panel-height.help' | translate"
                    min="0">
                    {{ 'search.widgets.form.widget-options.fab.panel-height.label' | translate }}
                  </pa-input>
                </div>
                <div class="config-form-field">
                  <pa-input
                    formControlName="fabOffsetBottom"
                    type="number"
                    [help]="'search.widgets.form.widget-options.fab.fab-offset-bottom.help' | translate"
                    min="0">
                    {{ 'search.widgets.form.widget-options.fab.fab-offset-bottom.label' | translate }}
                  </pa-input>
                </div>
                <div class="config-form-field">
                  <pa-input
                    formControlName="fabOffsetSide"
                    type="number"
                    [help]="'search.widgets.form.widget-options.fab.fab-offset-side.help' | translate"
                    min="0">
                    {{ 'search.widgets.form.widget-options.fab.fab-offset-side.label' | translate }}
                  </pa-input>
                </div>
              }
              <div class="config-form-field">
                <div class="title-xs">{{ 'search.widgets.form.widget-options.theme.title' | translate }}</div>
                <pa-radio-group formControlName="darkMode">
                  <pa-radio value="light">
                    {{ 'search.widgets.form.widget-options.theme.light' | translate }}
                  </pa-radio>
                  <pa-radio
                    value="dark"
                    [hidden]="popupStyleEnabled">
                    {{ 'search.widgets.form.widget-options.theme.dark' | translate }}
                  </pa-radio>
                </pa-radio-group>
              </div>
              <div class="config-form-field">
                <pa-toggle
                  formControlName="noChatHistory"
                  withBackground
                  spaceBetweenLabelAndToggle>
                  <span class="toggle-label">
                    {{ 'search.widgets.form.widget-options.no-chat-history.toggle-label' | translate }}
                  </span>
                </pa-toggle>
                <div class="config-form-help">
                  {{ 'search.widgets.form.widget-options.no-chat-history.toggle-description' | translate }}
                </div>
              </div>
              <div class="config-form-field">
                <pa-toggle
                  formControlName="persistChatHistory"
                  withBackground
                  spaceBetweenLabelAndToggle>
                  <span class="toggle-label">
                    {{ 'search.widgets.form.widget-options.persist-chat-history.toggle-label' | translate }}
                  </span>
                </pa-toggle>
                <div class="config-form-help">
                  {{ 'search.widgets.form.widget-options.persist-chat-history.toggle-description' | translate }}
                </div>
              </div>
              <div class="config-form-field">
                <pa-toggle
                  formControlName="hideLogo"
                  withBackground
                  spaceBetweenLabelAndToggle>
                  <span class="toggle-label">
                    {{ 'search.widgets.form.widget-options.hide-logo.toggle-label' | translate }}
                  </span>
                </pa-toggle>
                <div class="config-form-help">
                  {{ 'search.widgets.form.widget-options.hide-logo.toggle-description' | translate }}
                </div>
              </div>
              <div class="config-form-field">
                <pa-toggle
                  formControlName="permalink"
                  withBackground
                  spaceBetweenLabelAndToggle
                  (valueChange)="onNavigationChange({ permalink: $event })">
                  <span class="toggle-label">
                    {{ 'search.widgets.form.widget-options.permalinks.toggle-label' | translate }}
                  </span>
                </pa-toggle>
                <div class="config-form-help">
                  {{ 'search.widgets.form.widget-options.permalinks.toggle-description' | translate }}
                </div>
              </div>
              <div class="config-form-field">
                <pa-toggle
                  formControlName="displaySearchButton"
                  withBackground
                  spaceBetweenLabelAndToggle>
                  <span class="toggle-label">
                    {{ 'search.widgets.form.widget-options.displaySearchButton.toggle-label' | translate }}
                  </span>
                </pa-toggle>
              </div>
              <div class="config-form-field">
                <pa-toggle
                  formControlName="navigateToLink"
                  withBackground
                  spaceBetweenLabelAndToggle
                  (valueChange)="onNavigationChange({ navigateToLink: $event })">
                  <span class="toggle-label">
                    {{ 'search.widgets.form.widget-options.navigate-to-link.toggle-label' | translate }}
                  </span>
                </pa-toggle>
                <div class="config-form-help">
                  {{ 'search.widgets.form.widget-options.navigate-to-link.toggle-description' | translate }}
                </div>
              </div>
              <div class="config-form-field">
                <pa-toggle
                  formControlName="navigateToFile"
                  withBackground
                  spaceBetweenLabelAndToggle
                  (valueChange)="onNavigationChange({ navigateToFile: $event })">
                  <span class="toggle-label">
                    {{ 'search.widgets.form.widget-options.navigate-to-files.toggle-label' | translate }}
                  </span>
                </pa-toggle>
                <div class="config-form-help">
                  {{ 'search.widgets.form.widget-options.navigate-to-files.toggle-description' | translate }}
                </div>
              </div>
              <div class="config-form-field">
                <pa-toggle
                  formControlName="navigateToOriginURL"
                  withBackground
                  spaceBetweenLabelAndToggle
                  (valueChange)="onNavigationChange({ navigateToOriginURL: $event })">
                  <span class="toggle-label">
                    {{ 'search.widgets.form.widget-options.navigate-to-origin.toggle-label' | translate }}
                  </span>
                </pa-toggle>
                <div class="config-form-help">
                  {{ 'search.widgets.form.widget-options.navigate-to-origin.toggle-description' | translate }}
                </div>
              </div>
              <div class="config-form-field">
                <pa-toggle
                  formControlName="openNewTab"
                  withBackground
                  spaceBetweenLabelAndToggle>
                  <span class="toggle-label">
                    {{ 'search.widgets.form.widget-options.open-new-tab.toggle-label' | translate }}
                  </span>
                </pa-toggle>
                <div class="config-form-help">
                  {{ 'search.widgets.form.widget-options.open-new-tab.toggle-description' | translate }}
                  @if (openNewTabDisabled) {
                    <div>{{ 'search.widgets.form.widget-options.open-new-tab.toggle-disabled' | translate }}</div>
                  }
                </div>
              </div>
              <div class="config-form-field">
                <pa-toggle
                  formControlName="hideDownload"
                  withBackground
                  spaceBetweenLabelAndToggle
                  (valueChange)="updateWidgetOptionsHeight()">
                  <span class="toggle-label">
                    {{ 'search.widgets.form.widget-options.hide-download.toggle-label' | translate }}
                  </span>
                </pa-toggle>
              </div>
              <div class="config-form-field">
                <pa-input
                  formControlName="lang"
                  [help]="'search.widgets.form.widget-options.lang.help' | translate">
                  {{ 'search.widgets.form.widget-options.lang.label' | translate }}
                </pa-input>
              </div>
              @if (isSpeechEnabled | async) {
                <div class="config-form-field">
                  <pa-toggle
                    formControlName="speech"
                    withBackground
                    spaceBetweenLabelAndToggle
                    (valueChange)="updateSpeechSynthesis($event)">
                    <span class="toggle-label">
                      {{ 'search.widgets.form.widget-options.speech.toggle-label' | translate }}
                      <nsi-badge kind="tertiary">EXPERIMENTAL</nsi-badge>
                    </span>
                  </pa-toggle>
                  <div class="config-form-help">
                    {{ 'search.widgets.form.widget-options.speech.toggle-description' | translate }}
                  </div>
                </div>
                <div class="config-form-field">
                  <pa-toggle
                    formControlName="speechSynthesis"
                    withBackground
                    spaceBetweenLabelAndToggle>
                    <span class="toggle-label">
                      {{ 'search.widgets.form.widget-options.speech-synthesis.toggle-label' | translate }}
                      <nsi-badge kind="tertiary">EXPERIMENTAL</nsi-badge>
                    </span>
                  </pa-toggle>
                  <div class="config-form-help">
                    {{ 'search.widgets.form.widget-options.speech-synthesis.toggle-description' | translate }}
                  </div>
                </div>
              }
              <div class="config-form-field">
                <div class="title-xs">{{ 'search.widgets.form.widget-options.feedback.title' | translate }}</div>
                <div class="config-form-help">
                  {{ 'search.widgets.form.widget-options.feedback.description' | translate }}
                </div>
                <pa-radio-group formControlName="feedback">
                  <pa-radio value="none">
                    {{ 'search.widgets.form.widget-options.feedback.none' | translate }}
                  </pa-radio>
                  <pa-radio
                    value="answer"
                    noEllipsis="true">
                    {{ 'search.widgets.form.widget-options.feedback.answer' | translate }}
                  </pa-radio>
                  <pa-radio
                    value="answerAndResults"
                    noEllipsis="true">
                    {{ 'search.widgets.form.widget-options.feedback.answer-and-results' | translate }}
                  </pa-radio>
                </pa-radio-group>
              </div>
              <div class="config-form-field">
                <pa-toggle
                  formControlName="customizeCopyDisclaimer"
                  withBackground
                  spaceBetweenLabelAndToggle
                  (valueChange)="updateWidgetOptionsHeight()">
                  <span class="toggle-label">
                    {{ 'search.widgets.form.widget-options.copy-disclaimer.toggle-label' | translate }}
                  </span>
                </pa-toggle>
                <div class="config-form-help">
                  {{ 'search.widgets.form.widget-options.copy-disclaimer.toggle-description' | translate }}
                </div>
                <div
                  class="extra-fields"
                  [class.visible]="customizeCopyDisclaimerEnabled">
                  <pa-input formControlName="copyDisclaimer">
                    {{ 'search.widgets.form.widget-options.copy-disclaimer.input-label' | translate }}
                  </pa-input>
                </div>
              </div>
              <div class="config-form-field">
                <pa-toggle
                  formControlName="customizeTextBlocksVisibility"
                  withBackground
                  spaceBetweenLabelAndToggle
                  (valueChange)="updateWidgetOptionsHeight()">
                  <span class="toggle-label">
                    {{ 'search.widgets.form.widget-options.customize-text-blocks-visibility.toggle-label' | translate }}
                  </span>
                </pa-toggle>
                <div class="config-form-help">
                  {{
                    'search.widgets.form.widget-options.customize-text-blocks-visibility.toggle-description' | translate
                  }}
                </div>
                <div
                  class="extra-fields"
                  [class.visible]="customizeTextBlocksVisibilityEnabled">
                  <pa-radio-group formControlName="textBlocksVisibility">
                    <pa-radio value="expanded">
                      {{ 'search.widgets.form.widget-options.customize-text-blocks-visibility.expanded' | translate }}
                    </pa-radio>
                    <pa-radio value="collapsed">
                      {{ 'search.widgets.form.widget-options.customize-text-blocks-visibility.collapsed' | translate }}
                    </pa-radio>
                  </pa-radio-group>
                </div>
              </div>
              <div class="config-form-field">
                <pa-toggle
                  formControlName="customizeCitationVisibility"
                  withBackground
                  spaceBetweenLabelAndToggle
                  (valueChange)="updateWidgetOptionsHeight()">
                  <span class="toggle-label">
                    {{ 'search.widgets.form.widget-options.customize-citation-visibility.toggle-label' | translate }}
                  </span>
                </pa-toggle>
                <div class="config-form-help">
                  {{
                    'search.widgets.form.widget-options.customize-citation-visibility.toggle-description' | translate
                  }}
                </div>
                <div
                  class="extra-fields"
                  [class.visible]="customizeCitationVisibilityEnabled">
                  <pa-radio-group formControlName="citationVisibility">
                    <pa-radio value="expanded">
                      {{ 'search.widgets.form.widget-options.customize-citation-visibility.expanded' | translate }}
                    </pa-radio>
                    <pa-radio value="collapsed">
                      {{ 'search.widgets.form.widget-options.customize-citation-visibility.collapsed' | translate }}
                    </pa-radio>
                  </pa-radio-group>
                </div>
              </div>
            </form>
          } @else {
            <form [formGroup]="raoForm">
              <div class="config-form-field">
                <div class="title-xs">{{ 'search.widgets.form.widget-options.workflow.title' | translate }}</div>
                <pa-select
                  formControlName="workflow"
                  [options]="(workflows | async) || []"></pa-select>
              </div>
              <div class="config-form-field">
                <div class="title-xs">{{ 'search.widgets.form.widget-options.theme.title' | translate }}</div>
                <pa-radio-group formControlName="darkMode">
                  <pa-radio value="light">
                    {{ 'search.widgets.form.widget-options.theme.light' | translate }}
                  </pa-radio>
                  <pa-radio
                    value="dark"
                    [hidden]="popupStyleEnabled">
                    {{ 'search.widgets.form.widget-options.theme.dark' | translate }}
                  </pa-radio>
                </pa-radio-group>
              </div>
            </form>
          }
        </pa-accordion-item-body>
      </pa-accordion-item>

      @if (!(inArag | async)) {
        <stf-search-configuration
          mainTitle="search.widgets.form.search-config-title"
          bottomSectionStyle="padding-bottom:var(--app-layout-padding-bottom)"
          [onlySupportedConfigs]="true"
          (configUpdate)="updateSearchConfig($event)"></stf-search-configuration>
      }
    </div>

    <div
      class="widget-preview-container"
      [class.dark-mode]="darkModeEnabled">
      <div class="title-xs">{{ 'search.widgets.form.preview-title' | translate }}</div>

      @if (widgetPreview | async; as widgetPreview) {
        <div
          id="preview"
          class="preview-content"
          [innerHtml]="widgetPreview.preview"></div>
      }
    </div>
  </div>
</div>
