<div class="container-fluid">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a routerLink="/admin/instance-list">Instances</a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">
                <a routerLink="/admin/configure-instance/{{ (instance | async).name }}">
                    Configure instance {{ (instance | async).name }}
                </a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">New dataset</li>
        </ol>
    </nav>
</div>

<div class="container">
    <app-spinner *ngIf="(surveyListIsLoading | async) || (datasetFamilyListIsLoading | async)"></app-spinner>

    <div *ngIf="(surveyListIsLoaded | async) && (datasetFamilyListIsLoaded | async)" class="row">
        <div class="col-12">
            <app-dataset-form
                [instance]="instance | async"
                [surveyList]="surveyList | async"
                [tableListIsLoading]="tableListIsLoading | async"
                [tableListIsLoaded]="tableListIsLoaded | async"
                [tableList]="tableList | async"
                [datasetFamilyList]="datasetFamilyList | async"
                [idDatasetFamily]="idDatasetFamily | async"
                [rootDirectory]="rootDirectory | async"
                [rootDirectoryIsLoading]="rootDirectoryIsLoading | async"
                [rootDirectoryIsLoaded]="rootDirectoryIsLoaded | async"
                (changeSurvey)="loadTableList($event)"
                (loadRootDirectory)="loadRootDirectory($event)"
                (onSubmit)="addNewDataset($event)"
                #formDataset>
                <button [disabled]="!formDataset.form.valid || formDataset.form.pristine" type="submit" class="btn btn-primary">
                    <i class="fa fa-database"></i> Add new dataset
                </button>
                &nbsp;
                <a routerLink="/admin/configure-instance/{{ (instance | async).name }}" type="button" class="btn btn-danger">Cancel</a>
            </app-dataset-form>
        </div>
    </div>
</div>