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

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

{% block javascript %}
{{super()}}
	<script type="application/javascript" src="/static/js/.settings.min.js"></script>
{% endblock %}

{% block main %}
	
	<section class='container'>
		
		<h1>Settings</h1>
		
		<form id='settings-form' role="form" method="post">
			<input type="hidden" name="_csrf" value="{{csrfToken}}">
			
			<h2>Account settings</h2>
				
				<div id='name' class='form-group' title="This appears in your page's title. ">
					<label for="name">Name</label>
					<input id='name-input' class='form-control' name="name" type="text" value="{{user.name}}" maxlength="160">
					<p id='name-help' class='red help'></p>
				</div>
				
				<div id='email' class='form-group' title="For account stuff, no dumb newsletters.  ">
					<label for="email">Email</label>
					<input id='email-input' class='form-control' name="email" type="email" value="{{user.email}}" maxlength="160">
					<p id='email-help' class='red help'></p>
				</div>
				
				<div id='social-connect' class='form-group'>
					<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 id='password' class='underline' href="/account/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 id='delete' class='red underline' style="text-align:right" href="#" 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='left input-addon' size="13" value="tracman.org/map/" disabled readonly>
						<input type="text" class='input-with-addon left' id='slug-input' name="slug" value="{{user.slug}}" maxlength="160" required>
					</div>
					<p id='slug-help' class='red help'></p>
				</div>
				
				<div id='marker' class='form-group' title="The color of the marker that shows your location">
					<label for="marker">Marker color</label>
					<select name="marker">
						<option {% if user.settings.marker=='red' or user.settings.marker=='' %}selected {% endif %}value="red">red</option>
						<option {% if user.settings.marker=='black' %}selected {% endif %}value="black">black</option>
						<option {% if user.settings.marker=='green' %}selected {% endif %}value="green">green</option>
						<option {% if user.settings.marker=='grey' %}selected {% endif %}value="grey">grey</option>
						<option {% if user.settings.marker=='orange' %}selected {% endif %}value="orange">orange</option>
						<option {% if user.settings.marker=='purple' %}selected {% endif %}value="purple">purple</option>
						<option {% if user.settings.marker=='white' %}selected {% endif %}value="white">white</option>
						<option {% if user.settings.marker=='yellow' %}selected {% endif %}value="yellow">yellow</option>
					</select>
				</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="zoom">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='showScale' class='form-group' title="Shows a scale on the map.">
					<label for="showScale">Show scale</label>
					<input name="showScale" type="checkbox" {% if user.settings.showScale %}checked{% endif %}>
				</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'>
				<input class='main btn' type="submit" value="Save" title="Click here to save your changes. ">
				<a href="#" class='btn' title="Click here to discard your changes. ">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 %}