<mat-sidenav-container id="dars-container">
    <mat-sidenav id="dars-report-container" mode="over" position="end" [opened]="(visibleAuditStatus$ | async) != 'NotLoaded'">
        <div class="audit-wrapper">
            <button id="audit-close" mat-button aria-label="Return to DARS audit list" color="primary" (click)="closeAudit()">
                <mat-icon>chevron_left</mat-icon>
                Return to audit list
            </button>

            <div *ngIf="(visibleAuditStatus$ | async) == 'Loaded'; then loadedAudit else loadingAudit"></div>
            <ng-template #loadedAudit>
                <cse-dars-audit></cse-dars-audit>
            </ng-template>
            <ng-template #loadingAudit>
                <img id="loading-bucky" src="../../../assets/img/bucky-happy.svg" alt="Happy Bucky Badger">
                <p>Loading your degree Audit</p>
                <mat-spinner diameter="50"></mat-spinner>
            </ng-template>
        </div>
    </mat-sidenav>

    <!-- Main DARS Content -->
    <div id="dars-main">
        <h2 class="mat-h1">Completed Audit Requests</h2>

        <div id="dars-header-bar">
            <div>
                <h3 class="mat-h2">Degree Audit</h3>
                <p class="mat-body">See the progress towards your current program of study and degree plans.</p>
            </div>
            <div>
                <button mat-raised-button aria-label="Run new degree audit" color="primary">Run new degree audit</button>
            </div>
        </div>

        <div *ngIf="(metadataStatus$ | async) == 'Loaded'; then loadedMetadata else loadingMetadata"></div>

        <ng-template #loadedMetadata>
            <cse-dars-metadata-table></cse-dars-metadata-table>
        </ng-template>

        <ng-template #loadingMetadata>
            <h2>loading metadata</h2>
        </ng-template>
    </div>
</mat-sidenav-container>