degree-planner.component.html

<div fxLayout="row" fxLayout.sm="column" fxLayoutGap="20px" fxLayoutAlign="space-between" style="margin: 24px">
	<mat-form-field>
		<mat-select placeholder="Degree Plans" [disableOptionCentering]=true [value]="selectedDegreePlan">
			<mat-option *ngFor="let degreePlan of degreePlans" [value]="degreePlan.roadmapId">
				{{degreePlan.name}}
			</mat-option>
		</mat-select>
	</mat-form-field>
	<button mat-button class="btn-primary">Check Plan (DARS)</button>
</div>

<div fxLayout="column" fxLayoutGap="20px" fxLayoutAlign="start stretch" style="margin: 24px">
	<mat-accordion>
		<mat-expansion-panel class="year-container" [expanded]="true">
			<mat-expansion-panel-header>
				<mat-panel-title>
				Past: 2017-2018
				</mat-panel-title>
			</mat-expansion-panel-header>
			<div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutAlign="start stretch">
				<mat-card class="term-container" fxFlex="33%">
					<div fxLayout="row" fxLayoutAlign="space-between stretch">
						<h2>Fall 2017</h2><p class="text-right semi-bold">14 Credits</p>
					</div>
					<div style="background-color: #fff">
						<app-term-container></app-term-container>
					</div>
				</mat-card>
				<mat-card class="term-container" fxFlex="33%" fxFlexOrder="3">
					<div fxLayout="row" fxLayoutAlign="space-between stretch">
						<h2>Spring 2018</h2><p class="text-right semi-bold">14 Credits</p>
					</div>
					<div style="background-color: #fff">Courses go here....</div>
				</mat-card>
				<mat-card class="term-container" fxFlex="33%" fxFlexOrder="3">
					<div fxLayout="row" fxLayoutAlign="space-between stretch">
						<h2>Summer 2018</h2><p class="text-right semi-bold">14 Credits</p>
					</div>
					<div style="background-color: #fff">Courses go here....</div>
				</mat-card>
			</div>
		</mat-expansion-panel>
	</mat-accordion>
</div>