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

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

{% block maincontent %}
<form method="post" action="{% url 'membership-register' %}">
  {% csrf_token %}
  <fieldset class="grid_7">
    <legend>{% trans "Login crendentials"%}</legend>
    {% get_fieldset "username, email, password1, password2, privacy_policy, 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, birthday" from form as form2 %}
    {% with form2 as form %}{% include "form.html" %}{% endwith %}
  </fieldset>

  <div class="grid_12">
    {{ current_page.content }}
  </div>

  <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_birthday"];
    for (var i = 0; i < input_elements.length; i++) {
      element_id = input_elements[i]
      element = document.getElementById(element_id);
      element.disabled = !membership;
      if (membership == 0) {element.value = ""};
    };
};

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