<div *ngIf="(outputSearchMetaIsLoading | async) || (datasetSearchMetaIsLoading | async) || (attributeSearchMetaIsLoading | async)"
    class="row justify-content-center mt-5">
    <span class="fas fa-circle-notch fa-spin fa-3x"></span>
    <span class="sr-only">Loading...</span>
</div>
<div *ngIf="(outputSearchMetaIsLoaded | async) && (datasetSearchMetaIsLoaded | async) && (attributeSearchMetaIsLoaded | async)"
    class="row mt-4">
    <div class="col-12 col-md-8 col-lg-9">
        <app-output-tabs 
            [outputFamilyList]="outputFamilyList | async" 
            [categoryList]="categoryList | async"
            [datasetAttributeList]="datasetAttributeList | async" 
            [outputList]="outputList | async"
            (change)="updateOutputList($event)">
        </app-output-tabs>
    </div>
    <div class="col-12 col-md-4 col-lg-3 pt-2">
        <app-summary 
            [datasetName]="datasetName | async" 
            [currentStep]="currentStep | async"
            [datasetList]="datasetList | async" 
            [criteriaList]="criteriaList | async"
            [datasetAttributeList]="datasetAttributeList | async" 
            [outputList]="outputList | async"
            [queryParams]="queryParams | async">
        </app-summary>
    </div>
</div>
<div class="row mt-5 justify-content-between">
    <div class="col">
        <a routerLink="/search/criteria/{{datasetName | async}}" [queryParams]="queryParams | async"
            class="btn btn-outline-secondary">
            <span class="fas fa-arrow-left"></span> Previous
        </a>
    </div>
    <div class="col col-auto">
        <a routerLink="/search/result/{{datasetName | async}}" [queryParams]="queryParams | async"
            class="btn btn-outline-primary">
            Next <span class="fas fa-arrow-right"></span>
        </a>
    </div>
</div>