<template name="mobile">
	<div class="noScroll" style="background-color: {{divColor 'mainColor'}}">
		<header id="mobileHeader" style="background-color:{{divColor 'mainColor'}}">
			<div id="mSidebarToggle">
				<i class="fa fa-{{buttonTypeHeader}}" style="color:{{iconStatus}}" aria-hidden="true"></i>
			</div>
			<h2>{{schoolName}}</h2>
		</header>
		<div id="mobileBody">
			{{#if showMode 'main'}}
				<h4 class="minorHeader">Main</h4>
				{{#each myWork}}
					{{> mobileClass}}
				{{/each}}
				<h3 class="mNoneText" style="display:{{noneText 'main'}}">Nothing left here!</h3>
			{{/if}}
			{{#if showMode 'done'}}
				<h4 class="minorHeader">Done</h4>
				{{#each myWork "done"}}
					{{> mobileClass}}
				{{/each}}
				<h3 class="mNoneText" style="display:{{noneText 'done'}}">You... should really get to work.</h3>
			{{/if}}
			{{#if showMode 'addWork'}}
				{{> mAddWork}}
			{{/if}}
			{{#if showMode 'editWork'}}
				{{> mEditWork}}
			{{/if}}
			{{#if showMode 'viewWork'}}
				{{> mViewWork}}
			{{/if}}
			{{#if showMode 'settings'}}
				{{> mSettings}}
			{{/if}}
			<div id="mainCircleButton" class="mCircleButton">
				<i class="fa fa-{{buttonType}}" aria-hidden="true"></i>
			</div>
		</div>
		<div id="mOverlay"></div>
		<div id="mSidebar" style="background-color:{{divColor 'sidebarColor'}};border-left:3vw solid {{divColor 'sidebarColor'}}">
			{{#if select 'class'}}
				<p class="selectText">Pick a class to create work for</p>
				<div id="mClassFilterWrapper" class="mSectionTitle">
	                <h3>Classes</h3>
		        </div> 
		        <div id="mClassListHolder">    
		            {{#each myClasses}}
		                {{> mSidebarClasses}}
		            {{/each}}
		        </div>
			{{/if}}
			{{#if select 'type'}}
				<p class="selectText">Pick a type for your work</p>
				<div id="mTypeFilterWrapper" class="mSectionTitle">
		            <h3>Types</h3>
		        </div>
		        <div id="mClassFilterHolder">
		            {{#each types}}
		                {{> mSideTypeFilter}}
		            {{/each}}
		        </div>
			{{/if}}
			{{#if select 'options'}}
				<p class="selectText">Pick your new setting</p>
				<div id="mTypeFilterWrapper" class="mSectionTitle">
		            <h3>{{optionInfo 'title'}}</h3>
		        </div>
		        <div id="mOptionHolder">
		        	{{#each optionInfo 'list'}}
		        		{{> mOptionCard}}
		        	{{/each}}
		        </div>
			{{/if}}
			{{#if select 'none'}}
				{{> defaultSidebar}}
	        {{/if}}
		</div>
	</div>
	{{> sAlert}}
	{{> loginButtons}}
</template>

<template name="mobileClass">
	<div class="mClassContainer" workid="{{_id}}">
		{{#if isDone}}
			<h4 class="mUndoText" workid="{{_id}}">Unmarked as done!</h4>
		{{else}}
			<h4 class="mUndoText" workid="{{_id}}">Marked as done!</h4>
		{{/if}}
		<div class="mUndo" workid="{{_id}}">
			<i class="fa fa-undo" aria-hidden="true"></i>
			<p>Undo</p>	
		</div>
		<div class="mobileClass" style="background-color:{{divColor 'secondaryColor'}}" workid="{{_id}}">
			<div class="mobileType" style="background-color:{{typeColor}}"></div>
			<div class="mobileClassContent">
				<h4 class="mName">{{name}}</h4>
				<h4 class="mDate">{{dueDate}}</h4>
				<h4 class="mClass">{{className}}</h4>
				<h4 class="mDesc">{{shortdesc}}</h4>
				<div style="color:{{doneRatio}}">
    				<i class="fa fa-thumbs-up" aria-hidden="true"></i>	
    				<span>{{confirmationLength}}</span>
    				<i class="fa fa-exclamation-triangle" aria-hidden="true"></i> 
    				<span>{{reportLength}}</span> 
                </div>
			</div>
		</div>
	</div>
</template>

<template name="defaultSidebar">
	<div class="mSectionTitle downOffset">
        <h3>Main</h3>
    </div>
	<div class="mSectionMode">
		<div class="mStatus" style="background-color:{{modeStatus 'main'}}"></div>
        <i class="fa fa-list-ul" aria-hidden="true"></i>
        <h4>Main Work</h4>
	</div>
	<div class="mSectionMode">
		<div class="mStatus" style="background-color:{{modeStatus 'done'}}"></div>
        <i class="fa fa-check-square" aria-hidden="true"></i>
        <h4>Done Work</h4>
	</div>
	<div id="mFilterHead" class="mSectionTitle mOpenable downOffset">
        <h3>Filters</h3>
    	<h3 id="mDisableFilter" style="display:{{filterOn}}">Disable All</h3>
        <i class="fa fa-angle-down" aria-hidden="true"></i>
    </div>
    <div id="mFilterWrapper">
        <div id="mTypeFilterWrapper" class="mSectionTitle mOpenable">
            <h3>By Type</h3>
            <i class="fa fa-angle-down" aria-hidden="true"></i>
        </div>
        <div id="mClassFilterHolder">
            {{#each types}}
                {{> mSideTypeFilter}}
            {{/each}}
        </div>
        <div id="mClassFilterWrapper" class="mSectionTitle mOpenable">
            <h3>By Class</h3>
            <i class="fa fa-angle-down" aria-hidden="true"></i>
        </div> 
        <div id="mClassListHolder">    
            {{#each myClasses}}
                {{> mSidebarClasses}}
            {{/each}}
        </div>
    </div>
    <div id="mSettings" class="mSectionTitle mSectionMode">
    	<i class="fa fa-cog" aria-hidden="true"></i>
    	<h3>Settings</h3>
    </div>
    <div id="mSignOut" class="mSectionTitle mSectionMode">
    	<i class="fa fa-sign-out" aria-hidden="true"></i>
    	<h3>Sign out</h3>
    </div>
</template>

<template name="mSideTypeFilter">
	<div class="mSideFilter" type="{{type}}">
        <div class="mStatus" style="background-color:{{selected}}"></div>
        <span class="mSideTypeName">{{typeName}}</span>
    </div>
</template>

<template name="mSidebarClasses">
    <div class="mSideClass" classid="{{_id}}">
        <div class="mStatus" style="background-color:{{selected}}"></div>
        <span class="mSideClassName">{{name}}</span>
        <span class="mSideClassHour">{{hour}}</span>
    </div>
</template>

<template name="mOptionCard">
	<div class="mSideFilter">
        <span class="mOptionText">{{alias}}</span>
    </div>
</template>

<template name="mAddWork">
	<h4 class="minorHeader">Add Work</h4>
	<input id="name" class="mAddForm restrict" form="name" maxLength="50" placeholder="Name">
	<input id="class" class="mAddForm" form="class" value="{{work 'class'}}">
	<div id="dueDateCont">
		<input id="dueDate" class="mAddForm" form="dueDate" placeholder="Due Date" readonly>
		<i class="fa fa-angle-down" aria-hidden="true"></i>
	</div>
	<div id="typeCont">
		<input id="type" class="mAddForm" form="type" placeholder="Type" value="{{work 'type'}}" readonly>
		<i class="fa fa-angle-down" aria-hidden="true"></i>
	</div>
	<textarea id="description" class="mAddForm restrict" form="description" rows="8" maxLength="300" placeholder="Description"></textarea>
	<div id="mRestrictText">
		<span class="resText">{{restrict 'name'}}</span>
		<span class="resText">{{restrict 'description'}}</span>
	</div>
</template>

<template name="mEditWork">
	<h4 class="minorHeader">Edit Work</h4>
	<input id="name" class="mAddForm restrict" form="name" maxLength="50" placeholder="Name" value="{{work 'name'}}">
	<input id="class" class="mAddForm" form="class" value="{{work 'class'}}" onfocus="this.blur()" readonly>
	<div id="dueDateCont">
		<input id="dueDate" class="mAddForm" form="dueDate" placeholder="Due Date" value="{{work 'dueDate'}}"  onfocus="this.blur()" readonly>
		<i class="fa fa-angle-down" aria-hidden="true"></i>
	</div>
	<div id="typeCont">
		<input id="type" class="mAddForm" form="type" placeholder="Type" value="{{work 'type'}}"  onfocus="this.blur()" readonly>
		<i class="fa fa-angle-down" aria-hidden="true"></i>
	</div>
	<textarea id="description" class="mAddForm restrict" form="description" rows="8" maxLength="300" placeholder="Description" value="{{work 'description'}}"></textarea>
	<div id="mRestrictText"> 
		<span class="resText">{{restrict 'name'}}</span>
		<span class="resText">{{restrict 'description'}}</span>
	</div>
	<div id="mConfirm" class="mCircleButton" style="background-color:{{work 'userConfirm'}}">
		<i class="fa fa-thumbs-up" aria-hidden="true" ></i>
	</div>
	<p id="mConfirmNum" class="mNum">{{work 'confirmations'}}</p>
	<div id="mReport" class="mCircleButton" style="background-color:{{work 'userReport'}}">
		<i class="fa fa-exclamation-triangle" aria-hidden="true" ></i>
	</div>
	<p id="mReportNum" class="mNum">{{work 'reports'}}</p>
	<!-- <h4 id="mDelete">Delete Work</h4> -->
</template>

<template name="mViewWork">
	<h4 class="minorHeader">View Work</h4>
	<input id="name" class="mAddForm restrict" form="name" maxLength="50" placeholder="Name" value="{{work 'name'}}" onfocus="this.blur()" readonly>
	<input id="class" class="mAddForm" form="class" value="{{work 'class'}}" onfocus="this.blur()" readonly>
	<div id="dueDateCont">
		<input id="dueDate" class="mAddForm" form="dueDate" placeholder="Due Date" value="{{work 'dueDate'}}"  onfocus="this.blur()" readonly>
	</div>
	<div id="typeCont">
		<input id="type" class="mAddForm" form="type" placeholder="Type" value="{{work 'type'}}" onfocus="this.blur()" readonly>
	</div>
	<textarea id="description" class="mAddForm restrict" form="description" rows="8" maxLength="300" placeholder="Description" value="{{work 'description'}}" onfocus="this.blur()" readonly></textarea>
	<div id="mRestrictText"> 
		<span class="resText">{{restrict 'name'}}</span>
		<span class="resText">{{restrict 'description'}}</span>
	</div>
	<div id="mConfirm" class="mCircleButton" style="background-color:{{work 'userConfirm'}}">
		<i class="fa fa-thumbs-up" aria-hidden="true" ></i>
	</div>
	<p id="mConfirmNum" class="mNum">{{work 'confirmations'}}</p>
	<div id="mReport" class="mCircleButton" style="background-color:{{work 'userReport'}}">
		<i class="fa fa-exclamation-triangle" aria-hidden="true" ></i>
	</div>
	<p id="mReportNum" class="mNum">{{work 'reports'}}</p>
</template>

<template name="mSettings">
	<div id="theme" class="mOption">
		<p class="mOpTitle">Theme:</p>
		<p class="mOpVal">{{pref 'theme'}}</p>
	</div>
	<div id="timeHide" class="mOption">
		<p class="mOpTitle">Hide Homework:</p>
		<p class="mOpVal">{{pref 'timeHide'}}</p>
	</div>
	<div id="hideReport" class="mOption">
		<p class="mOpTitle">Hide Reported:</p>
		<p class="mOpVal">{{pref 'hideReport'}}</p>
	</div>
</template>