archive/hourglass/client/profile/profile.html

<template name="profile">
	<div id="profPage" style="background-color:{{divColor 'header'}};height:{{mainHeight}};">
		<div id="mainpage" onclick="window.location='/'"><h2>Main Page</h2></div>
		<div id="profMainContainer" style="{{mainCenter}}">
			<div id="profBanner" style="{{banner}};"></div>
			<div id="profAvatar" style="{{avatar}};{{avatarDim}}"></div>
			<div id="motdBox">
				<span class="username">{{username}} - </span><span class="change mo" restrict="50" id="motd">{{motd}}</span>
			</div>
			<div id="profCards">
				<div id="profInfo" class="card" style="background-color:{{divColor 'cards'}}">
					<h3 class="profHea">About</h3>
					<div id="about">
						<div>
							<p class="profTitle">School Name:</p>
							<span class="change" id="school">{{school}}</span>
						</div>
						<br>
						<div>
							<div>
							<p class="profTitle">Grade:</p>
							<span class="change radio" opc="0" op="0" re="readonly" id="grade">{{grade}}</span>
							</div>
				            <div class="profOptions" style="background-color:{{divColor 'header'}}">
			                  	<p class="profOptionText">9th</p>
				                <p class="profOptionText">10th</p>
				                <p class="profOptionText">11th</p>
				                <p class="profOptionText">12th</p>
				            </div>
			            </div>
			        </div>
				</div>
				<div id="profClasses" class="card" style="background-color:{{divColor 'cards'}};height:{{profClassHeight}};">
					<h3 class="profHea">Classes</h3>
					<div id="classes">
						<div id="profFunctions">
							<div class="profFunction manageClass">
					        	<i class="fa fa-tasks" aria-hidden="true"></i>
					        	<h4 style="color:{{profClassTabColor 'manClass'}}">Manage my Classes</h4>
					      	</div>
					      	<div class="profFunction addClass">
					        	<i class="fa fa-plus" aria-hidden="true"></i>
					        	<h4 style="color:{{profClassTabColor 'addClass'}}">Join a Class</h4>
					      	</div>
					      	<div class="profFunction createClass">
					        	<i class="fa fa-graduation-cap" aria-hidden="true"></i>
					        	<h4 style="color:{{profClassTabColor 'creClass'}}">Create a Class</h4>
					      	</div>
					    </div>
						<div id="profClassInfoHolder">
						{{#if profClassTab "manClass"}}
							<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 class="classHolder" style="max-height:{{classHolderHeight}}">
								{{#each myClasses}}
									{{> classDisplay}}
								{{/each}}
							</div>
						{{/if}}

						{{#if profClassTab "addClass"}}
							<i class="fa fa-search" aria-hidden="true"></i>
							{{> inputAutocomplete id="profClassSearch" settings=classsettings placeholder="Search..."}}
							<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 class="classHolder" style="max-height:{{classHolderHeight}}">
							{{#if notsearching}}
								{{#each classes}}
									{{> classDisplay}}
								{{/each}}
							{{else}} 
								{{#each autocompleteClasses}}
									{{> classDisplay}}
								{{/each}}
								{{#if notfound}}
										<h3>No results found...</h3>
								{{/if}}
							{{/if}}
							</div>
						{{/if}}

						{{#if profClassTab "creClass"}}
							<div id="creRules"><p>Insert description and rules of create a class --Will style later--</p></div>
							<form id="create">
								<div id="formContainer">
									<div>
						            	<p class="profTitle">School:</p>
				              			{{> inputAutocomplete settings=schoolcomplete class="form-control creInput" 		type="text" name="school" placeholder="Example: International Academy" }}
					              	</div>
					              	<div>
						            	<p class="profTitle">Hour:</p>
						              	<input class="creInput" type="text" name="hour">
						            </div>
						            <div>
						            	<p class="profTitle">Teacher:</p>
						              	{{> inputAutocomplete settings=teachercomplete class="form-control creInput" type="text" name="teacher" placeholder="Example: Woods" }}
						            </div>
						            <div>
						            	<p class="profTitle">Class Name:</p>
						              	<input class="creInput" type="text" name="classname">
						            </div>
						            <div>
							            <p class="profTitle">Privacy:</p>
						              	<input class="creInput radio op" type="text" name="privacy" opc="1" op="1" readonly>
						              	<div class="profOptions creOp" style="background-color:{{divColor 'header'}}">
						                  	<p class="profOptionText">Public</p>
						                  	<p class="profOptionText">Private</p>
						              	</div>
					              	</div>
					              	<div>
							            <p class="profTitle">Category:</p>
						              	<input class="creInput radio op" type="text" name="category" opc="1" op="2" readonly>
						              	<div class="profOptions creOp" style="background-color:{{divColor 'header'}}">
						                  	<p class="profOptionText">Class</p>
						                  	<p class="profOptionText">Club</p>
						                  	<p class="profOptionText">Other</p>
						              	</div>
							        </div>
						        </div>
						        <h3 id="creSubmit">Submit Request</h3>
				          	</form> 
						{{/if}}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="overlay">
	    <div class="overlayCont" style="{{overlayDim}};">
	     	<p>{{confirmText}}</p>
	     	<i class="fa fa-check-circle-o" aria-hidden="true"></i>
      		<i class="fa fa-times-circle-o" aria-hidden="true"></i>
	    </div>
  	</div>
</template>

<template name="classDisplay">
	<div class="classBox" classid="{{_id}}">
		<span class="name classText">{{name}}</span>
		<span class="teacher classText">{{teacher}}</span>
		<span class="hour classText">{{hour}}</span>
		<span class="subscribers classText">{{subscribers}}</span>
	</div>
</template>

<template name="schoollist">
    {{name}}
</template>

<template name="teacherlist">
    {{teacher}}
</template>