<app-spinner *ngIf="(datasetListIsLoading | async) 
    || (attributeListIsLoading | async) 
    || (criteriaFamilyListIsLoading | async) 
    || (outputFamilyListIsLoading | async)
    || (outputCategoryListIsLoading | async)
    || (dataLengthIsLoading | async)">
</app-spinner>

<div *ngIf="(datasetListIsLoaded | async)
    && (attributeListIsLoaded | async) 
    && (criteriaFamilyListIsLoaded | async) 
    && (outputFamilyListIsLoaded | async)
    && (outputCategoryListIsLoaded | async)
    && (dataLengthIsLoaded | async)" class="row mt-4">
    <div class="col-12">
        <div *ngIf="(dataLength | async) < 1" class="jumbotron mb-4 py-4">
            <div class="lead">
                No data found for this search
            </div>
        </div>
        <ng-container *ngIf="(dataLength | async) > 0">
            <div class="anis-result-header jumbotron row mx-0 mb-4 py-4">
                <div class="col">
                    <app-result-info
                        [instance]="instance | async"
                        [dataset]="dataset | async"
                        [attributeList]="attributeList | async"
                        [dataLength]="dataLength | async"
                        [criteriaList]="criteriaList | async"
                        [coneSearch]="coneSearch | async">
                    </app-result-info>
                    <div class="lead mt-2">
                        <app-download-result
                            [instance]="instance | async"
                            [dataset]="dataset | async"
                            [attributeList]="attributeList | async"
                            [criteriaList]="criteriaList | async"
                            [outputList]="outputList | async"
                            [coneSearch]="coneSearch | async"
                            [sampRegistered]="sampRegistered | async"
                            [archiveIsCreating]="archiveIsCreating | async"
                            (sampRegister)="sampRegister()"
                            (sampUnregister)="sampUnregister()"
                            (downloadFile)="downloadFile($event)"
                            (broadcastVotable)="broadcastVotable($event)"
                            (startTaskCreateArchive)="startTaskCreateArchive($event)">
                        </app-download-result>
                    </div>
                </div>
                <div class="col-md-5" *ngIf="coneSearch | async">
                    <app-image-list-result
                        [dataset]="dataset | async"
                        [attributeList]="attributeList | async"
                        [coneSearch]="coneSearch | async"
                        [coneSearchConfig]="coneSearchConfig | async"
                        [data]="data | async"
                        [dataIsLoading]="dataIsLoading | async"
                        [dataIsLoaded]="dataIsLoaded | async"
                        [imageList]="imageList | async"
                        [imageListIsLoading]="imageListIsLoading | async"
                        [imageListIsLoaded]="imageListIsLoaded | async"
                        [sampRegistered]="sampRegistered | async"
                        (emitBackGroundHref)="updateBackgroundHref($event)"
                        (openPlotImage)="updateOpenPlotImage($event)"
                        (downloadFile)="downloadFile($event)">
                    </app-image-list-result>
                </div>
            </div>
            <div class="row">
                <div class="col-auto">
                    <app-datatable-actions 
                        [dataset]="dataset | async"
                        [criteriaList]="criteriaList | async"
                        [outputList]="outputList | async"
                        [coneSearch]="coneSearch | async"
                        [attributeList]="attributeList | async"
                        [selectedData]="selectedData | async"
                        [sampRegistered]="sampRegistered | async"
                        [archiveIsCreating]="archiveIsCreating | async"
                        (downloadFile)="downloadFile($event)"
                        (broadcastVotable)="broadcastVotable($event)"
                        (startTaskCreateArchive)="startTaskCreateArchive($event)">
                    </app-datatable-actions>
                </div>
                <div class="col align-self-center">
                    <app-url-display
                        [dataset]="dataset | async"
                        [criteriaList]="criteriaList | async"
                        [outputList]="outputList | async"
                        [coneSearch]="coneSearch | async">
                    </app-url-display>
                </div>
            </div>
            <div [ngClass]="{'row' : openPlotImage}">
                <div  *ngIf="openPlotImage" [ngClass]="{'col-md-5' : openPlotImage}" >
                    <app-cone-search-image 
                        [dataset]="dataset | async"
                        [attributeList]="attributeList | async"
                        [coneSearch]="coneSearch | async"
                        [coneSearchConfig]="coneSearchConfig | async"
                        [data]="data | async"
                        [dataIsLoading]="dataIsLoading | async"
                        [dataIsLoaded]="dataIsLoaded | async"
                        [backgroundHref]="backgroundHref"
                        (selectId)="updateSelectId($event)"
                        (closeConeSearchPlotImageOutPut)="updateOpenPlotImage($event)">
                   </app-cone-search-image>
                </div>
                <div [ngClass]="{'col-md-7' : openPlotImage}">
                    <app-datatable *ngIf="(dataset | async).datatable_enabled"
                        [dataset]="dataset | async"
                        [instance]="instance | async"
                        [attributeList]="attributeList | async"
                        [outputList]="outputList | async"
                        [queryParams]="queryParams | async"
                        [dataLength]="dataLength | async"
                        [data]="data | async"
                        [dataIsLoading]="dataIsLoading | async"
                        [dataIsLoaded]="dataIsLoaded | async"
                        [selectedData]="selectedData | async"
                        [selectId]="selectId"
                        (retrieveData)="retrieveData($event)"
                        (updateOutputList)="updateOutputList($event)"
                        (addSelectedData)="addSearchData($event)"
                        (deleteSelectedData)="deleteSearchData($event)"
                        (downloadFile)="downloadFile($event)">
                    </app-datatable>
                </div>
            </div>
        </ng-container>
    </div>
</div>
<div class="row mt-5 justify-content-between">
    <div class="col">
        <a routerLink="/instance/{{ instanceSelected | async }}/search/output/{{ datasetSelected | async }}" [queryParams]="queryParams | async" class="btn btn-outline-secondary">
            <span class="fas fa-arrow-left"></span> Output columns
        </a>
    </div>
</div>