<template name="profile">
  {{> sAlert}}
	<div class="noScroll">
		<div id="mainpage{{userProfile}}"><h2>Main Page</h2></div>
		<div id="logout2" onclick='document.getElementById("login-buttons-logout").click();'><h2>Logout</h2></div>
		<div id="profWrapper">
			<div id="profPage" style="background-color:{{divColor 'mainColor'}};min-width:{{screen}}{{textColor}}{{loadNew}}">
				<div id="profMainContainer">
					<div id="profTop">
						<img id="profBanner" src='{{banner}}' alt="Banner">
						<img id="profAvatar" src='{{avatar}}' alt="Avatar">
						<div id="motdBox">
							<span class="username">{{username}} - </span>
							<span class="change mo" restrict="50" id="motd">{{motd}}</span>
							<span id="motdrestrict">{{commentLength}}</span>
						</div>
					</div>
					<div id="profCards">
						<div id="cardColLeft">
							<!-- Card 1 -->
							<div id="profInfo" class="card" style="background-color:{{divColor 'secondaryColor'}}">
								<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 class="radioContainer">
										<div>
										<p class="profTitle">Grade:</p>
										<span class="change radio" re="readonly" id="grade">{{grade}}</span>
										</div>
							            <div class="profOptions">
						                  	<p class="profOptionText"  style="background-color:{{divColor 'mainColor'}}">9th</p>
							                <p class="profOptionText"  style="background-color:{{divColor 'mainColor'}}">10th</p>
							                <p class="profOptionText"  style="background-color:{{divColor 'mainColor'}}">11th</p>
							                <p class="profOptionText"  style="background-color:{{divColor 'mainColor'}}">12th</p>
							            </div>
						            </div>
						        </div>
							</div>
							<!-- Card 2 -->
							<div id="profPreferences" class="card" style="background-color:{{divColor 'secondaryColor'}}">
								<h3 class="profHea">Preferences</h3>
								<div id="preferences">
						            <div class="radioContainer">
						                <div class="inputRadio">
						                <p class="profTitle">Theme:</p>
						                <span class="change radio" re="readonly" id="prefTheme">{{themeName}}</span>
						                </div>
						                <div class="profOptions">
						                    <p class="profOptionText"  style="background-color:{{divColor 'mainColor'}}">Light</p>
						                    <p class="profOptionText"  style="background-color:{{divColor 'mainColor'}}">Dark</p>
						                </div>
						            </div>
						            <br>
						            <div class="radioContainer">
						                <div class="inputRadio">
						                <p class="profTitle">Default Mode:</p>
						                <span class="change radio" re="readonly" id="prefMode">{{pref 'mode'}}</span>
						                </div>
						                <div class="profOptions">
						                    <p class="profOptionText"  style="background-color:{{divColor 'mainColor'}}">Classes</p>
						                    <p class="profOptionText"  style="background-color:{{divColor 'mainColor'}}">Calendar</p>
						                </div>
						            </div>
						            <br>
						            <div class="radioContainer">
						                <div class="inputRadio">
						                <p class="profTitle">Hide Homework:</p>
						                <span class="change radio" re="readonly" id="prefHide">{{pref 'timeHide'}}</span>
						                </div>
						                <div class="profOptions">
						                    <p class="profOptionText"  style="background-color:{{divColor 'mainColor'}}">1 Day</p>
						                    <P class="profOptionText"  style="background-color:{{divColor 'mainColor'}}">2 Days</p>
						                    <p class="profOptionText"  style="background-color:{{divColor 'mainColor'}}">1 Week</p>
						                    <p class="profOptionText"  style="background-color:{{divColor 'mainColor'}}">1 Month</p>
						                    <p class="profOptionText"  style="background-color:{{divColor 'mainColor'}}">Never</p>
						                </div>
						            </div>
						            <br>
						            <div class="radioContainer">
						                <div class="inputRadio">
						                <p class="profTitle">Hide Done:</p>
						                <span class="change radio" re="readonly" id="prefDone">{{pref 'done'}}</span>
						                </div>
						                <div class="profOptions">
						                    <p class="profOptionText"  style="background-color:{{divColor 'mainColor'}}">Yes</p>
						                    <p class="profOptionText"  style="background-color:{{divColor 'mainColor'}}">No</p>
						                </div>
						            </div>
						            <br>
						            <div class="radioContainer">
						                <div class="inputRadio">
						                <p class="profTitle">Hide Reported:</p>
						                <span class="change radio" re="readonly" id="prefReport">{{pref 'hideReport'}}</span>
						                </div>
						                <div class="profOptions">
						                    <p class="profOptionText"  style="background-color:{{divColor 'mainColor'}}">Yes</p>
						                    <p class="profOptionText"  style="background-color:{{divColor 'mainColor'}}">No</p>
						                </div>
						            </div>
						        </div>
							</div>
						</div>
						<div id="cardColRight">
							<!-- Card 3 -->
							<div id="profClasses" class="card" style="background-color:{{divColor 'secondaryColor'}};">
								<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">
											{{#each myClasses}}
												{{> classDisplay}}

											{{/each}}
											{{#if noclass}}
												<h3>No results found...</h3>
											{{/if}}
										</div>
									{{/if}}

									{{#if profClassTab "addClass"}}
										<div id="joinTop">
											<i class="fa fa-search" aria-hidden="true"></i>
											{{> inputAutocomplete id="profClassSearch" settings=classSettings placeholder="Search..."}}
											<h4 id="private">Join Private Class</h4>
										</div>
										<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">
										{{#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>
									{{/if}}

									{{#if profClassTab "creClass"}}
										<div id="creRules"><p>Submit a request for a class to be approved by an administrator.</p></div>
										<div id="formContainer">
											<div class="formDiv">
								            	<p class="profTitle">School:</p>
						              			{{> inputAutocomplete settings=schoolComplete class="form-control creInput" 		type="text" name="school" placeholder="Example: International Academy" }}
							              	</div>
							              	<div class="formDiv">
								            	<p class="profTitle">Hour:</p>
								              	<input class="creInput" type="text" name="hour">
								            </div>
								            <div class="formDiv">
								            	<p class="profTitle">Teacher:</p>
								              	{{> inputAutocomplete settings=teacherComplete class="form-control creInput" type="text" name="teacher" placeholder="Example: Woods" }}
								            </div>
								            <div class="formDiv">
								            	<p class="profTitle">Class Name:</p>
								              	<input class="creInput" type="text" name="classname">
								            </div>
								            <div class="formDiv">
									              <p class="profTitle">Privacy:</p>

                                <!-- <script type="text/javascript"> -->
                                <!-- $(document).ready(function() { -->
                                <!-- $(".js-example-basic-single").select2(); -->
                                <!-- $('select').on('select2:open', function (e) { -->
                                <!-- console.log("hello"); -->
                                <!-- $('.select2-dropdown').hide(); -->
                                <!-- setTimeout(function(){ $('.select2-dropdown').slideDown("slow", "easeInOutQuint"); }, 200); -->
                                <!-- }); -->
                                <!-- }); -->
                                <!-- </script>-->

                                <!-- <select class="js-example-basic-single"> -->
                                <!-- <option value="AL">Alabama</option> -->
                                <!-- <option value="WY">Wyoming</option> -->
                                <!-- </select> -->
								              	<input class="creInput radio op" type="text" name="privacy" readonly>
								              	<div class="profOptions creOp">
								                  	<p class="profOptionText cre"  style="background-color:{{divColor 'mainColor'}}">Public</p>
								                  	<p class="profOptionText cre"  style="background-color:{{divColor 'mainColor'}}">Private</p>
								              	</div>
							              	</div>
							              	<div class="formDiv">
									            <p class="profTitle">Category:</p>
								              	<input class="creInput radio op" type="text" name="category" readonly>
								              	<div class="profOptions creOp">
								                  	<p class="profOptionText cre"  style="background-color:{{divColor 'mainColor'}}">Class</p>
								                  	<p class="profOptionText cre"  style="background-color:{{divColor 'mainColor'}}">Club</p>
								                  	<p class="profOptionText cre"  style="background-color:{{divColor 'mainColor'}}">Other</p>
								              	</div>
									        </div>
								        </div>
								        <h3 id="creSubmit">Submit Request</h3>
									{{/if}}
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="overlay">
		    <div class="overlayCont" style="background-color:{{divColor 'mainColor'}}">
		     	<p>{{confirmText}}</p>
		     	<div id="faCont">
		     		<i class="fa fa-check-circle-o" aria-hidden="true"></i>
	      			<i class="fa fa-times-circle-o" aria-hidden="true"></i>
	      		</div>
		    </div>
	  	</div>

	  	<div id="createdClasses" style="background-color:{{divColor 'secondaryColor'}};right:{{ownedStatus}}" classid="{{selectedClass '_id'}}">
	  		<h3>{{selectedClass 'name'}}</h3>
	  		<h4 id="codetext">Code:</h4>
	  		<input id="code" value="{{selectedClass 'code'}}" type="text" readonly>
	  		{{#if code}}
				<h4 id="copy">Copy Code</h4>
			{{/if}}
	  		<div id="moderatorCont">
	  			<div class="userAdder">
	  			<h4>Moderators:</h4>
	  			<input class="userAddInput" type="text" placeholder="1234@abc.xyz">
	  			<i class="fa fa-plus" aria-hidden="true"></i>
				</div>
				<div class="userHolder">
		  			{{#each selectedClass 'moderators'}}
		  				{{> userDisplay}}
		  			{{/each}}
		  		</div>
	  		</div>
	  		<div id="bannedCont">
	  			<div class="userAdder">
		  			<h4>Banned:</h4>
		  			<input class="userAddInput" type="text" placeholder="1234@abc.xyz">
		  			<i class="fa fa-plus" aria-hidden="true"></i>
				</div>
				<div class="userHolder">	
		  			{{#each selectedClass 'banned'}}
		  				{{> userDisplay}}
		  			{{/each}}
	  			</div>
	  		</div>
	  		<div id="changeAdmin">
				<span>Change Owner</span>
			</div>
	  		<div id="deleteClass">Delete Class</div>
	  	</div>

	  	<div id="joinPrivClass" style="background-color:{{divColor 'secondaryColor'}};bottom:{{privStatus}}">
	  		<h3>Enter Code:</h3>
	  		<input id="privateCode" type="text" placeholder="Enter code here...">
	  		<h4 id="privSubmit">Submit</h4>
	  	</div>
		{{> loginButtons}}
	</div>
</template>

<template name="classDisplay">
	<div class="classBox{{box}}" 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>
		{{#if mine}}
			<i class="fa fa-times" aria-hidden="true"></i>
		{{else}}
			<i class="fa fa-times" aria-hidden="true" style="visibility:hidden"></i>
		{{/if}}
	</div>
</template>

<template name="userDisplay">
	<div class="userBox" userid="{{_id}}">
		<span class="email" onclick="window.location='/user/{{email}}'">{{email}}</span>
		<span class="realname" onclick="window.location='/user/{{email}}'">{{name}}</span>
		<i class="fa fa-times" aria-hidden="true"></i>
	</div>
</template>

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

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