archive/hourglass/client/profile/profile.html

<template name="profile">
	<div id="profPage" style="background-color:{{divColor 'header'}};height:{{mainHeight}};">
		<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" 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"  op="0" re="readonly" id="grade">{{grade}}</span>
							</div>
				            <div class="profOptions" style="background-color:{{divColor 'header'}}">
			                  	<p>9th</p>
				                <p>10th</p>
				                <p>11th</p>
				                <p>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}}
							</div>
						{{/if}}

						{{#if profClassTab "creClass"}}
							<!-- <form id="create">
					            <p class="input">School:</p><br>
				              		{{> inputAutocomplete settings=schoolcomplete class="form-control creInput" 		type="text" name="school" placeholder="Example: International Academy" }}
					            <p class="input">Hour:</p><br>
					              	<input class="creInput" type="text" name="hour"><br>
					            <p class="input">Teacher:</p><br>
					              	{{> inputAutocomplete settings=teachercomplete class="form-control creInput" type="text" name="teacher" placeholder="Example: Woods" }}
					            <p class="input">Class Name:</p><br>
					              	<input class="creInput" type="text" name="classname"><br>
					            <p class="input">Privacy:</p><br>
					            <div class="select">
					              	<input class="creInputSel creInput" type="text" name="privacy" op="0" readonly><br>
					              	<div class="creOptions" style="background-color:{{divColor 'header'}}">
					                  	<p>Public</p>
					                  	<p>Private</p>
					              	</div>
					            </div>
					            <p class="input">Category:</p><br>
					            <div class="select">
					              	<input class="creInputSel creInput" type="text" name="category" op="1" readonly><br>
					              	<div class="creOptions" style="background-color:{{divColor 'header'}}">
					                  	<p>Class</p>
					                  	<p>Club</p>
					                  	<p>Other</p>
					              	</div>
					            	</div>
					         	<div class="creSubmit">Submit Request</div>
				          	</form> --> 
						{{/if}}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="overlay">
	    <div class="overlayCont" style="{{overlayDim}};">
	     	<p>Join class?</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>