<mat-sidenav-container id="dars-container">
    <mat-sidenav #auditPane id="dars-report-container" mode="over" position="end">
        <div class="audit-wrapper">
            <button id="audit-close" mat-button aria-label="Return to DARS audit list" color="primary" (click)="auditPane.close()">
                <mat-icon>chevron_left</mat-icon>
                Return to audit list
            </button>
    
            <mat-card id="audit">
                <header class="no-horizontal-padding">
                    <div class="audit-metadata">
                        <div>
                            <p>Prepared: 10/31/18 - 10:24</p>
                            <p>Johnson, Jake John</p>
                            <p>Program Code: BS 112</p>
                        </div>
    
                        <div class="text-align-right">
                            <p>9071231234</p>
                            <p>Catalog Year: 20171</p>
                            <p>Alternate Catalog Year: 20191</p>
                        </div>
                    </div>
    
                    <h3 class="text-align-center">
                        Degree Audit Report System (DARS)
                        <br />
                        College of Letters and Science - Bachelor of Science (B.S)
                        <br />
                        Biology Major
                    </h3>
    
                    <div class="audit-section-controles">
                        <button mat-stroked-button color="primary">Open All Sections</button>
                        <button mat-stroked-button color="primary">Close All Sections</button>
                    </div>
                </header>
    
                <section>
                    <p class="tight faded">This audit was run using values not reflected in your current status. Parameters used when submitting this audit request:</p>
                    <br/>
                    <p class="tight faded">Honors Processing: Keep current status.</p>
                    <p class="tight faded">Courses Used: Using courses from Curse Guide Plan: (Plan name field blank in cobol program "stuinst.)</p>
                </section>
    
                <section>
                    <p>CL/YR: ALS 3</p>
                    <p>Advisors: Asen, Brian</p>
                    <p>HS Units:</p>
                    <div>
                        <p class="indent tight">LNG: 0.0 SPA 5.0</p>
                        <p class="indent tight">MATH: ALG 1.0 GEO 1.0 ADV 3.0</p>
                        <p class="indent tight">SCIENCE:</p>
                        <p class="indent tight">SOC STUD:</p>
                    </div>
                </section>

                <section class="text-align-center">
                    <h4 class="mat-h2 uppercase faded">At least one requirment has not been satisfied</h4>
                    <p class="mat-h2 faded">For more information about undergraduate L&S program see:</p>
                    <a href="#" mat-button color="primary">L&S Guide</a>
                </section>
            </mat-card>
        </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 id="aduits">
            <table class="audit-table" mat-table [dataSource]="dataSource">

                <!-- View Column -->
                <ng-container matColumnDef="view">
                    <th mat-header-cell *matHeaderCellDef></th>
                    <td mat-cell *matCellDef="let audit">
                        <button mat-raised-button color="primary" [disabled]="audit.pending" (click)="auditPane.open()">View</button>
                    </td>
                </ng-container>

                <!-- School Column -->
                <ng-container matColumnDef="school">
                    <th mat-header-cell *matHeaderCellDef>School/College</th>
                    <td mat-cell *matCellDef="let audit">{{audit.school}}</td>
                </ng-container>

                <!-- Program Column -->
                <ng-container matColumnDef="program">
                    <th mat-header-cell *matHeaderCellDef>Program of Study</th>
                    <td mat-cell *matCellDef="let audit">{{audit.program}}</td>
                </ng-container>

                <!-- Honors Column -->
                <ng-container matColumnDef="honors">
                    <th mat-header-cell *matHeaderCellDef>Honors Status</th>
                    <td mat-cell *matCellDef="let audit">Keep current status</td>
                </ng-container>

                <!-- Plan Column -->
                <ng-container matColumnDef="plan">
                    <th mat-header-cell *matHeaderCellDef>Degree Plan</th>
                    <td mat-cell *matCellDef="let audit">Plan Title</td>
                </ng-container>

                <!-- Status Column -->
                <ng-container matColumnDef="status">
                    <th mat-header-cell *matHeaderCellDef>Status</th>
                    <td mat-cell *matCellDef="let audit">Status goes here</td>
                </ng-container>

                <!-- Status Column -->
                <ng-container matColumnDef="download">
                    <th mat-header-cell *matHeaderCellDef></th>
                    <td mat-cell *matCellDef="let audit">
                        <button mat-raised-button>
                            <mat-icon>vertical_align_bottom</mat-icon>
                        </button>
                    </td>
                </ng-container>

                <!-- Row definition -->
                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
            </table>

            <div style="text-align: center">
                <button mat-stroked-button color="primary" style="margin: 20px auto; padding: 0 30px">Load More</button>
            </div>
        </div>

        <div id="what-if-audits"></div>
    </div>
</mat-sidenav-container>