@if (sortForm) {
  <div class="data-filter-bar-container">
    <!-- Changes position based on screen size -->
    <ng-template #searchFormTemplate>
      @if (searchForm) {
        <form
          [formGroup]="searchForm"
          (ngSubmit)="searchSubmit.emit()"
          class="search-form"
          data-cy="list-search-form"
        >
          <mat-form-field appearance="outline" subscriptSizing="dynamic">
            <mat-label>Search</mat-label>
            <input
              matInput
              type="search"
              formControlName="query"
              data-cy="list-search-field"
            />
          </mat-form-field>
        </form>
      }
    </ng-template>
    <div class="left-block">
      @if (environmentForm) {
        <form [formGroup]="environmentForm" class="environment-form">
          <mat-form-field appearance="outline" subscriptSizing="dynamic">
            <mat-label>Environment</mat-label>
            <mat-select
              (selectionChange)="filterByEnvironment.emit($event)"
              formControlName="environment"
            >
              <mat-option [value]="null">All Environments</mat-option>
              @for (
                environment of organizationEnvironments();
                track environment
              ) {
                <mat-option [value]="environment">
                  {{ environment }}
                </mat-option>
              }
            </mat-select>
          </mat-form-field>
        </form>
      }
      @if (isLargeScreen()) {
        <ng-container *ngTemplateOutlet="searchFormTemplate"></ng-container>
      }
    </div>
    <div class="right-block">
      @if (isLargeScreen()) {
        @if (currentStatsPeriod(); as statsPeriod) {
          <mat-button-toggle-group
            matTooltipPosition="above"
            matTooltip="Set trend charts period"
            [matTooltipShowDelay]="500"
            i18n-matTooltip
            [value]="statsPeriod"
            [disabled]="statsPeriodToggleDisabled()"
            (change)="emitOnStatsPeriodToggle($event)"
          >
            <mat-button-toggle value="24h">24h</mat-button-toggle>
            <mat-button-toggle value="14d">14d</mat-button-toggle>
          </mat-button-toggle-group>
        }
      }
      <form [formGroup]="sortForm" class="sort-form">
        <mat-form-field appearance="outline" subscriptSizing="dynamic">
          <mat-label>Sort by</mat-label>
          <mat-select
            (selectionChange)="sortByChanged.emit($event)"
            formControlName="sort"
          >
            @for (sort of sorts(); track sort.param) {
              <mat-option [value]="sort.param">
                {{ sort.display }}
              </mat-option>
            }
          </mat-select>
        </mat-form-field>
      </form>
      @if (!isLargeScreen()) {
        <ng-container *ngTemplateOutlet="searchFormTemplate"></ng-container>
      }
    </div>
  </div>
}