{% 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 src='https://www.google.com/recaptcha/api.js'></script>
{% endblock %}

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

	</section>
{% endblock %}

{% block javascript %}
{{super()}}
	<script type="application/javascript">
	/* global $ */
		function onSubmit() {
			$('#contact-form').submit();
		}
	</script>
{% endblock %}