<head>
    <title>Hourglass</title>
    <link rel="icon" href="/favicon.ico?v=2">
</head>

<template name="main">
    <div class="noScroll">
        <header id="mainHeader" style="background-color:{{userProfile}}{{divColor 'mainColor'}}{{textColor}}{{defaultMode}}{{refetchEvents}}">
            <i class="fa fa-bars" aria-hidden="true" style="color:{{iconColor 'menu'}}"></i>
            <h1>Hourglass</h1><h2>{{schoolName}}</h2>
            <i class="fa fa-cog" aria-hidden="true" style="color:{{iconColor 'options'}}"></i>
            <div id="dropdown">
                <img src="{{avatar}}">
            </div>
            <div id="headerBar" style="background-color:{{divColor 'iconHighlight'}}"></div>
        </header>
        <div id="menuContainer" style="left:{{menuStatus}};background-color:{{divColor 'sidebarColor'}}">
            <div id="modes">
                <div class="mode classes">
                    <i class="fa fa-university" aria-hidden="true"></i>
                    <h4 style="color:{{modeStatus 'classes'}}">Classes</h4>
                </div>
                <div class="mode calendar">
                    <i class="fa fa-calendar" aria-hidden="true"></i>
                    <h4 style="color:{{modeStatus 'calendar'}}">Calendar</h4>
                </div>
            </div>
            <div id="functions">
                <div class="function manageClass" onclick="window.location='/profile'">
                    <i class="fa fa-tasks" aria-hidden="true"></i>
                    <h4>Manage Classes</h4>
                </div>
            </div>
            {{#if myClasses}}
                <div id="classFilterHolder">
                    <h3>Filters</h3>
                    {{#each types}}
                        {{> sideTypeFilter}}
                    {{/each}}
                </div>
                <div id="classListHolder">
                    <h3>By Class </h3>
                    {{#if calCreWork}}
                        <h3 id="calCreWork">-- Pick a class</h3>
                    {{else}}
                        {{#if filterOn}}
                            <h3 id="disableFilter">Disable All</h3>
                        {{/if}}
                    {{/if}}
                    <div id="sideClassWrapper">
                        {{#each myClasses}}
                            {{> sidebarClasses}}
                        {{/each}}
                    </div>
                </div>
            {{/if}}
            <div id="exportDiv" class="sideFilter">
                <i id="export" class="fa fa-download" aria-hidden="true"></i>
                <h4 id="exportText">Export</h4>
            </div>
        </div>
        <div id="optionsContainer" style="right:{{optionsStatus}};background-color:{{divColor 'sidebarColor'}}">
            <h3>Preferences</h3>
            <div id="prefCont">
                <div class="prefWrapper">
                    <p class="prefTitle">Theme:</p>
                    <div id="theme" class="clickModify dropdown" tabindex="1">
                        <span>{{pref 'theme'}}</span>
                        <i class="fa fa-caret-down" aria-hidden="true"></i>
                    </div>
                    <div class="optionHolder">
                        {{#each selectOptions 'theme'}}
                            {{> option}}
                        {{/each}}
                    </div>
                </div>
                <div class="prefWrapper">
                    <p class="prefTitle">Default Mode:</p>
                    <div id="mode" class="clickModify dropdown" tabindex="2">
                        <span>{{pref 'mode'}}</span>
                        <i class="fa fa-caret-down" aria-hidden="true"></i>
                    </div>
                    <div class="optionHolder">
                        {{#each selectOptions 'mode'}}
                            {{> option}}
                        {{/each}}
                    </div>
                </div>
                <div class="prefWrapper">
                    <p class="prefTitle">Hide Homework:</p>
                    <div id="timeHide" class="clickModify dropdown" tabindex="3">
                        <span>{{pref 'timeHide'}}</span>
                        <i class="fa fa-caret-down" aria-hidden="true"></i>
                    </div>
                    <div class="optionHolder">
                        {{#each selectOptions 'timeHide'}}
                            {{> option}}
                        {{/each}}
                    </div>
                </div>
                <div class="prefWrapper">
                    <p class="prefTitle">Hide Done:</p>
                    <div id="done" class="clickModify dropdown" tabindex="4">
                        <span>{{pref 'done'}}</span>
                        <i class="fa fa-caret-down" aria-hidden="true"></i>
                    </div>
                    <div class="optionHolder">
                        {{#each selectOptions 'done'}}
                            {{> option}}
                        {{/each}}
                    </div>
                </div>
                <div class="prefWrapper">
                    <p class="prefTitle">Hide Reported:</p>
                    <div id="hideReport" class="clickModify dropdown" tabindex="5">
                        <span>{{pref 'hideReport'}}</span>
                        <i class="fa fa-caret-down" aria-hidden="true"></i>
                    </div>
                    <div class="optionHolder">
                        {{#each selectOptions 'hideReport'}}
                            {{> option}}
                        {{/each}}
                    </div>
                </div>
            </div>
        </div>

        <img id="bg" src={{bgSrc}} style="min-width:{{screen}}">
        <div id="mainBody{{highlight}}">
            {{#if currMode 'classes'}}
                <div id="classesMode">
                    {{#each myClasses}}
                        {{> classesMode}}
                    {{/each}}
                </div>
            {{/if}}

            {{#if currMode 'calendar'}}
                <div id="calendar">
                    {{> fullcalendar calendarOptions}}
                </div>
            {{/if}}
        </div>

        <div class="overlay">
            <div id="editWork" style="width:{{screen '.4'}}">
                <div id="editWorkCont" style="background-color:{{divColor 'mainColor'}};border-top:10px solid {{work 'typeColor'}}">
                    <div id="workInfoContainer">
                        {{#if inRole}}
                            {{> workDisplayEdit}}
                        {{else}}
                            {{> workDisplay}}
                        {{/if}}
                        {{#unless newWork}}
                            <div id="workInfo2">
                                <div id="workComments">
                                    <h3>Comments</h3>
                                    <div>
                                        <textarea id="workComment" class="restrict" rows="4" cols="50" maxlength="200"></textarea><br>
                                        <div>
                                            <span class="resText">{{restrict 'workComment'}}</span>
                                            <div id="commentSubmit">Submit</div>
                                        </div>
                                    </div>
                                    <div id="comment">
                                        {{#each work 'comments'}}
                                            {{> comment}}
                                        {{/each}}
                                    </div>
                                </div> 
                            </div>
                        {{/unless}}
                    </div>
                    {{#unless newWork}}
                        <div id="workToggle">
                            <div id="doneUsers">
                                {{#each work 'done'}}
                                    {{> doneUsers}}
                                {{/each}}
                            </div>
                            <div id="toggleButtons">
                                <div id="markDone" style="background-color:{{work 'doneCol'}}">
                                    <i class="fa fa-check-square-o" aria-hidden="true"></i>
                                    <p>{{work 'doneText'}}</p>
                                </div>
                                <div id="markConfirm" style="color:{{work 'userConfirm'}}">
                                    <i class="fa fa-thumbs-up" aria-hidden="true"></i>
                                    <p>{{work 'confirmations'}}</p>
                                </div>
                                <div id="markReport" style="color:{{work 'userReport'}}">
                                    <i class="fa fa-thumbs-down" aria-hidden="true"></i>
                                    <p>{{work 'reports'}}</p>
                                </div>
                                <div class="workCreator doneUser" onclick="window.location='/user/{{work 'email'}}'">
                                    <div style="display:inline-block;width:{{screen '3' '140'}}">
                                        <img src="{{work 'avatar'}}" style="width:{{screen '3' '140'}};height:{{screen '3' '140'}}">
                                    </div>
                                    <div style="display:inline-block;margin-left:0.3vw">
                                        <span>{{work 'creator'}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {{/unless}}
                    {{#if inRole}}
                        {{#if newWork}}
                            <div id="workSubmit">Save</div>
                        {{else}}
                            <div id="workDelete">Delete</div>
                        {{/if}}
                    {{/if}}
                </div>
            </div>
        </div>

        <div id="userDropdown" style="background-color:{{divColor 'userDropdownColor'}}">
            <div id="userTab" style="border-bottom: 3vh solid {{divColor 'userDropdownColor'}}"></div>
            <div id="userDropdownAvatar" style="background-color:{{divColor 'userDropdownColor'}}">
                <img src="{{avatar}}">
                <p>{{username}}</p>
            </div>
            <div id="userFunctions" style="background-color:{{divColor 'userDropdownColor'}}">
                <div id="myprofile" class="userFunction" onclick="window.location='/profile';">
                    <i class="fa fa-user" aria-hidden="true"></i>
                    <p>My Profile</p>
                </div>
                {{#if admin}}
                    <div id="myprofile" class="userFunction" onclick="window.location='/admin';">
                        <i class="fa fa-cogs" aria-hidden="true"></i>
                        <p>Admin Panel</p>
                    </div>
                {{/if}}
            </div>
            <div style="background-color:{{divColor 'userDropdownColor'}}">
                <div id="myprofile" class="userFunction" onclick="document.getElementById('login-buttons-logout').click();">
                    <i class="fa fa-sign-out" aria-hidden="true"></i>
                    <p>Sign out</p>
                </div>
            </div>
        </div>

        <div id="requests" style="bottom:{{requestStatus}};background-color:{{divColor 'secondaryColor'}}">
            <div id="requestTab" style="background-color:{{divColor 'secondaryColor'}}">
                <i class="fa fa-question" aria-hidden="true"></i>
            </div>
            <p>Send an help request, feature, or bug report.</p>
            <textarea id="requestArea" class="restrict" rows="4" cols="50" maxlength="500" placeholder="Enter request here..."></textarea><br>
            <div id="requestCont" style="background-color:{{divColor 'secondaryColor'}}">
                <span class="resText">{{restrict 'requestArea'}}</span>
                <div id="requestSubmit">Send</div>
            </div>
        </div>
        {{> loginButtons}}
    </div>
</template>

<template name="sidebarClasses">
    <div class="sideClass" classid="{{_id}}">
        <div>
            <p class="sideClassName">{{name}}</p>
            <p class="sideClassHour">{{hour}}</p>
        </div>
        <div>
            {{#if selected}}
                <i class="fa fa-dot-circle-o" aria-hidden="true"></i>
            {{/if}}
        </div>
    </div>
</template>

<template name="classesMode">
    <div class="classWrapper">
        <div class="mainClass" style="background-color:{{divColor 'classCardColor'}}">
            <div class="classInfo"> <!-- class color -->
                <h3 class="mainClassName">{{name}}</h3>
                <p class="mainClassHour">{{hour}}</p>
                <p class="mainClassTeacher">{{teacher}}</p>
            </div>
            <div class="creWork" classid="{{_id}}">
                <i class="fa fa-plus" aria-hidden="true"></i>
                <h4>Add Work</h4>
            </div>
            <div class="workHolder">
                {{#each thisClassWork}}
                    {{> classModeWork}}
                {{/each}}
            </div>
        </div>
    </div>
</template>

<template name="classModeWork">
    <div class="workCard" workid="{{_id}}" classid="{{classid}}" type="{{type}}">
        <div class="cWorkType" style="background-color:{{typeColor}}"></div>
        <div class="cWorkCont">
            <div class="cWorkTop">
                <h3 class="cWorkName">{{name}}</h3>
                <span class="cWorkCreator">{{creator}}</span>
            </div>
            <div class="cWorkBottom">
                <span class="cWorkDate" style="font-weight:{{cardDate}}">{{dueDate}}</span>
                <div style="color:{{doneRatio}}">
    				<i class="fa fa-thumbs-up" aria-hidden="true"></i>	
    				<span>{{confirmationLength}}</span>
    				<i class="fa fa-thumbs-down" aria-hidden="true"></i> 
    				<span>{{reportLength}}</span> 
                </div>
			</div>
		</div>
    </div>
</template>

<template name="comment">
    <div class="commentBox">
        <div class="commentAvatarCont">
            <img class="commentAvatar" src='{{avatar}}' onclick="window.location='/user/{{email}}'">
        </div>
        <div class="commentInfo">
            <span class="commentComment">{{comment}}</span><br>
            <span class="commentUser" onclick="window.location='/user/{{email}}'">{{user}}</span>
            <span class="commentDate">{{date}}</span>
        </div>
    </div>
</template>

<template name="doneUsers">
    <div class="doneUser" onclick="window.location='/user/{{email}}'">
        <div style="display:inline-block">
            <img src='{{avatar}}' style="width:{{screen '3' '140'}};height:{{screen '3' '140'}}">
        </div>
        <div style="display:inline-block;margin-left:0.3vw">
            <span>{{user}}</span>
        </div>
    </div>
</template>

<template name="sideTypeFilter">
    <div class="sideFilter" type="{{type}}">
        <div>
            <p class="sideTypeName">{{typeName}}</p>
            {{#if selected}}
                <i class="fa fa-dot-circle-o" aria-hidden="true"></i>
            {{/if}}
        </div>
    </div>
</template>

<template name="option">
    <p class="optionText" style="background-color:{{divColor 'mainColor'}}">{{alias}}</p>
</template>

<template name="workDisplay">
    <div id="workNameDiv">
        <span id="wName" class="info">{{work 'name'}}</span>
    </div>
    <div id="workInfo1">
        <div>
            <span class="workTitle">Due Date:</span><br>
            <span id="wDescription" class="info">{{work 'dueDate'}}</span>
        </div>
        <div>
            <span class="workTitle">Description:</span><br>
            <span id="wDueDate" class="info">{{work 'description'}}</span>
        </div>
        <div>
            <span class="workTitle">Type:</span>
            <span id="wType" class="info">{{work 'type'}}</span>
        </div>
        <!-- <div id="workAttach">Attach other files</div>
        <div id="workAttachmentHolder">
            {{#each work 'attachments'}}
                <a href={{link}}>{{filename}}</a>
            {{/each}}
        </div> -->
    </div>
</template>

<template name="workDisplayEdit">
    <div id="workNameDiv">
        <input id="wName" class="clickModify restrict" style="color:{{divColor 'textColor'}}" value="{{work 'name'}}" tabindex="10" maxLength="50">
        <span class="resText">{{restrict 'wName'}}</span>
    </div>
    <div id="workInfo1">
        <div>
            <span class="workTitle">Due Date:</span><br>
            <input id="wDueDate" class="clickModify" style="color:{{divColor 'textColor'}}" value="{{work 'dueDate'}}" tabindex="11" readonly>
        </div>
        <div>
            <span class="workTitle">Description:</span><br>
            <textarea id="wDescription" class="clickModify restrict" style="color:{{divColor 'textColor'}}" value="{{work 'description'}}" rows="5" tabindex="12" maxLength="150"></textarea>
            <span style="opacity:0">.</span>
            <span class="resText">{{restrict 'wDescription'}}</span>
        </div>
        <div>
            <span class="workTitle">Type:</span>
            <div id="typeWrapper">
                <div id="wType" class="clickModify dropdown" tabindex="13">
                    <span>{{work 'type'}}</span>
                    <i class="fa fa-caret-down" aria-hidden="true"></i>
                </div>
                <div class="optionHolder type">
                    {{#each selectOptions 'type'}}
                        {{> option}}
                    {{/each}}
                </div>
            </div>
        </div>
        <!-- <div id="workAttach">Attach other files</div>
        <div id="workAttachmentHolder">
            {{#each work 'attachments'}}
                <a href={{link}}>{{filename}}</a>
            {{/each}}
        </div> -->
    </div>
</template>
