{% extends "base.html" %}
{% load i18n fieldset_extras %}

{% block title %}{% trans "Registration"%}{% endblock %}

{% block teaser%}
<h1>{% trans "Registration"%}</h1>
<div id="teaser_text">
{% blocktrans %}After you've provided your account data, you'll receive
      an email asking you to verify your email address. You have to click on the
      link in this verification email to confirm your email address, otherwise
      your can't login.{% endblocktrans %}
</div>
{% endblock %}

{% block maincontent %}
<form method="post" action="{% url 'membership-register' %}">
  {% csrf_token %}
  <fieldset class="grid_7">
    <legend>{% trans "login"%}</legend>
    {% get_fieldset "username, email, password1, password2, recaptcha" from form as form1 %}
    {% with form1 as form %}{% include "form.html" %}{% endwith %}
  </fieldset>

  <fieldset class="grid_5">
    <legend>{% trans "Club membership"%}</legend>
    {% get_fieldset "membership, first_name, last_name, gender, birthday, street_name, post_code, city, telephone" from form as form2 %}
    {% with form2 as form %}{% include "form.html" %}{% endwith %}
  </fieldset>

  <p class="warning">
    <strong>Datenschutzhinweis:</strong>
    <ul>
    <li>Der angegebene Benutzername wird auf dieser Homepage öffentlich
      gemacht.</li>
    <li>Die E-Mail Adresse wird nur für die Verifizierung und dringende
      persönliche Mitteilungen verwendet.</li>
    <li>Die Passwörter werden nach modernsten Sicherheitsstandards
      verschlüsselt
      abgespeichert und sind nach aktuellen Status nicht knackbar.</li>
    <li>Alle anderen Angaben sind nur für Vereinsmitglieder von Belang und
      werden vertraulich behandelt. Nur Vorstandsmitglieder haben Zugriff
      auf diese Daten und sie werden nicht ohne vorheriger Genemigung mit
      anderen Personen oder Organisationen geteilt.</li>

  </p>

  <div class="grid_12">
    <p class="buttonbar">
      <button type="reset"><span class="fa fa-undo"></span> {% trans 'reset' %}
      </button>
      <button type="submit"><span class="fa fa-user-plus"></span> {% trans 'register' %}</button>
    </p>
  </div>
</form>
<script type="text/javascript">
function togglePersonalData(event) {
    var membership = document.getElementById("id_membership").checked;
    var input_elements = ["id_first_name", "id_last_name", "id_gender", "id_birthday", "id_street_name", "id_post_code", "id_city", "id_telephone"];
    for (var i = 0; i < input_elements.length; i++) {
      element_id = input_elements[i]
      element = document.getElementById(element_id);
      element.disabled = !membership;
    };
};

document.addEventListener('DOMContentLoaded',function() {document.querySelector('#id_membership').onchange=togglePersonalData;},false);
togglePersonalData();
</script>
{% endblock %}
