{% 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>
			<p>
				If your application is accepted, we will accept your in-game guild application.
				Please make sure you have supmitted such an application in the game's UI.
			</p>
			<input class="signup__input" type="text" id="name" required 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 required class="signup__input" id="preferredRole">
				<option selected disabled>Choose a preferred role</option>
				<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 required 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 %}