{% extends 'templates/base.html' %}
{% block title %}{{super()}} | Settings{% endblock %}

{% block head %}
{{super()}}
	<link rel="stylesheet" type="text/css" href="/static/css/form.min.css">
{% endblock %}

{% block main %}

	<section class='container'>
		
		<h1>Settings</h1>
		
		<form id='settings-form' role="form" method="post">
			
			<h2>Account settings</h2>
				
				<div id='name' class='form-group' title="This appears in your page's title. ">
					<label for="name">Name</label>
					<input class='form-control' name="name" type="text" value="{{user.name}}" maxlength="160">
				</div>
				
				<div id='email' class='form-group' title="For account stuff, no dumb newsletters.  ">
				<label for="email">Email</label>
				<input class='form-control' name="email" type="email" value="{{user.email}}" maxlength="160">
			</div>
				
				<div id='social-connect' class='form-group'>
					<style>
						
						#social-connect {
							flex-wrap: wrap;
						}
						#social-connect > .btn {
							display: flex;
							align-items: center;
							margin-left: 1vw;
							margin-right: 1vw;
							flex-grow: 1;
							flex-basis: 0;
							font-size: .9em;
						}
						#social-connect > .btn:hover {
							color: #fff;
						}
						#social-connect > .btn .fa {
							font-size: 1.1em;
							margin-left: 0;
							margin-right: 5%;
						}
						
						/* Connected social button styles */
						#social-connect > .btn.gp.connected {
							border: 2px solid rgb(206,77,57);
						}
						#social-connect > .btn.fb.connected {
							border: 2px solid rgb(48,88,145);
						}
						#social-connect > .btn.tw.connected {
							border: 2px solid rgb(44,168,210);
						}
						
						/* Unconnected social button styles */
						#social-connect > .btn.gp:not(.connected) {
							background: rgb(206,77,57);
						}
						#social-connect > .btn.gp:not(.connected):hover {
							background: rgb(251,122,102);
						}
						#social-connect > .btn.fb:not(.connected) {
							background: rgb(48,88,145);
						}
						#social-connect > .btn.fb:not(.connected):hover {
							background: rgb(93,133,190);
						}
						#social-connect > .btn.tw:not(.connected) {
							background: rgb(44,168,210);
						}
						#social-connect > .btn.tw:not(.connected):hover {
							background: rgb(89,213,255);
						}
						
					</style>
					<a href="/login/google" class='btn gp{% if user.auth.google %} connected{% endif %}'>
						<i class="fa fa-google-plus"></i>
						{% if user.auth.google %}Disconnect{% else %}Connect{% endif %} Google
					</a>
					<a href="/login/facebook" class='btn fb{% if user.auth.facebook %} connected{% endif %}'>
						<i class="fa fa-facebook"></i>
						{% if user.auth.facebook %}Disconnect{% else %}Connect{% endif %} Facebook
					</a>
					<a href="/login/twitter" class='btn tw{% if user.auth.twitter %} connected{% endif %}'>
						<i class="fa fa-twitter"></i>
						{% if user.auth.twitter %}Disconnect{% else %}Connect{% endif %} Twitter
					</a>
				</div>
				
				<div id='password-delete' class='form-group'>
					<a class='underline' href="/settings/password" title="Click here to {% if user.auth.password %}change{% else %}set{% endif %} your password. ">{% if user.auth.password %}Change{% else %}Set{% endif %} password</a>
					<a class='red underline' style="text-align:right" href="#" onclick="deleteAccount()" title="Permently delete your Tracman account. ">Delete account</a>
				</div>
				
			<h2>Map settings</h2>
			
				<div id='slug' class='form-group' title="This is the URL which shows your location. Be careful whom you share it with! ">
					<label for="slug">URL</label>
					<div class='input-with-addon-group'>
						<input type="text" class='input-addon' size="13" value="tracman.org/map/" disabled readonly>
						<input type="text" class='input-with-addon' name="slug" value="{{user.slug}}" maxlength="160" required>
					</div>
				</div>
	
				<div id='units' class='form-group' title="Select standard units for feet and miles/hour. Select metric units if you are a commie. ">
					<label for="units">Units</label>
						<div class='radio-group'>
							<div class='radio'>
								<label>Standard</label>
								<input type="radio" name="units" value="standard" {% if user.settings.units == 'standard' %}checked{% endif %}>
							</div>
							<div class='radio'>
								<label>Metric</label>
								<input type="radio" name="units" value="metric" {% if user.settings.units == 'metric' %}checked{% endif %}>
							</div>
						</div>
				</div>
	
				<div id='defaultMap' class='form-group' title="Shows whether to show a satellite image or standard google road map as the default on your page. Visitors will have the option to change this. Note that satellite images load slower. ">
					<label for="map">Default map</label>
					<div class='radio-group'>
						<div class='radio'>
							<label>Road</label>
							<input type="radio" name="map" value="road" {% if user.settings.defaultMap == 'road' %}checked{% endif %}>
						</div>
						<div class='radio'>
							<label>Satellite</label>
							<input type="radio" name="map" value="sat" {% if user.settings.defaultMap == 'sat' %}checked{% endif %}>
						</div>
					</div>
				</div>
				
				<div id='defaultZoom' class='form-group' title="Shows the initial map zoom level on your page. A higher number means more zoom. Note that the size of the viewing window will also have an effect on how much of the map a visitor can see. ">
					<label for="map">Default zoom</label>
					<select name="zoom">
							<option {% if user.settings.defaultZoom==1 %}selected {% endif %}value="1">1 World</option>
							<option {% if user.settings.defaultZoom==2 %}selected {% endif %}value="2">2</option>
							<option {% if user.settings.defaultZoom==3 %}selected {% endif %}value="3">3</option>
							<option {% if user.settings.defaultZoom==4 %}selected {% endif %}value="4">4</option>
							<option {% if user.settings.defaultZoom==5 %}selected {% endif %}value="5">5 Landmass</option>
							<option {% if user.settings.defaultZoom==6 %}selected {% endif %}value="6">6</option>
							<option {% if user.settings.defaultZoom==7 %}selected {% endif %}value="7">7</option>
							<option {% if user.settings.defaultZoom==8 %}selected {% endif %}value="8">8</option>
							<option {% if user.settings.defaultZoom==9 %}selected {% endif %}value="9">9</option>
							<option {% if user.settings.defaultZoom==10 %}selected {% endif %}value="10">10 City</option>
							<option {% if user.settings.defaultZoom==11 %}selected {% endif %}value="11">11</option>
							<option {% if user.settings.defaultZoom==12 %}selected {% endif %}value="12">12</option>
							<option {% if user.settings.defaultZoom==13 %}selected {% endif %}value="13">13</option>
							<option {% if user.settings.defaultZoom==14 %}selected {% endif %}value="14">14</option>
							<option {% if user.settings.defaultZoom==15 %}selected {% endif %}value="15">15 Streets</option>
							<option {% if user.settings.defaultZoom==16 %}selected {% endif %}value="16">16</option>
							<option {% if user.settings.defaultZoom==17 %}selected {% endif %}value="17">17</option>
							<option {% if user.settings.defaultZoom==18 %}selected {% endif %}value="18">18</option>
							<option {% if user.settings.defaultZoom==19 %}selected {% endif %}value="19">19</option>
							<option {% if user.settings.defaultZoom==20 %}selected {% endif %}value="20">20 Buildings</option>
						</select>
				</div>
				
				<div id='showSpeed' class='form-group' title="{% if not user.isPro %}PRO ONLY! {% endif %}Shows a spedometer on the map.">
					<label for="showSpeed">Show speed{% if not user.isPro %} <span class='red'>(PRO)</span>{% endif %}</label>
					<input name="showSpeed" type="checkbox" {% if not user.isPro %}disabled {% elif user.settings.showSpeed %}checked{% else %}{% endif %}>
				</div>
				
				<div id='showAltitude' class='form-group' title="{% if not user.isPro %}PRO ONLY! {% endif %}Shows the current elevation on the map. ">
					<label for="showAlt">Show altitude{% if not user.isPro %} <span class='red'>(PRO)</span>{% endif %}</label>
					<input name="showAlt" type="checkbox" {% if not user.isPro %}disabled {% elif user.settings.showAlt %}checked{% else %}{% endif %}>
				</div>
				
				<div id='showStreet' class='form-group' title="{% if not user.isPro %}PRO ONLY! {% endif %}Shows a Google street view image at or near your current location, oriented in the direction of travel. ">
					<label for="showStreet">Show street view{% if not user.isPro %} <span class='red'>(PRO)</span>{% endif %}</label>
					<input name="showStreet" type="checkbox" {% if not user.isPro %}disabled{% elif user.settings.showStreetview %}checked{% else %}{% endif %}>
				</div>
			
			<div id='submit-group' class='form-group flexbox' style="padding:0 0 60px; justify-content:space-around">
				<input class='btn yellow' style="width:50%; background:#333" type="submit" value="Save">
				<a href="#" class='btn'>cancel</a>
			</div>
			
		</form>
			
		{% if not user.isPro %}<p style="clear:both">Want to try <a href="/settings/pro">Tracman Pro</a>? It's free during beta testing. </p>{% endif %}
		<p style="clear:both">Would you like to <a href="https://github.com/Tracman-org/Server/issues/new">submit a suggestion or bug report</a>? </p>
	
	</section>
	
{% endblock %}

{% block javascript %}
{{super()}}
	<script>
		
		// Delete account
		function deleteAccount() {
			if (confirm("Are you sure you want to delete your account?  This CANNOT be undone! ")) {
				$.ajax({
					url: "/settings",
					type: "DELETE",
					success: function(){
						location.reload();
					},
					fail: function(){
						alert("Failed to delete account!");
					}
				})
			}
		}
		
	</script>
{% endblock %}