{% extends "base.html" %}

{% block head %}
	<link rel="stylesheet" href="/styles/join.css">
{% endblock %}

{% block content %}
	<form method="POST" class="signup">
		<div class="signup__box">
			<label class="signup__label" for="name">Name</label>
			<p>
				We use your username to connect you with your account later.
				Please make sure it's spelled correclty.
			</p>
			<input class="signup__input" type="text" id="name" placeholder="PoopenFarten43">
		</div>
		<div class="signup__box">
			<label class="signup__label" for="preferredRole">Preferred role</label>
			<p>
				We are always looking ot balance our guild.
				As such it's important for us to know which role you like to play as.
				Please feel free to elaborate in text box below.
			</p>
			<select class="signup__input" id="preferredRole">
				<option value="dps">DPS</option>
				<option value="tank">Tank</option>
				<option value="healer">Healer</option>
			</select>
		</div>
		<div class="signup__box">
			<label class="signup__label" for="motivation">Motivation</label>
			<p>
				Write us a little post about why you'd like to join our guild.
				Keep in mind that we get a lot of applications for our guild;
				a simple "i like vidya" won't get you through the golden gates!
			</p>
			<textarea class="signup__input" id="motivation" rows="20" placeholder="I would like to join because..."></textarea>
		</div>
		<div>
			<button class="signup__submit" type="submit">Submit</button>
		</div>
	</form>
{% endblock %}