{% extends 'templates/base.html' %}
{% block title %}{{super()}} | Contact{% 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/.contact.min.css">
	<script type="application/javascript" src='https://www.google.com/recaptcha/api.js'></script>
{% endblock %}

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

{% block main %}
	<section class='container'>
		
		<h1>Contact</h1>
		
		<form id='contact-form' role="form" method="POST">
			<input type="hidden" name="_csrf" value="{{csrfToken}}">
			
			<input id='subject-input' name="subject" id='subject' type="text" maxlength="160" placeholder="Subject">
			<p id='message-help' class='red help'>You need to enter a message. </p>
			<textarea id='message-input' name="message" id='message' rows="10" maxlength="5000" placeholder="Message" required>{{message}}</textarea>
			
			<input id='name-input' name="name" id='name' type="text" maxlength="160" value="{{user.name}}" placeholder="Your name">
			<p id='email-help' class='red help'>You need to enter a valid email. </p>
			<input id='email-input' name="email" id='email' type="email" maxlength="160" value="{{user.email}}" placeholder="Your email" required>
			
			<button id='submit-button' class='g-recaptcha main btn' data-sitekey="{{sitekey}}" data-callback="onSubmit">Submit</button>
		</form>

	</section>
{% endblock %}