<div>
  <div id="sidebar-options" class="d-block d-md-none search-controls clearfix">
    <small class="results">{{resultCount}} {{"search.sidebar.results" | translate}}</small>
    <button (click)="toggleSidebar.emit()"
      [attr.aria-label]="'search.sidebar.close' | translate"
      aria-controls="search-content"
      class="btn btn-outline-primary float-end close-sidebar"><i
    class="fas fa-arrow-right"></i> {{'search.sidebar.close' | translate}}
  </button>
</div>
<div id="search-sidebar-content">
  @if (showViewModes) {
    <ds-view-mode-switch class="d-none d-md-block"
      [viewModeList]="viewModeList"
    (changeViewMode)="changeViewMode.emit($event)"></ds-view-mode-switch>
  }
  <div class="sidebar-content">
    @if (configurationList) {
      <ds-search-switch-configuration
        [configurationList]="configurationList"
        [defaultConfiguration]="configuration"
        [inPlaceSearch]="inPlaceSearch"
      (changeConfiguration)="changeConfiguration.emit($event)"></ds-search-switch-configuration>
    }
    <ds-search-filters [currentScope]="currentScope"
      [currentConfiguration]="configuration"
      [filters]="filters"
      [refreshFilters]="refreshFilters"
      [inPlaceSearch]="inPlaceSearch">
    </ds-search-filters>
    @if (inPlaceSearch && (this.showAdvancedSearch$ | async) === true) {
      <ds-advanced-search
        [configuration]="configuration"
        [filtersConfig]="(filters | async)?.payload"
        [scope]="currentScope">
      </ds-advanced-search>
    }
    @if (inPlaceSearch) {
      <ds-search-settings
        [currentSortOption]="currentSortOption"
        [sortOptionsList]="sortOptionsList">
      </ds-search-settings>
    }
  </div>
</div>
</div>
