<div *ngIf="(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="(datasetSearchMetaIsLoaded | async) && (attributeSearchMetaIsLoaded | async)" class="row mt-4">
    <div class="col-12">
        <app-result-download
            [datasetName]="datasetName | async"
            [datasetList]="datasetList | async"
            [dataLength]="dataLength | async"
            [apiPath]="apiPath"
            [coneSearch]="coneSearch | async"
            [criteriaList]="criteriaList | async"
            [outputList]="outputList | async">
        </app-result-download>
        <app-result-summary
            [datasetAttributeList]="datasetAttributeList | async" 
            [coneSearch]="coneSearch | async"
            [criteriaList]="criteriaList | async"
            [outputList]="outputList | async">
        </app-result-summary>
        <app-result-url-display
            [apiPath]="apiPath"
            [datasetName]="datasetName | async"
            [coneSearch]="coneSearch | async"
            [criteriaList]="criteriaList | async"
            [outputList]="outputList | async">
        </app-result-url-display>
        <app-result-datatable
            [apiPath]="apiPath"
            [datasetName]="datasetName | async"
            [datasetList]="datasetList | async"
            [queryParams]="queryParams | async"
            [datasetAttributeList]="datasetAttributeList | async"
            [outputList]="outputList | async"
            [searchData]="searchData | async"
            [dataLength]="dataLength | async"
            [selectedData]="selectedData | async"
            (getSearchData)="getSearchData($event)"
            (addSelectedData)="addSearchData($event)"
            (deleteSelectedData)="deleteSearchData($event)"
            [processWip]="processWip | async"
            [processDone]="processDone | async"
            [processId]="processId | async"
            (executeProcess)="executeProcess($event)">
        </app-result-datatable>
    </div>
</div>
<div class="row mt-5 justify-content-between">
    <div class="col">
        <a routerLink="/search/output/{{ datasetName | async }}" [queryParams]="queryParams | async"
            class="btn btn-outline-secondary">
            <span class="fas fa-arrow-left"></span> Previous
        </a>
    </div>
</div>