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

<div *ngIf="(attributeListIsLoaded | async) 
    && (datasetListIsLoaded | async)
    && (criteriaFamilyListIsLoaded | async)
    && (outputFamilyListIsLoaded | async)
    && (outputCategoryListIsLoaded | async)
    && (imageListIsLoaded | async)
    && (detailConfigIsLoaded | async)
    && (coneSearchConfigIsLoaded | async)" class="container-fluid">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a routerLink="/admin/instance/instance-list">Instances</a>
            </li>
            <li class="breadcrumb-item">
                <a routerLink="/admin/instance/configure-instance/{{ (instance | async).name }}">
                    Configure instance {{ (instance | async).label }}
                </a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">
                Configure dataset {{ (dataset | async).label }}
            </li>
        </ol>
    </nav>

    <div class="row mb-3">
        <div class="col-12">
            <app-add-attribute
                [columnList]="columnList | async"
                [columnListIsLoading]="columnListIsLoading | async"
                [columnListIsLoaded]="columnListIsLoaded | async"
                [attributeList]="attributeList | async"
                (loadColumnList)="loadColumnList()"
                (add)="addAttribute($event)">
            </app-add-attribute>
        </div>
    </div>

    <div class="row mt-1">
        <div class="col-12">
            <div *ngIf="(attributeList | async).length < 1" class="alert alert-warning" role="alert">
                <span class="fas fa-exclamation-triangle"></span> You must add at least one attribute to use this dataset
            </div>
            
            <div *ngIf="(attributeList | async).length > 0" class="card">
                <div class="card-header">
                    <ul class="nav nav-tabs card-header-tabs">
                        <li class="nav-item">
                            <a class="nav-link" routerLink="./" [queryParams]="{tab_selected: 'general'}" [ngClass]="{'active': (tabSelected | async) === 'general'}">General</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" routerLink="./" [queryParams]="{tab_selected: 'criteria'}" [ngClass]="{'active': (tabSelected | async) === 'criteria'}">Criteria</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" routerLink="./" [queryParams]="{tab_selected: 'output'}" [ngClass]="{'active': (tabSelected | async) === 'output'}">Output</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" routerLink="./" [queryParams]="{tab_selected: 'result'}" [ngClass]="{'active': (tabSelected | async) === 'result'}">Result</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" routerLink="./" [queryParams]="{tab_selected: 'detail'}" [ngClass]="{'active': (tabSelected | async) === 'detail'}">Detail</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" routerLink="./" [queryParams]="{tab_selected: 'vo'}" [ngClass]="{'disabled': !getVoEnabled(), 'active': (tabSelected | async) === 'vo'}">VO</a>
                        </li>
                        <li class="nav-item ml-auto">
                            <a class="nav-link" routerLink="./" [queryParams]="{tab_selected: 'cfamilies'}" [ngClass]="{'active': (tabSelected | async) === 'cfamilies'}">Criteria Families</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" routerLink="./" [queryParams]="{tab_selected: 'ofamilies'}" [ngClass]="{'active': (tabSelected | async) === 'ofamilies'}">Output Families</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" routerLink="./" [queryParams]="{tab_selected: 'ocategories'}" [ngClass]="{'active': (tabSelected | async) === 'ocategories'}">Output Categories</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" routerLink="./" [queryParams]="{tab_selected: 'images'}" [ngClass]="{'active': (tabSelected | async) === 'images'}">Images</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" routerLink="./" [queryParams]="{tab_selected: 'files'}" [ngClass]="{'active': (tabSelected | async) === 'files'}">Files</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" routerLink="./" [queryParams]="{tab_selected: 'cone-search'}" [ngClass]="{'active': (tabSelected | async) === 'cone-search'}">Cone-search</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" routerLink="./" [queryParams]="{tab_selected: 'detail-page'}" [ngClass]="{'active': (tabSelected | async) === 'detail-page'}">Detail page</a>
                        </li>
                    </ul>
                </div>
                <div class="card-body" [ngSwitch]="tabSelected | async">
                    <app-table-general *ngSwitchCase="'general'">
                        <tr *ngFor="let attribute of (attributeList | async)"
                            general
                            [attribute]="attribute"
                            (save)="editAttribute($event)"
                            (delete)="deleteAttribute($event)">
                        </tr>
                    </app-table-general>
                    <app-table-criteria *ngSwitchCase="'criteria'">
                        <tr *ngFor="let attribute of (attributeList | async)"
                            criteria
                            [attribute]="attribute"
                            [criteriaFamilyList]="criteriaFamilyList | async"
                            [attributeDistinctList]="attributeDistinctList | async"
                            [attributeDistinctListIsLoading]="attributeDistinctListIsLoading | async"
                            [attributeDistinctListIsLoaded]="attributeDistinctListIsLoaded | async"
                            (loadAttributeDistinctList)="loadAttributeDistinctList(attribute)"
                            (save)="editAttribute($event)">
                        </tr>
                    </app-table-criteria>
                    <app-table-output *ngSwitchCase="'output'">
                        <tr *ngFor="let attribute of (attributeList | async)"
                            output
                            [attribute]="attribute"
                            [outputFamilyList]="outputFamilyList | async"
                            [outputCategoryList]="outputCategoryList | async"
                            (save)="editAttribute($event)">
                        </tr>
                    </app-table-output>
                    <app-table-result *ngSwitchCase="'result'">
                        <tr *ngFor="let attribute of (attributeList | async)"
                            result
                            [attribute]="attribute"
                            (save)="editAttribute($event)">
                        </tr>
                    </app-table-result>
                    <app-table-detail *ngSwitchCase="'detail'">
                        <tr *ngFor="let attribute of (attributeList | async)"
                            detail
                            [attribute]="attribute"
                            [outputCategoryList]="outputCategoryList | async"
                            (save)="editAttribute($event)">
                        </tr>
                    </app-table-detail>
                    <app-table-vo *ngSwitchCase="'vo'">
                        <tr *ngFor="let attribute of (attributeList | async)"
                            vo
                            [attribute]="attribute"
                            (save)="editAttribute($event)">
                        </tr>
                    </app-table-vo>
                    <app-criteria-family-list 
                        *ngSwitchCase="'cfamilies'"
                        [criteriaFamilyList]="criteriaFamilyList | async"
                        (add)="addCriteriaFamily($event)"
                        (edit)="editCriteriaFamily($event)"
                        (delete)="deleteCriteriaFamily($event)">
                    </app-criteria-family-list>
                    <app-output-family-list 
                        *ngSwitchCase="'ofamilies'"
                        [outputFamilyList]="outputFamilyList | async"
                        (add)="addOutputFamily($event)"
                        (edit)="editOutputFamily($event)"
                        (delete)="deleteOutputFamily($event)">
                    </app-output-family-list>
                    <app-output-category-list 
                        *ngSwitchCase="'ocategories'"
                        [outputCategoryList]="outputCategoryList | async"
                        [outputFamilyList]="outputFamilyList | async"
                        (add)="addOutputCategory($event)"
                        (edit)="editOutputCategory($event)"
                        (delete)="deleteOutputCategory($event)">
                    </app-output-category-list>
                    <app-image-list
                        *ngSwitchCase="'images'"
                        [imageList]="imageList | async"
                        [instance]="instance | async"
                        [dataset]="dataset | async"
                        [files]="files | async"
                        [filesIsLoading]="filesIsLoading | async"
                        [filesIsLoaded]="filesIsLoaded | async"
                        [fitsImageLimits]="fitsImageLimits | async"
                        [fitsImageLimitsIsLoading]="fitsImageLimitsIsLoading | async"
                        [fitsImageLimitsIsLoaded]="fitsImageLimitsIsLoaded | async"
                        (loadRootDirectory)="loadRootDirectory($event)"
                        (retrieveFitsImageLimits)="retrieveFitsImageLimits($event)"
                        (add)="addImage($event)"
                        (edit)="editImage($event)"
                        (delete)="deleteImage($event)">
                    </app-image-list>
                    <app-file-list
                        *ngSwitchCase="'files'"
                        [fileList]="fileList | async"
                        [instance]="instance | async"
                        [dataset]="dataset | async"
                        [files]="files | async"
                        [filesIsLoading]="filesIsLoading | async"
                        [filesIsLoaded]="filesIsLoaded | async"
                        (loadRootDirectory)="loadRootDirectory($event)"
                        (add)="addFile($event)"
                        (edit)="editFile($event)"
                        (delete)="deleteFile($event)">
                    </app-file-list>
                    <app-cone-search-config
                        *ngSwitchCase="'cone-search'"
                        [dataset]="dataset | async"
                        [coneSearchConfig]="coneSearchConfig | async"
                        [attributeList]="attributeList | async"
                        (addConeSearchConfig)="addConeSearchConfig($event)"
                        (editConeSearchConfig)="editConeSearchConfig($event)">
                    </app-cone-search-config>
                    <app-detail-config
                        *ngSwitchCase="'detail-page'"
                        [detailConfig]="detailConfig | async"
                        (addDetailConfig)="addDetailConfig($event)"
                        (editDetailConfig)="editDetailConfig($event)">
                    </app-detail-config>
                </div>
            </div>
        </div>
    </div>
</div>