<div>
	<div id="miniTimetablesViewer">
        <!-- The top header -->
        <div id="headerPanel">
            <span class="headerSides clickable">
                <img src="../../images/menu.png" width="20" height="20" ng-click="toggleSideMenu()"/>
            </span>
            <span id="header">UofT Timetable Generator</span>
        </div>

        <!-- The body -->
        <div id="bodyPanel">

            <!-- The mid header section -->
            <div id="midHeaderPanel">
                <div>                   
                    <span id="preferencesBttn" class="mid-header-panel-bttn"
                          ng-class="{'selected hoverable clickable': isPreferencesPanelOpened, 'hoverable clickable': !isPreferencesPanelOpened}"
                          ng-click="togglePreferencesPanel()">Preferences</span>
                    <span id="restrictionsBttn" class="mid-header-panel-bttn"
                          ng-class="{'selected hoverable clickable': isRestrictionsPanelOpened, 'hoverable clickable': !isRestrictionsPanelOpened}" 
                          ng-click="toggleRestrictionsPanel()">Restrictions</span>
                </div>
                <div>
                    <div class="midHeaderContent" ng-show="isRestrictionsPanelOpened" >
                        <restrictions-panel initial-restrictions="data.restrictions"
                                            on-update="updateRestrictions(restrictions)"
                                            on-cancel="toggleRestrictionsPanel()">
                        </restrictions-panel>
                    </div>
                    <div class="midHeaderContent" ng-show="isPreferencesPanelOpened">
                        <preferences-panel initial-preferences="data.preferences"
                                           on-update="updatePreferences(preferences)"
                                           on-cancel="togglePreferencesPanel()">
                        </preferences-panel>
                    </div>
                </div>
            </div>

            <!-- The loading icon, which is only displayed when it is waiting for a request -->
            <div ng-show="data.areTimetablesBeingGenerated && data.errorMessages === null">
                <img src="../../images/tenor.gif" alt="Waiting for timetables to be generated"/>
            </div>

            <!-- The section to display any error messages, if there are any -->
            <div ng-show="!data.areTimetablesBeingGenerated && data.errorMessages != null">
                {{data.errorMessages}}
            </div>


            <!-- The timetables; fall and winter timetables grouped together -->
            <div class="miniTimetablesGroup" ng-repeat="timetable in data.timetables">
                <div>{{timetable.name}}</div>
                <div class="miniTimetables">
                    <timetable-preview blocks="timetable.fallTimetableBlocks" 
                                        colorScheme="data.sectionColors" 
                                        chartTitle="Fall" 
                                        ng-click="openTimetableViewer(timetable, 'Fall')">
                    </timetable-preview>
                    <timetable-preview blocks="timetable.winterTimetableBlocks" 
                                        colorScheme="data.sectionColors" 
                                        chartTitle="Winter" 
                                        ng-click="openTimetableViewer(timetable, 'Winter')">
                    </timetable-preview>
                </div>
            </div>

            <div>
                <button id="regenerateTimetablesBttn" ng-click="regenerateTimetables()">Regenerate more timetables</button>
            </div>
        </div>
    </div>

    <!-- The side menu panel -->
    <div id="sideMenuPanel">
        <div class="menuItem">
            <h3>Courses</h3>
            <div class="section" ng-repeat="(courseActivity, color) in data.sectionColors">
                <span class="sectionColor" ng-style="{'background-color': color}"></span>
                <span class="sectionLabel">{{courseActivity.split("|")[0] + ": " + courseActivity.split("|")[1]}}</span>
            </div>
        </div>
        <div class="menuItem">
            <h3>Bookmarks</h3>
            <div class="section hoverable clickable" ng-repeat="timetable in data.bookmarkedTimetables">
                <span class="bookmarkedTimetable" ng-click="openTimetableViewer(timetable, 'Fall')">{{timetable.name}}</span>
            </div>
        </div>
    </div>

    <!-- The overlay -->
    <div id="overlayPanel">        
        <div class="contentsPanel">

            <!-- Close button -->
            <span class="closeButton hoverable clickable" ng-click="hideOverlayPanel()">X</span>

            <!-- The timetable viewer panel -->
            <timetable-viewer yearly-timetable="selectedYearlyTimetable"
                              term="selectedTerm"
                              section-colors="data.sectionColors"
                              is-bookmarked="data.isBookmarked(selectedYearlyTimetable)"
                              on-add-bookmark="data.addBookmark(yearlyTimetable)"
                              on-remove-bookmark="data.removeBookmark(yearlyTimetable)">
            </timetable-viewer>
        </div>
    </div>
</div>