{% extends "base.html" %}

{% load crispy_forms_tags %}

{% block content %}
<div class="row">
	<div class="col-sm-12">
		<div class="panel panel-default">
			<div class="panel-heading">Registration</div>
			<div class="panel-body">
				<p>
				Please register with your (uppercase) Callsign as Usernames.
				For DN-Calls, -[0-9] is allowed (e.g. DN1ABC-2 for the second group).
				</p>
                <p>
                Note: If you are a <strong>Ham/OM/YL</strong> please with your <strong>own</strong> callsign (e.g. DL7DOC). If you are a <strong>SWL</strong>, please use the <strong>DN-Call provided</strong> by your operator.
                </p>
				<form method="POST" action="{% url 'register' %}">
				{% csrf_token %}
				{{ form|crispy }}
				<input type="submit" value="Register">
				</form>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
$(document).ready(function() {
	function isDNCall(e) {
		var call = $("#id_username").val().toUpperCase();
		var disableState = false;
		if(call.startsWith("DN")) {
			var disableState = true;
		}

		$("#id_dncall").prop("disabled", disableState);
		$("#id_qrv2m").prop("disabled", disableState);
		$("#id_qrv70cm").prop("disabled", disableState);
		$("#id_extra2m70cm").prop("disabled", disableState);
		if(disableState) {
			$("#id_dncall").prop("value", "");
			$("#id_qrv2m").prop("checked", false);
			$("#id_qrv70cm").prop("checked", false);
			$("#id_extra2m70cm").prop("checked", false);
		}
		console.log($("#id_dncall"));
	}

	$("#id_username").on("input", isDNCall);
	$("#id_username").change(isDNCall);
});
</script>
{% endblock %}