@if(loading$ | async){}
@if(addFilterResult$ |async){}
@if(copyFilterResult$ |async){}
@if(renameFilterResult$ |async){}
@if(deleteFilterResult$ |async){}
@if (filterParams$ | async) {}

<div class="flex flex-col grow overflow-hidden">
  <div class="flex flex-row pr-2.5">
    <div class="flex flex-col justify-center grow-0 items-start text-xl mt-0.5 mr-0 mb-2 ml-2.5">
      <fast-label>Filter</fast-label>
    </div>
    <div class="flex flex-col grow-0 w-85 mt-0.5 mr-0 mb-2 ml-2.5">
      <fast-combobox class="grow" [(ngModel)]="selectedFilter" [valuePrimitive]="false" [data]="filtersFiltered$ | async" [disabled]="loading$ | async"
        [textField]="'name'" [valueField]="'id'" [placeholder]="'None'" (filterChange)="filterFilters($event)" (selectionChange)="onFilterSelected($event)">
      </fast-combobox>
    </div>
    <div class="flex flex-col grow-0 items-stretch justify-start mt-0.5 mr-0 mb-2 ml-2.5">
      <fast-button fast-tip="Add a new filter to the list" [tipPosition]="'top'" [tipEvent]="'hover'" (click)="openEditor(typeEnum.AddNew)"
        [disabled]="(loading$ | async)" title="Add New Filter">
        <fast-svg icon="plus" />Add New
      </fast-button>
    </div>
    <div class="flex flex-col grow-0 items-stretch justify-start mt-0.5 mr-0 mb-2 ml-2.5">
      <fast-button fast-tip="Copy Saved Filter" [tipPosition]="'top'" [tipEvent]="'hover'" class="w-8" (click)="openEditor(typeEnum.Copy)"
        [disabled]="(loading$ | async)" title="Copy Saved Filter">
        <fast-svg icon="copy" />
      </fast-button>
    </div>
    <div class="flex flex-col grow-0 items-stretch justify-start mt-0.5 mr-0 mb-2 ml-2.5">
      <fast-button fast-tip="Rename Filter" [tipPosition]="'top'" [tipEvent]="'hover'" class="w-8" (click)="openEditor(typeEnum.Rename)"
        [disabled]="(loading$ | async) || !selectedFilter" title="Rename Filter">
        <fast-svg icon="rename" [size]="18" />
      </fast-button>
    </div>
    <div class="flex flex-col grow-0 items-stretch justify-start mt-0.5 mr-0 mb-2 ml-2.5" fast-tip="Delete Filter" [tipPosition]="'top'" [tipEvent]="'hover'">
      <fast-button class="w-8" type="delete" tabindex="-1" (click)="deleteFilter()" [disabled]="(loading$ | async) || !selectedFilter">
        <fast-svg icon="trash" />
      </fast-button>
    </div>
  </div>
  <fast-hr class="mt-2" />



  <div class="flex flex-row grow basis-100 overflow-hidden">
    @if((filtersFiltered$ | async) && !selectedFilter)
    {
    <span class="flex flex-col justify-center text-center grow text-2xl font-medium  text-base-black-250
      dark:text-base-white-1000">No filter
      selected. Click
      "Add New" to create one.</span>
    }

    @if(selectedFilter)
    {
    <fast-tabgroup class="flex grow" alignment="vertical" [headerWidth]="250" headerTitle="Data Sources">


      @if (dataSources$ | async; as dataSources){
      @if(hasDataSourceId(dataSources, 0)){
      <fast-tabpanel>
        <ng-template appTabLabel>
          <fast-svg class="mr-2" icon="data" />{{tabTextByDataSourceId[0]}}
        </ng-template>
        <datasource-test #childDataSource [dataSourceId]="0" [filterId]="selectedFilter.id" (valueUpdated)="valueUpdated($event)"></datasource-test>
      </fast-tabpanel>
      }

      @if(hasDataSourceId(dataSources, 15)){
      <fast-tabpanel>
        <ng-template appTabLabel>
          <fast-svg class="mr-2" icon="data" />{{tabTextByDataSourceId[15]}}
        </ng-template>
        <datasource-counterparty-data #childDataSource [dataSourceId]="15" [filterId]="selectedFilter.id"
          (valueUpdated)="valueUpdated($event)"></datasource-counterparty-data>
      </fast-tabpanel>
      }

      @if(hasDataSourceId(dataSources, 6)){
      <fast-tabpanel>
        <ng-template appTabLabel>
          <fast-svg class="mr-2" icon="data" />{{tabTextByDataSourceId[6]}}
        </ng-template>
        <datasource-credit-limits #childDataSource [dataSourceId]="6" [filterId]="selectedFilter.id"
          (valueUpdated)="valueUpdated($event)"></datasource-credit-limits>
      </fast-tabpanel>
      }

      @if(hasDataSourceId(dataSources, 2)){
      <fast-tabpanel>
        <ng-template appTabLabel>
          <fast-svg class="mr-2" icon="data" />{{tabTextByDataSourceId[2]}}
        </ng-template>
        <datasource-daily-index-prices #childDataSource [dataSourceId]="2" [filterId]="selectedFilter.id"
          (valueUpdated)="valueUpdated($event)"></datasource-daily-index-prices>
      </fast-tabpanel>
      }

      @if(hasDataSourceId(dataSources, 11)){
      <fast-tabpanel>
        <ng-template appTabLabel>
          <fast-svg class="mr-2" icon="data" />{{tabTextByDataSourceId[11]}}
        </ng-template>
        <datasource-forward-index-prices #childDataSource [dataSourceId]="11" [filterId]="selectedFilter.id"
          (valueUpdated)="valueUpdated($event)"></datasource-forward-index-prices>
      </fast-tabpanel>
      }
      @if(hasDataSourceId(dataSources, 10)){
      <fast-tabpanel>
        <ng-template appTabLabel>
          <fast-svg class="mr-2" icon="data" />{{tabTextByDataSourceId[10]}}
        </ng-template>
        <datasource-keep-wholes #childDataSource [dataSourceId]="10" [filterId]="selectedFilter.id"
          (valueUpdated)="valueUpdated($event)"></datasource-keep-wholes>
      </fast-tabpanel>
      }
      @if(hasDataSourceId(dataSources, 3)){
      <fast-tabpanel>
        <ng-template appTabLabel>
          <fast-svg class="mr-2" icon="data" />{{tabTextByDataSourceId[3]}}
        </ng-template>
        <datasource-monthly-index-prices #childDataSource [dataSourceId]="3" [filterId]="selectedFilter.id"
          (valueUpdated)="valueUpdated($event)"></datasource-monthly-index-prices>
      </fast-tabpanel>
      }
      @if(hasDataSourceId(dataSources, 12)){
      <fast-tabpanel>
        <ng-template appTabLabel>
          <fast-svg class="mr-2" icon="data" />{{tabTextByDataSourceId[12]}}
        </ng-template>
        <datasource-nominations #childDataSource [dataSourceId]="12" [filterId]="selectedFilter.id"
          (valueUpdated)="valueUpdated($event)"></datasource-nominations>
      </fast-tabpanel>
      }
      @if(hasDataSourceId(dataSources, 4)){
      <fast-tabpanel>
        <ng-template appTabLabel>
          <fast-svg class="mr-2" icon="data" />{{tabTextByDataSourceId[4]}}
        </ng-template>
        <datasource-plant-statements #childDataSource [dataSourceId]="4" [filterId]="selectedFilter.id"
          (valueUpdated)="valueUpdated($event)"></datasource-plant-statements>
      </fast-tabpanel>
      }
      @if(hasDataSourceId(dataSources, 9)){
      <fast-tabpanel>
        <ng-template appTabLabel>
          <fast-svg class="mr-2" icon="data" />{{tabTextByDataSourceId[9]}}
        </ng-template>
        <datasource-ptr-data #childDataSource [dataSourceId]="9" [filterId]="selectedFilter.id" (valueUpdated)="valueUpdated($event)"></datasource-ptr-data>
      </fast-tabpanel>
      }
      @if(hasDataSourceId(dataSources, 8)){
      <fast-tabpanel>
        <ng-template appTabLabel>
          <fast-svg class="mr-2" icon="data" />{{tabTextByDataSourceId[8]}}
        </ng-template>
        <datasource-scheduling-data #childDataSource [dataSourceId]="8" [filterId]="selectedFilter.id"
          (valueUpdated)="valueUpdated($event)"></datasource-scheduling-data>
      </fast-tabpanel>
      }
      @if(hasDataSourceId(dataSources, 14)){
      <fast-tabpanel>
        <ng-template appTabLabel>
          <fast-svg class="mr-2" icon="data" />{{tabTextByDataSourceId[14]}}
        </ng-template>
        <datasource-sos-data #childDataSource [dataSourceId]="14" [filterId]="selectedFilter.id" (valueUpdated)="valueUpdated($event)"></datasource-sos-data>
      </fast-tabpanel>
      }
      @if(hasDataSourceId(dataSources, 5)){
      <fast-tabpanel>
        <ng-template appTabLabel>
          <fast-svg class="mr-2" icon="data" />{{tabTextByDataSourceId[5]}}
        </ng-template>
        <datasource-trades #childDataSource [dataSourceId]="5" [filterId]="selectedFilter.id" (valueUpdated)="valueUpdated($event)"></datasource-trades>
      </fast-tabpanel>
      }
      @if(hasDataSourceId(dataSources, 1)){
      <fast-tabpanel>
        <ng-template appTabLabel>
          <fast-svg class="mr-2" icon="data" />{{tabTextByDataSourceId[1]}}
        </ng-template>
        <datasource-valuation-data #childDataSource [dataSourceId]="1" [filterId]="selectedFilter.id"
          (valueUpdated)="valueUpdated($event)"></datasource-valuation-data>
      </fast-tabpanel>
      }
      @if(hasDataSourceId(dataSources, 13)){
      <fast-tabpanel>
        <ng-template appTabLabel>
          <fast-svg class="mr-2" icon="data" />{{tabTextByDataSourceId[13]}}
        </ng-template>
        <datasource-valuation-data-by-deal #childDataSource [dataSourceId]="13" [filterId]="selectedFilter.id"
          (valueUpdated)="valueUpdated($event)"></datasource-valuation-data-by-deal>
      </fast-tabpanel>
      }
      @if(hasDataSourceId(dataSources, 17)){
      <fast-tabpanel>
        <ng-template appTabLabel>
          <fast-svg class="mr-2" icon="data" />{{tabTextByDataSourceId[17]}}
        </ng-template>
        <datasource-valuation-data-by-path #childDataSource [dataSourceId]="17" [filterId]="selectedFilter.id"
          (valueUpdated)="valueUpdated($event)"></datasource-valuation-data-by-path>
      </fast-tabpanel>
      }
      @if(hasDataSourceId(dataSources, 7)){
      <fast-tabpanel>
        <ng-template appTabLabel>
          <fast-svg class="mr-2" icon="data" />{{tabTextByDataSourceId[7]}}
        </ng-template>
        <datasource-wasp-data #childDataSource [dataSourceId]="7" [filterId]="selectedFilter.id" (valueUpdated)="valueUpdated($event)"></datasource-wasp-data>
      </fast-tabpanel>
      }
      @if(hasDataSourceId(dataSources, 16)){
      <fast-tabpanel>
        <ng-template appTabLabel>
          <fast-svg class="mr-2" icon="data" />{{tabTextByDataSourceId[16]}}
        </ng-template>
        <datasource-meter-data #childDataSource [dataSourceId]="16" [filterId]="selectedFilter.id"
          (valueUpdated)="valueUpdated($event)"></datasource-meter-data>
      </fast-tabpanel>
      }
      }
    </fast-tabgroup>
    }
  </div>
</div>
<fast-hr />
<div class="flex flex-col mt-2">
  <div class="flex flex-row">
    <div class="flex flex-col grow items-stretch justify-center basis-3/10 mt-0.5 mx-2.5 mb-2"></div>
    <div class="flex flex-col grow-0 items-stretch justify-end mt-0.5 mr-2.5 mb-2 ml-0">
      <fast-button type="basic" [disabled]="loading$ | async" (click)="saveFilter()">
        <fast-svg icon="save" />Save
      </fast-button>
    </div>
    <div class="flex flex-col grow-0 items-stretch justify-end mt-0.5 mr-2.5 mb-2 ml-0">
      <fast-button type="basic" [disabled]="loading$ | async" (click)="closeFilter()">
        <fast-svg icon="cancel" />Cancel
      </fast-button>
    </div>
  </div>
</div>



@if(editorOpened)
{
<fast-window [title]="getEditorTitle()" (close)="editorOpened=false" [width]="400" [minWidth]="400" [height]="175" [minHeight]="150">
  <div class="flex flex-col grow-0 overflow-auto">
    <div class="flex flex-row grow-0 basis-100">
      <div class="flex flex-col grow items-stretch justify-start basis-3/10 mt-0.5 mx-2.5 mb-2">
        <div class="flex flex-col grow-0 basis-0"><fast-label>Name</fast-label></div>
        <div class="flex flex-col grow-0 items-stretch justify-start">
          <fast-textbox [(ngModel)]="newFilterName" />
        </div>
      </div>
    </div>
    <fast-hr />
    <div class="flex flex-row grow basis-100 mt-2">
      <div class="flex flex-col grow items-stretch justify-center basis-3/10 mt-0.5 mx-2.5 mb-2"></div>
      <div class="flex flex-col grow-0 items-stretch justify-end mt-0.5 mr-2.5 mb-2 ml-0">
        <fast-button type="basic" (click)="addRenameOrCopyFilter()">
          <fast-svg icon="save" />Save
        </fast-button>
      </div>
      <div class="flex flex-col grow-0 items-stretch justify-end mt-0.5 mr-2.5 mb-2 ml-0">
        <fast-button type="basic" (click)="editorOpened=false">
          <fast-svg icon="cancel" />Cancel
        </fast-button>
      </div>
    </div>
  </div>
</fast-window>
}