{% extends "base.html" %}

{% block head %}
	<link rel="stylesheet" href="/styles/join_common.css">
	<link rel="stylesheet" href="/styles/join_form.css">
	<script type="module">
		var dropdown = document.getElementById("preferredRole");
		document.getElementById("applicationForm").addEventListener("submit", (event) => {
			if ( dropdown.value === "invalid" ) {
				alert("Pick a preferred role.");
				event.preventDefault()
			}
		});
	</script>
{% endblock %}

{% block content %}
	<form method="POST" class="signup" id="applicationForm">
		<input type="hidden" name="userId" value="{{ user_id | e }}">
		<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>
			<select class="signup__input" id="name" name="name" required>
				{% for character in characters %}
				<option value="{{ character['id'] | e }}">{{ character['name'] | e }}</option>
				{% endfor %}
			</select>
		</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" name="preferredRole">
				<option value="invalid" 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" name="motivation" rows="20" placeholder="I would like to join because..."></textarea>
		</div>
		<div>
			<button class="button" type="submit">Submit</button>
		</div>
	</form>
{% endblock %}