<div class="container">
    <h2 class="semester-label">
        Fall Courses
    </h2>
    <table>
        <tbody>
            <tr ng-repeat="course in vm.selectedCourses" ng-if="course.term === 'Fall' || course.term === 'Year'">
                <td>
                    <span class="selectedCourse-Wrapper">
                        <span class="deleteCourseBttn">
                            <img src="../../images/cancel.png" height="20" width="20" ng-click="vm.removeCourse(course)" />
                        </span>
                        <span class="selectedCourse-Code">{{course.code}}</span>
                    </span>
                    <span class="selectedCourse-Campus">{{course.campus}}</span>
                </td>
            </tr>
        </tbody>
    </table>

    <h2 class="semester-label">
        Winter Courses
    </h2>
    <table>
        <tbody>
            <tr ng-repeat="course in vm.selectedCourses" ng-if="course.term === 'Winter' || course.term === 'Year'">
                <td>
                    <span class="selectedCourse-Wrapper">
                        <span class="deleteCourseBttn">
                            <img src="../../images/cancel.png" height="20" width="20" ng-click="vm.removeCourse(course)" />
                        </span>
                        <span class="selectedCourse-Code">{{course.code}}</span>
                    </span>
                    <span class="selectedCourse-Campus">{{course.campus}}</span>
                </td>
            </tr>
        </tbody>
    </table>
</div>