<template name="sidebarMenuPlate">
    <div class="sectionTitle downOffset">
        <h3>Main</h3>
    </div>
    <div class="mode classes">
        <div class="status" style="background-color:{{modeStatus 'classes'}}"></div>
        <i class="fa fa-university" aria-hidden="true"></i>
        <h4>Classes</h4>
    </div>
    <div class="mode calendar">
        <div class="status" style="background-color:{{modeStatus 'calendar'}}"></div>
        <i class="fa fa-calendar" aria-hidden="true"></i>
        <h4>Calendar</h4>
    </div>
    <div id="filterHead" class="sectionTitle openable">
        <h3>Filters</h3>
        {{#if filterOn}}
            <h3 id="disableFilter">Disable All</h3>
        {{/if}}
        <i class="fa fa-angle-down" aria-hidden="true"></i>
    </div>
    <div id="filterWrapper">
        <div id="typeFilterWrapper" class="sectionTitle openable">
            <h3>By Type</h3>
            <i class="fa fa-angle-down" aria-hidden="true"></i>
        </div>
        <div id="classFilterHolder">
            {{#each types}}
                {{> sideTypeFilter}}
            {{/each}}
        </div>
        <div id="classFilterWrapper" class="sectionTitle openable">
                <h3>By Class</h3>
                <i class="fa fa-angle-down" aria-hidden="true"></i>
        </div> 
        <div id="classListHolder">    
            {{#each myClasses}}
                {{> sidebarClasses}}
            {{/each}}
        </div>
    </div>
    <div id="exportDiv" class="mode">
        <i class="fa fa-download" aria-hidden="true"></i>
        <h4>Export</h4>
    </div>
</template>

<template name="sidebarOptionPlate">
    <div id="settingMode" class="sectionTitle openable downOffset">
        <h3>Classes</h3>
        <i class="fa fa-angle-down" aria-hidden="true"></i>
    </div>
    <div id="settingModeWrapper">
        <div class="mode manageClass">
            <div class="status" style="background-color:{{modeStatus 'manageClass'}}"></div>
            <i class="fa fa-tasks" aria-hidden="true"></i>
            <h4>Manage Classes</h4>
        </div>
        <div class="mode addClass">
            <div class="status" style="background-color:{{modeStatus 'addClass'}}"></div>
            <i class="fa fa-graduation-cap" aria-hidden="true"></i>
            <h4>Join Classes</h4>
        </div>
        <div class="mode createClass">
            <div class="status" style="background-color:{{modeStatus 'createClass'}}"></div>
            <i class="fa fa-book" aria-hidden="true"></i>
            <h4>Create Classes</h4>
        </div>
    </div>
    <div id="preferencesWrapper" class="sectionTitle openable">
        <h3>Preferences</h3>
        <i class="fa fa-angle-down" aria-hidden="true"></i>
    </div>
    <div id="prefCont">
        <div class="prefWrapper">
            <div class="sectionTitle prefText">
                <h3>Theme</h3>
            </div>
            <div id="theme" class="clickModify dropdown" tabindex="1">
                <span>{{pref 'theme'}}</span>
                <i class="fa fa-angle-down" aria-hidden="true"></i>
            </div>
            {{> selectOptionMenu optionName="theme"}}
        </div>
        <div class="prefWrapper">
            <div class="sectionTitle prefText">
                <h3>Default Mode</h3>
            </div>
            <div id="mode" class="clickModify dropdown" tabindex="2">
                <span>{{pref 'mode'}}</span>
                <i class="fa fa-angle-down" aria-hidden="true"></i>
            </div>
            {{> selectOptionMenu optionName="mode"}}
        </div>
        <div class="prefWrapper">
            <div class="sectionTitle prefText">
                <h3>Hide Homework</h3>
            </div>
            <div id="timeHide" class="clickModify dropdown" tabindex="3">
                <span>{{pref 'timeHide'}}</span>
                <i class="fa fa-angle-down" aria-hidden="true"></i>
            </div>
            {{> selectOptionMenu optionName="timeHide"}}
        </div>
        <div class="prefWrapper">
            <div class="sectionTitle prefText">
                <h3>Hide Done</h3>
            </div>
            <div id="done" class="clickModify dropdown" tabindex="4">
                <span>{{pref 'done'}}</span>
                <i class="fa fa-angle-down" aria-hidden="true"></i>
            </div>
            {{> selectOptionMenu optionName="done"}}
        </div>
        <div class="prefWrapper">
            <div class="sectionTitle prefText">
                <h3>Hide Reported</h3>
            </div>
            <div id="hideReport" class="clickModify dropdown" tabindex="5">
                <span>{{pref 'hideReport'}}</span>
                <i class="fa fa-angle-down" aria-hidden="true"></i>
            </div>
            {{> selectOptionMenu optionName="hideReport"}}
        </div>
    </div>
</template>

<template name="sidebarRequestPlate">
    <div class="sectionTitle downOffset">
        <h3>Requests</h3>
    </div>
    <p class="sidebarDesc">Ask for help, submit a bug, or request a feature! We won't bite.</p>
    <textarea id="requestArea" class="restrict" rows="4" cols="50" maxlength="500" placeholder="Enter request here..." style="color:{{divColor 'textColor'}}"></textarea><br>
    <span id="requestRes" class="resText">{{restrict 'requestArea'}}</span>
    <span style="opacity:0">.</span>
    <div id="requestSubmit">
        <span>Send</span>
        <span style="display:none">Request sent!</span>
        <i class="fa fa-paper-plane" aria-hidden="true"></i>
    </div>
</template>

<template name="sidebarCreatePlate">
    <div class="sectionTitle downOffset">
        <h3>Classes</h3>
    </div>
    <p class="sidebarDesc">Pick a class to create work for.</p>
    {{#each myClasses}}
        {{> sidebarClasses}}
    {{/each}}
</template>

<template name="manageClass">
    <div id="backgroundOverlay" style="background-color:{{divColor 'secondaryColor'}}">
        <div id="colLeft">
            <div class="settingHeader">
                <div>
                    <h2>My Classes</h2>
                    <p>Manage Classes</p>
                </div>
                <div class="circleIcon">
                    <i class="fa fa-tasks" aria-hidden="true"></i>
                </div>
            </div>
            <div id="settingClassWrapper">
                <div id="label" class="classBox">
                    <span class="name classText">Class Name</span>
                    <span class="teacher classText">Teacher</span>
                    <span class="hour classText">Hour</span>
                    <span class="subscriptions classText">Members</span>
                </div>
                <div id="classBody">
                    {{#each myClasses}}
                        {{> classDisplay}}
                    {{/each}}
                </div>
            </div>
        </div>
        <div id="colRight" style="background-color:{{divColor 'sidebarColor'}}">
            <div class="settingHeader">
                <div>
                    <h2>Class Information</h2>
                </div>
                <div class="circleIcon">
                    <i class="fa fa-info" aria-hidden="true"></i>
                </div>
            </div>
            <div id="infoClassWrapper">
                <div id="classInfoModeWrapper">
                    <span style="border-bottom: 3px solid {{classInfoMode 'general'}}">General</span>
                    <span style="border-bottom: 3px solid {{classInfoMode 'users'}}">Users</span>
                </div>
                <div id="infoClassCont">
                    {{#if classSelected}}
                        {{#if classInfoMode 'general' 'a'}}
                            {{> classInfoGeneral}}
                        {{else}}
                            {{> classInfoUsers}}
                        {{/if}}
                    {{else}}
                        <p>Click on a class to see its info.</p>
                    {{/if}}
                </div>
            </div>
        </div>
    </div>
</template>

<template name="joinClass">
    <div id="backgroundOverlay" style="background-color:{{divColor 'secondaryColor'}}">
        <div id="colLeft">
            <div class="settingHeader">
                <div>
                    <h2>Available Classes</h2>
                    <p>Join Classes</p>
                </div>
                <div class="circleIcon">
                    <i class="fa fa-graduation-cap" aria-hidden="true"></i>
                </div>
            </div>
            <div id="joinTop">
                <i class="fa fa-search" aria-hidden="true"></i>
                {{> inputAutocomplete id="classSearch" settings=classSettings placeholder="Search..."}}
                <h4 id="private">Join Private Class</h4>
                <input id="privateCode" placeholder="Enter code here...">
            </div>
            <div id="settingClassWrapper">
                <div id="classHeader">
                    <div id="label" class="classBox">
                        <span class="name classText">Class Name</span>
                        <span class="teacher classText">Teacher</span>
                        <span class="hour classText">Hour</span>
                        <span class="subscriptions classText">Members</span>
                    </div>
                </div>
                <div id="classBody">
                    {{#if notsearching}}
                        {{#each classes}}
                            {{> classDisplay}}
                        {{/each}}
                        {{#if noclass}}
                            <h3>No results found...</h3>
                        {{/if}}
                    {{else}}
                        {{#each autocompleteClasses}}
                            {{> classDisplay}}
                        {{/each}}
                        {{#if notfound}}
                            <h3>No results found...</h3>
                        {{/if}}
                    {{/if}}
                </div>
            </div>
        </div>
        <div id="colRight" style="background-color:{{divColor 'sidebarColor'}}">
            <div class="settingHeader">
                <div>
                    <h2>Class Information</h2>
                </div>
                <div class="circleIcon">
                    <i class="fa fa-info" aria-hidden="true"></i>
                </div>
            </div>
            <div id="infoClassWrapper">
                <div id="classInfoModeWrapper">
                    <span style="border-bottom: 3px solid {{classInfoMode 'general'}}">General</span>
                    <span style="border-bottom: 3px solid {{classInfoMode 'users'}}">Users</span>
                </div>
                <div id="infoClassCont">
                    {{#if classSelected}}
                        {{#if classInfoMode 'general' 'a'}}
                            {{> classInfoGeneral}}
                        {{else}}
                            {{> classInfoUsers}}
                        {{/if}}
                    {{else}}
                        <p>Click on a class to see its info!</p>
                    {{/if}}
                </div>
            </div>
        </div>
    </div>
</template>

<template name="createClass">
    <div id="backgroundOverlay" style="background-color:{{divColor 'secondaryColor'}}">
        <div id="colLeft">
            <div class="settingHeader">
                <div>
                    <h2>Create Classes</h2>
                </div>
                <div class="circleIcon">
                    <i class="fa fa-book" aria-hidden="true"></i>
                </div>
            </div>
            <div id="createWrapper">
                <div id="creRules">
                    <p>Submit a request for a class to be approved by an administrator.<br> 
                    You can have up to 8 unapproved classes at once.</p>
                </div>
                <div id="formContainer">
                    <div class="formDiv">
                        <p class="profTitle">**School:</p>
                         <input id="school" class="creInput" type="text" form="school" value="{{pref 'school'}}" readonly>
                   </div>
                   <div class="formDiv">
                    <p class="profTitle">Hour:</p>
                       <input class="creInput" type="text" form="hour" placeholder="Hour">
                   </div>
                   <div class="formDiv">
                        <p class="profTitle">Teacher:</p>
                        {{> inputAutocomplete settings=teacherComplete class="form-control creInput" type="text" form="teacher" placeholder="Teacher | Ex: Marc DeZwaan" }}
                   </div>
                   <div class="formDiv">
                        <p class="profTitle">**Class Name:</p>
                       <input class="creInput" type="text" form="name" placeholder="**Class Name">
                   </div>
                   <div class="formDiv">
                       <p class="profTitle">**Privacy:</p>
                       <input id="creprivacy" style="color:{{divColor 'textColor'}}" class="creInput clickModify dropdown" type="text" form="privacy" placeholder="Click here to edit..." readonly>
                       <div class="optionHolder">
                           {{#each selectOptions 'privacy'}}
                               {{> option}}
                           {{/each}}
                       </div>
                   </div>
                   <div class="formDiv">
                       <p class="profTitle">**Category:</p>
                       <input id="crecategory" style="color:{{divColor 'textColor'}}" class="creInput clickModify dropdown" type="text" form="category" placeholder="Click here to edit..." readonly>
                       <div class="optionHolder">
                           {{#each selectOptions 'category'}}
                               {{> option}}
                           {{/each}}
                       </div>
                   </div>
                   <h3 id="creSubmit" style="border:1px solid {{divColor 'textColor'}}">Submit Request</h3>
                </div>
            </div>
        </div>
    </div>
</template>

<template name="classDisplay">
    <div class="classBox{{box}}" classid="{{_id}}" style="border:1px solid {{divColor 'textColor'}}">
        <span class="name classText">{{name}}</span>
        <span class="teacher classText">{{teachershort}}</span>
        <span class="hour classText">{{hour}}</span>
        <span class="subscribers classText">{{subscribers}}</span>
        {{#if mine}}
            <i class="fa fa-times" aria-hidden="true"></i>
        {{else}}
            {{#if join}}
                <i class="fa fa-plus" aria-hidden="true"></i>
            {{else}}
                <i class="fa fa-times" aria-hidden="true" style="visibility:hidden"></i>
            {{/if}}
        {{/if}}
    </div>
</template>

<template name="classInfoGeneral">
    <div id="privacy">
        {{#if classInfo 'privacy'}}
            <div class="circleIcon">
                <i class="fa fa-lock" aria-hidden="true"></i>
            </div>
            <span>Private</span>
            {{#unless classInfo 'personal'}}
                {{#if classInfo 'mine'}}
                    <div id="deleteClass" class="circleIcon">
                        <i class="fa fa-times" aria-hidden="true"></i>
                    </div>
                {{/if}}
            {{/unless}}
        {{else}}
            <div class="circleIcon">
                <i class="fa fa-unlock-alt" aria-hidden="true"></i>
            </div>
            <span>Public</span>
            {{#unless classInfo 'personal'}}
                {{#if classInfo 'mine'}}
                    <div id="deleteClass" class="circleIcon">
                        <i class="fa fa-times" aria-hidden="true"></i>
                    </div>
                {{/if}}
            {{/unless}}
        {{/if}}
    </div>
    <div class="infoCard" style="border:1px solid {{divColor 'textColor'}}">
        <h4 style="border-bottom:1px solid {{divColor 'textColor'}}">Class Name</h4>
        <span>{{classInfo 'name'}}</span>
    </div>
    <div class="infoCard" style="border:1px solid {{divColor 'textColor'}}">
        <h4 style="border-bottom:1px solid {{divColor 'textColor'}}">Hour</h4>
        <span>{{classInfo 'hour'}}</span>
    </div>
    <div class="infoCard" style="border:1px solid {{divColor 'textColor'}}">
        <h4 style="border-bottom:1px solid {{divColor 'textColor'}}">Teacher</h4>
        <span>{{classInfo 'teacher'}}</span>
    </div>
    <div class="infoCard" style="border:1px solid {{divColor 'textColor'}}">
        <h4 style="border-bottom:1px solid {{divColor 'textColor'}}">Category</h4>
        <span>{{classInfo 'category'}}</span>
    </div>
    <div class="infoCard" style="border:1px solid {{divColor 'textColor'}}">
        <h4 style="border-bottom:1px solid {{divColor 'textColor'}}">Owner</h4>
        {{> classInfoUserDisp classInfo 'admin'}}
        {{#unless classInfo 'personal'}}
            {{#if classInfo 'mine'}}
                <i class="fa fa-pencil-square-o" aria-hidden="true" onmouseover="$(this).css('color','{{divColor 'iconHighlight'}}')" onmouseleave="$(this).css('color','{{divColor 'textColor'}}')"></i>
            {{/if}}
        {{/unless}}
    </div>

    {{> classInfoCode}}

    <div id="changeAdminWrapper">
        <span>Change Admin: </span>
        <input id="changeAdmin">
        <div id="adminSubmit">Change</div>
    </div>
</template>

<template name="classInfoUsers">
    {{#if classInfo 'personal'}}
        <p>It's just you!</p>
    {{else}}
        <div>
            <div class="userAdder">
                <h4>Moderators:</h4>
                {{#if classInfo 'mine'}}
                    <input class="userAddInput" type="text" placeholder="1234@abc.xyz">
                    <i class="fa fa-plus" aria-hidden="true" user="moderators" onmouseover="$(this).css('color','{{divColor 'iconHighlight'}}')" onmouseleave="$(this).css('color','{{divColor 'textColor'}}')"></i>
                {{/if}}
            </div>
            <div class="userHolder">
                {{#each classInfo 'moderators'}}
                    <div class="userDisp" userid="{{_id}}">
                        {{> classInfoUserDisp}}
                    </div>
                {{/each}}
            </div>
        </div>
        <div>
            <div class="userAdder">
                <h4>Banned Users:</h4>
                {{#if classInfo 'mine'}}
                    <input class="userAddInput" type="text" placeholder="1234@abc.xyz">
                    <i class="fa fa-plus" aria-hidden="true" user="banned" onmouseover="$(this).css('color','{{divColor 'iconHighlight'}}')" onmouseleave="$(this).css('color','{{divColor 'textColor'}}')"></i>
                {{/if}}
            </div>
            <div class="userHolder">    
                {{#each classInfo 'banned'}}
                    <div class="userDisp" userid="{{_id}}">
                        {{> classInfoUserDisp}}  
                    </div>
                {{/each}}
            </div>
        </div>
        <div>
            <div class="userAdder">
                <h4>Subscribers:</h4>
            </div>
            <div class="userHolder">    
                {{#each classInfo 'subscribers'}}
                    <div class="userDisp" userid="{{_id}}">
                        {{> classInfoUserDisp}}  
                    </div>
                {{/each}}
            </div>
        </div>
    {{/if}}
</template>

<template name="classInfoUserDisp">
    <span>
        <img src="{{services.google.picture}}">
        {{profile.name}}
        {{#if delete}}
            {{#if classInfo 'mine'}}
            <i class="fa fa-times" aria-hidden="true"></i>
            {{/if}}
        {{/if}}
    </span>
</template>

<template name="classInfoCode">
    {{classInfo 'code'}}
    {{#if code 'exists'}}
        <div class="infoCard" style="border:1px solid {{divColor 'textColor'}}">
            <h4 style="border-bottom:1px solid {{divColor 'textColor'}}">Code</h4>
            <span>{{code 'code'}}</span>
            <input id="copyHolder" value="{{code 'code'}}">
            <i class="fa fa-files-o" aria-hidden="true" onmouseover="$(this).css('color','{{divColor 'iconHighlight'}}')" onmouseleave="$(this).css('color','{{divColor 'textColor'}}')"></i>
            <div id="code">Copied!</div>
        </div>
    {{/if}}
</template>

<template name="classAutoList">
    <span class="name classText">{{name}}</span>
    <span class="teacher classText">{{teacher}}</span>
    <span class="hour classText">{{hour}}</span>
    <span class="subscribers classText">{{subscribers}}</span>
    <span class="subscribers classText">{{_id}}</span>
</template>

<template name="schoolList">
     {{name}}
 </template>
 
 <template name="teacherList">
     {{name}}
 </template>
