{% extends 'layout.html' %}
{% block title %} Register {% endblock %}
{% block content %}
<br>
<div class="reg-container">
	<form class="reg-form" id="reg-form" action="/register" method="POST">
		<div id="form-group" class="form-group">
			<label style="text-align:center; font-size:2em;"><b>Registration</b></label>
			<div class="svgContainer">
				<div>
					<svg class="mySVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200">
					<defs>
						<circle id="armMaskPath" cx="100" cy="100" r="100"></circle>
					</defs>

					<clipPath id="armMask">
						<use xlink:href="#armMaskPath" overflow="visible"></use>
					</clipPath>

					<circle cx="100" cy="100" r="100" fill="#ffce47"></circle>

					<g class="body">
						<path fill="#FFFFFF" d="M193.3,135.9c-5.8-8.4-15.5-13.9-26.5-13.9H151V72c0-27.6-22.4-50-50-50S51,44.4,51,72v50H32.1 c-10.6,0-20,5.1-25.8,13l0,78h187L193.3,135.9z"></path>
						<path fill="none" stroke="#3A5E77" stroke-width="2.5" stroke-linecap="round" stroke-linejoinn="round" d="M193.3,135.9 c-5.8-8.4-15.5-13.9-26.5-13.9H151V72c0-27.6-22.4-50-50-50S51,44.4,51,72v50H32.1c-10.6,0-20,5.1-25.8,13"></path>
						<path fill="#DDF1FA" d="M100,156.4c-22.9,0-43,11.1-54.1,27.7c15.6,10,34.2,15.9,54.1,15.9s38.5-5.8,54.1-15.9 C143,167.5,122.9,156.4,100,156.4z"></path>
					</g>

					<g class="earL">
						<g class="outerEar" fill="#ddf1fa" stroke="#3a5e77" stroke-width="2.5" data-svg-origin="35.5 71.5" transform="matrix(1,0,0,1,0,0)">
							<circle cx="47" cy="83" r="11.5"></circle>
							<path d="M46.3 78.9c-2.3 0-4.1 1.9-4.1 4.1 0 2.3 1.9 4.1 4.1 4.1" stroke-linecap="round" stroke-linejoin="round"></path>
						</g>

						<g class="earHair" data-svg-origin="42.79999923706055 62.79999923706055" transform="matrix(1,0,0,1,0,0)">
							<rect x="51" y="64" fill="#FFFFFF" width="15" height="35"></rect>
							<path d="M53.4 62.8C48.5 67.4 45 72.2 42.8 77c3.4-.1 6.8-.1 10.1.1-4 3.7-6.8 7.6-8.2 11.6 2.1 0 4.2 0 6.3.2-2.6 4.1-3.8 8.3-3.7 12.5 1.2-.7 3.4-1.4 5.2-1.9" fill="#fff" stroke="#3a5e77" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
						</g>
					</g>

					<g class="earR">
						<g class="outerEar" fill="#ddf1fa" stroke="#3a5e77" stroke-width="2.5" data-svg-origin="143.5 71.5" transform="matrix(1,0,0,1,0,0)">
							<circle cx="155" cy="83" r="11.5"></circle>
							<path d="M155.7 78.9c2.3 0 4.1 1.9 4.1 4.1 0 2.3-1.9 4.1-4.1 4.1" stroke-linecap="round" stroke-linejoin="round"></path>
						</g>
						<g class="earHair" data-svg-origin="131 62.79999923706055" transform="matrix(1,0,0,1,0,0)">
							<rect x="131" y="64" fill="#FFFFFF" width="20" height="35"></rect>
							<path d="M148.6 62.8c4.9 4.6 8.4 9.4 10.6 14.2-3.4-.1-6.8-.1-10.1.1 4 3.7 6.8 7.6 8.2 11.6-2.1 0-4.2 0-6.3.2 2.6 4.1 3.8 8.3 3.7 12.5-1.2-.7-3.4-1.4-5.2-1.9" fill="#fff" stroke="#3a5e77" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
						</g>
					</g>
					<path class="chin" d="M84.1 121.6c2.7 2.9 6.1 5.4 9.8 7.5l.9-4.5c2.9 2.5 6.3 4.8 10.2 6.5 0-1.9-.1-3.9-.2-5.8 3 1.2 6.2 2 9.7 2.5-.3-2.1-.7-4.1-1.2-6.1" fill="none" stroke="#3a5e77" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" data-svg-origin="84.0999984741211 121.5999984741211" transform="matrix(1,0,0,1,0,0)"></path>
					<path class="face" fill="#DDF1FA" d="M134.5,46v35.5c0,21.815-15.446,39.5-34.5,39.5s-34.5-17.685-34.5-39.5V46" data-svg-origin="100 46" transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px 0px;"></path>
					<path class="hair" fill="#FFFFFF" stroke="#3A5E77" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" d="M81.457,27.929 c1.755-4.084,5.51-8.262,11.253-11.77c0.979,2.565,1.883,5.14,2.712,7.723c3.162-4.265,8.626-8.27,16.272-11.235 c-0.737,3.293-1.588,6.573-2.554,9.837c4.857-2.116,11.049-3.64,18.428-4.156c-2.403,3.23-5.021,6.391-7.852,9.474" data-svg-origin="104.51250076293945 27.929000854492188" transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px 0px;"></path>

					<g class="eyebrow" data-svg-origin="100.85150527954102 43.33300018310547" transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px 0px;">
						<path fill="#FFFFFF" d="M138.142,55.064c-4.93,1.259-9.874,2.118-14.787,2.599c-0.336,3.341-0.776,6.689-1.322,10.037 c-4.569-1.465-8.909-3.222-12.996-5.226c-0.98,3.075-2.07,6.137-3.267,9.179c-5.514-3.067-10.559-6.545-15.097-10.329 c-1.806,2.889-3.745,5.73-5.816,8.515c-7.916-4.124-15.053-9.114-21.296-14.738l1.107-11.768h73.475V55.064z"></path>
						<path fill="#FFFFFF" stroke="#3A5E77" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" d="M63.56,55.102 c6.243,5.624,13.38,10.614,21.296,14.738c2.071-2.785,4.01-5.626,5.816-8.515c4.537,3.785,9.583,7.263,15.097,10.329 c1.197-3.043,2.287-6.104,3.267-9.179c4.087,2.004,8.427,3.761,12.996,5.226c0.545-3.348,0.986-6.696,1.322-10.037 c4.913-0.481,9.857-1.34,14.787-2.599"></path>
					</g>

					<g class="eyeL" data-svg-origin="82 75" transform="matrix(1,0,0,1,0,0)">
						<circle cx="85.5" cy="78.5" r="3.5" fill="#3a5e77"></circle>
						<circle cx="84" cy="76" r="1" fill="#fff"></circle>
					</g>

					<g class="eyeR" data-svg-origin="111 75" transform="matrix(1,0,0,1,0,0)">
						<circle cx="114.5" cy="78.5" r="3.5" fill="#3a5e77"></circle>
						<circle cx="113" cy="76" r="1" fill="#fff"></circle>
					</g>

					<g class="mouth" data-svg-origin="100.2220687866211 104" transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px 0px;">
						<path class="mouthBG" fill="#617E92" d="M100.2,101c-0.4,0-1.4,0-1.8,0c-2.7-0.3-5.3-1.1-8-2.5c-0.7-0.3-0.9-1.2-0.6-1.8 c0.2-0.5,0.7-0.7,1.2-0.7c0.2,0,0.5,0.1,0.6,0.2c3,1.5,5.8,2.3,8.6,2.3s5.7-0.7,8.6-2.3c0.2-0.1,0.4-0.2,0.6-0.2 c0.5,0,1,0.3,1.2,0.7c0.4,0.7,0.1,1.5-0.6,1.9c-2.6,1.4-5.3,2.2-7.9,2.5C101.7,101,100.5,101,100.2,101z"></path>
						<path style="display: none;" class="mouthSmallBG" fill="#617E92" d="M100.2,101c-0.4,0-1.4,0-1.8,0c-2.7-0.3-5.3-1.1-8-2.5c-0.7-0.3-0.9-1.2-0.6-1.8 c0.2-0.5,0.7-0.7,1.2-0.7c0.2,0,0.5,0.1,0.6,0.2c3,1.5,5.8,2.3,8.6,2.3s5.7-0.7,8.6-2.3c0.2-0.1,0.4-0.2,0.6-0.2 c0.5,0,1,0.3,1.2,0.7c0.4,0.7,0.1,1.5-0.6,1.9c-2.6,1.4-5.3,2.2-7.9,2.5C101.7,101,100.5,101,100.2,101z"></path>
						<path style="display: none;" class="mouthMediumBG" d="M95,104.2c-4.5,0-8.2-3.7-8.2-8.2v-2c0-1.2,1-2.2,2.2-2.2h22c1.2,0,2.2,1,2.2,2.2v2 c0,4.5-3.7,8.2-8.2,8.2H95z"></path>
						<path style="display: none;" class="mouthLargeBG" d="M100 110.2c-9 0-16.2-7.3-16.2-16.2 0-2.3 1.9-4.2 4.2-4.2h24c2.3 0 4.2 1.9 4.2 4.2 0 9-7.2 16.2-16.2 16.2z" fill="#617e92" stroke="#3a5e77" stroke-linejoin="round" stroke-width="2.5"></path>

						<defs>
							<path id="mouthMaskPath" d="M100.2,101c-0.4,0-1.4,0-1.8,0c-2.7-0.3-5.3-1.1-8-2.5c-0.7-0.3-0.9-1.2-0.6-1.8 c0.2-0.5,0.7-0.7,1.2-0.7c0.2,0,0.5,0.1,0.6,0.2c3,1.5,5.8,2.3,8.6,2.3s5.7-0.7,8.6-2.3c0.2-0.1,0.4-0.2,0.6-0.2 c0.5,0,1,0.3,1.2,0.7c0.4,0.7,0.1,1.5-0.6,1.9c-2.6,1.4-5.3,2.2-7.9,2.5C101.7,101,100.5,101,100.2,101z"></path>
						</defs>

						<clipPath id="mouthMask">
							<use xlink:href="#mouthMaskPath" overflow="visible"></use>
						</clipPath>

						<g clip-path="url(#mouthMask)">
							<g class="tongue">
								<circle cx="100" cy="107" r="8" fill="#cc4a6c"></circle>
								<ellipse class="tongueHighlight" cx="100" cy="100.5" rx="3" ry="1.5" opacity=".1" fill="#fff"></ellipse>
							</g>
						</g>

						<path clip-path="url(#mouthMask)" class="tooth" style="fill:#FFFFFF;" d="M106,97h-4c-1.1,0-2-0.9-2-2v-2h8v2C108,96.1,107.1,97,106,97z"></path>
						<path class="mouthOutline" fill="none" stroke="#3A5E77" stroke-width="2.5" stroke-linejoin="round" d="M100.2,101c-0.4,0-1.4,0-1.8,0c-2.7-0.3-5.3-1.1-8-2.5c-0.7-0.3-0.9-1.2-0.6-1.8 c0.2-0.5,0.7-0.7,1.2-0.7c0.2,0,0.5,0.1,0.6,0.2c3,1.5,5.8,2.3,8.6,2.3s5.7-0.7,8.6-2.3c0.2-0.1,0.4-0.2,0.6-0.2 c0.5,0,1,0.3,1.2,0.7c0.4,0.7,0.1,1.5-0.6,1.9c-2.6,1.4-5.3,2.2-7.9,2.5C101.7,101,100.5,101,100.2,101z"></path>
					</g>

					<path class="nose" d="M97.7 79.9h4.7c1.9 0 3 2.2 1.9 3.7l-2.3 3.3c-.9 1.3-2.9 1.3-3.8 0l-2.3-3.3c-1.3-1.6-.2-3.7 1.8-3.7z" fill="#3a5e77" data-svg-origin="100.0374870300293 83.88750076293945" transform="matrix(0.99801,0.06294,-0.06294,0.99801,5.478269809651323,-6.130086597558147)" style="transform-origin: 0px 0px 0px;"></path>

					<g class="arms" clip-path="url(#armMask)">
						<g class="armL" data-svg-origin="1.2000000476837158 46.20000076293945" transform="matrix(-0.25881,0.96592,-0.96592,-0.25881,-46.863643174353925,276.9983298065334)" style="transform-origin: 0px 0px 0px;">
							<path fill="#ddf1fa" stroke="#3a5e77" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2.5" d="M121.3 97.4L111 58.7l38.8-10.4 20 36.1z"></path>
							<path fill="#ddf1fa" stroke="#3a5e77" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2.5" d="M134.4 52.5l19.3-5.2c2.7-.7 5.4.9 6.1 3.5.7 2.7-.9 5.4-3.5 6.1L146 59.7M160.8 76.5l19.4-5.2c2.7-.7 5.4.9 6.1 3.5.7 2.7-.9 5.4-3.5 6.1l-18.3 4.9M158.3 66.8l23.1-6.2c2.7-.7 5.4.9 6.1 3.5.7 2.7-.9 5.4-3.5 6.1l-23.1 6.2M150.9 58.4l26-7c2.7-.7 5.4.9 6.1 3.5.7 2.7-.9 5.4-3.5 6.1l-21.3 5.7"></path>
							<path fill="#a9ddf3" d="M178.8 74.7l2.2-.6c1.1-.3 2.2.3 2.4 1.4.3 1.1-.3 2.2-1.4 2.4l-2.2.6-1-3.8zM180.1 64l2.2-.6c1.1-.3 2.2.3 2.4 1.4.3 1.1-.3 2.2-1.4 2.4l-2.2.6-1-3.8zM175.5 54.9l2.2-.6c1.1-.3 2.2.3 2.4 1.4.3 1.1-.3 2.2-1.4 2.4l-2.2.6-1-3.8zM152.1 49.4l2.2-.6c1.1-.3 2.2.3 2.4 1.4.3 1.1-.3 2.2-1.4 2.4l-2.2.6-1-3.8z"></path>
							<path fill="#fff" stroke="#3a5e77" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M123.5 96.8c-41.4 14.9-84.1 30.7-108.2 35.5L1.2 80c33.5-9.9 71.9-16.5 111.9-21.8"></path>
							<path fill="#fff" stroke="#3a5e77" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M108.5 59.4c7.7-5.3 14.3-8.4 22.8-13.2-2.4 5.3-4.7 10.3-6.7 15.1 4.3.3 8.4.7 12.3 1.3-4.2 5-8.1 9.6-11.5 13.9 3.1 1.1 6 2.4 8.7 3.8-1.4 2.9-2.7 5.8-3.9 8.5 2.5 3.5 4.6 7.2 6.3 11-4.9-.8-9-.7-16.2-2.7M94.5 102.8c-.6 4-3.8 8.9-9.4 14.7-2.6-1.8-5-3.7-7.2-5.7-2.5 4.1-6.6 8.8-12.2 14-1.9-2.2-3.4-4.5-4.5-6.9-4.4 3.3-9.5 6.9-15.4 10.8-.2-3.4.1-7.1 1.1-10.9M97.5 62.9c-1.7-2.4-5.9-4.1-12.4-5.2-.9 2.2-1.8 4.3-2.5 6.5-3.8-1.8-9.4-3.1-17-3.8.5 2.3 1.2 4.5 1.9 6.8-5-.6-11.2-.9-18.4-1 2 2.9.9 3.5 3.9 6.2"></path>
						</g>

						<g class="armR" data-svg-origin="385.5 47.03531265258789" transform="matrix(-0.25881,-0.96592,0.96592,-0.25881,346.84211864830615,651.5733533938651)" style="transform-origin: 0px 0px 0px;">
							<path fill="#ddf1fa" stroke="#3a5e77" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2.5" d="M265.4 97.3l10.4-38.6-38.9-10.5-20 36.1z"></path>
							<path fill="#ddf1fa" stroke="#3a5e77" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2.5" d="M252.4 52.4L233 47.2c-2.7-.7-5.4.9-6.1 3.5-.7 2.7.9 5.4 3.5 6.1l10.3 2.8M226 76.4l-19.4-5.2c-2.7-.7-5.4.9-6.1 3.5-.7 2.7.9 5.4 3.5 6.1l18.3 4.9M228.4 66.7l-23.1-6.2c-2.7-.7-5.4.9-6.1 3.5-.7 2.7.9 5.4 3.5 6.1l23.1 6.2M235.8 58.3l-26-7c-2.7-.7-5.4.9-6.1 3.5-.7 2.7.9 5.4 3.5 6.1l21.3 5.7"></path>
							<path fill="#a9ddf3" d="M207.9 74.7l-2.2-.6c-1.1-.3-2.2.3-2.4 1.4-.3 1.1.3 2.2 1.4 2.4l2.2.6 1-3.8zM206.7 64l-2.2-.6c-1.1-.3-2.2.3-2.4 1.4-.3 1.1.3 2.2 1.4 2.4l2.2.6 1-3.8zM211.2 54.8l-2.2-.6c-1.1-.3-2.2.3-2.4 1.4-.3 1.1.3 2.2 1.4 2.4l2.2.6 1-3.8zM234.6 49.4l-2.2-.6c-1.1-.3-2.2.3-2.4 1.4-.3 1.1.3 2.2 1.4 2.4l2.2.6 1-3.8z"></path>
							<path fill="#fff" stroke="#3a5e77" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M263.3 96.7c41.4 14.9 84.1 30.7 108.2 35.5l14-52.3C352 70 313.6 63.5 273.6 58.1"></path>
							<path fill="#fff" stroke="#3a5e77" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M278.2 59.3l-18.6-10 2.5 11.9-10.7 6.5 9.9 8.7-13.9 6.4 9.1 5.9-13.2 9.2 23.1-.9M284.5 100.1c-.4 4 1.8 8.9 6.7 14.8 3.5-1.8 6.7-3.6 9.7-5.5 1.8 4.2 5.1 8.9 10.1 14.1 2.7-2.1 5.1-4.4 7.1-6.8 4.1 3.4 9 7 14.7 11 1.2-3.4 1.8-7 1.7-10.9M314 66.7s5.4-5.7 12.6-7.4c1.7 2.9 3.3 5.7 4.9 8.6 3.8-2.5 9.8-4.4 18.2-5.7.1 3.1.1 6.1 0 9.2 5.5-1 12.5-1.6 20.8-1.9-1.4 3.9-2.5 8.4-2.5 8.4"></path>
						</g>
					</g>
				</svg>
				</div>
			</div>

			<label>Name:</label>
			<input type="text" class="form-control" name="name" required>

			<label>Email:</label>
			<input type="email" class="form-control" name="email" required>
			<div id="mail-error-group" class="form-group" style="display:none; text-align:center; text-weight:bold;">
				<b><span id="mail-error" style="color:red;"></span></b>
			</div>

			<label for="database">Select a College:</label>
			<select name="database" id="database" required>
				<option value="database1">GCOEN</option>
			</select>
<!--		<label for="usertype">Select Login Type:</label>-->
<!--		<select name="usertype" id="usertype" required>-->
<!--			<option value="student">Student</option>-->
<!--			<option value="admin">College Admin</option>-->
<!--		</select>-->
			<label for="password">Password:</label>
			<input type="password" class="form-control" id="password" name="password" required>

			<label for="repeat-password">Repeat Password:</label>
			<input type="password" class="form-control" id="repeat-password" required><br>

			<div id="pass-error-group" class="form-group" style="display:none; text-align:center; text-weight:bold;">
				<b><span id="pass-error" style="color:red;"></span></b>
			</div>

			<button type="submit" class="btn btn-primary">Register</button>
			<p style="text-align:center; margin:10px;">Already have an account? <a href="/login">Log in</a> instead.</p>
		</div>
		<div id="message-group" class="form-group" style="display:none; text-align:center; text-weight:bold;">
			<img src="/static/user.gif" height="300px" width="300px" style="padding:20px; margin:10px auto;"><br>
			<b><span id="message" style="color:green;"></span></b>
		</div>
	</form>
</div>

<script>
	function myFunction() {
    	var pass = document.getElementById("password").value;
		var rep_pass = document.getElementById("repeat-password").value;
		let value = pass.localeCompare(rep_pass);
		if (value != 0) {
			document.getElementById("pass-error-group").style.display = "block";
			document.getElementById("pass-error").innerHTML = "&#x0021; &nbsp; &nbsp; Password does not Match.";
			return false;
		}
    	return true;
  	}

	document.getElementById("reg-form").addEventListener("submit", function(event) {
		if (!myFunction()) {
		  event.preventDefault(); // prevent the form from submitting
		}
	});

	const error_code = {{error_code}};
	if (error_code == 550) {
		document.getElementById("mail-error-group").style.display = "block";
		document.getElementById("mail-error").innerHTML = "&#x0021; &nbsp; &nbsp; {{error}}";
	}
	const message_code = {{message_code}};
	if (message_code == 560) {
		document.getElementById("form-group").style.display = "none";
		document.getElementById("message-group").style.display = "block";
		document.getElementById("message").innerHTML = "&#x0021; &nbsp; &nbsp; {{message}}";
	}
</script>

{% endblock %}