{% extends "layout.html" %}

{% block body %}
<form method="POST" action="" class="url-form">
	<h1>&#60 URL Shortener &#62</h1>
	{{ form.hidden_tag() }}
	{{ form.url(placeholder="Enter the URL here", autofocus=true, class="feedback-input") }} 
	{{ form.token(placeholder="Enter the token (optional)", class="feedback-input") }}
	<div class="tooltip">
		What's a token?
	  <span class="tooltiptext"><p>tiny0.cc/token</p><p>Token must be between 6 and 16 characters long</p><p>It can only contain letters, numbers, underscores(_) and dashes(-)</p></span>
	</div>
	{{ form.submit(class="button") }}
	{% if form.errors %}
		<div class="form-errors">
			{% for error in form.url.errors %}
				<h4>{{ error }}</h4>
			{% endfor %}
			{% for error in form.token.errors %}
				<h4>{{ error }}</h4>
			{% endfor %}
		</div>
	{% endif %}
</form>
{% endblock %}