<div
  class="search-page"
  [style]="cssVariables()">
  <div
    class="search-preview-container page-spacing"
    [class.panel-open]="!configPanelCollapsed">
    <header>
      <div class="page-title">
        {{ 'search.title' | translate }}
      </div>
      <div class="page-description">{{ 'search.description' | translate }}</div>
    </header>
    @if (widgetPreview | async; as widgetPreview) {
      <div
        id="preview"
        class="preview-content"
        [innerHtml]="widgetPreview.preview"></div>
    }
  </div>

  <pa-button
    class="toggle-panel-button"
    icon="chevrons-left"
    [class.visible]="configPanelCollapsed"
    (click)="configPanelCollapsed = !configPanelCollapsed">
    {{ 'search.configuration.action.open-panel' | translate }}
  </pa-button>

  <div
    #configurationContainer
    class="search-configuration-container"
    [class.collapsed]="configPanelCollapsed"
    (scroll)="onScroll($event)">
    <div
      class="resizer"
      (mousedown)="startResizePanel($event)">
      <div class="border"></div>
    </div>
    <pa-button
      class="close-button"
      icon="cross"
      aspect="basic"
      (click)="configPanelCollapsed = !configPanelCollapsed">
      {{ 'generic.close' | translate }}
    </pa-button>

    <stf-search-configuration
      displayWidgetButtonLine
      mainTitle="search.configuration.saved-config-title"
      [configurationContainer]="configurationContainerElement()"
      (configUpdate)="updateConfig($event)"
      (createWidget)="createWidget()"></stf-search-configuration>
  </div>
</div>
