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

{% block title %}{% trans "Edit Userprofile" %}{% endblock %}

{% block teaser %}<h1>{% trans "Edit Userprofile" %}</h1>{% endblock %}

{% block maincontent %}
<form method="post" action="" enctype="multipart/form-data" class="grid_12 clearfix">
<fieldset>
<legend>{% trans "Edit Userprofile" %}</legend>
{% csrf_token %}
{% include  'form.html' %}
<p class="buttonbar">
 <button type="reset"><span class="fa fa-undo"></span> {% trans "Reset" %}</button>
 <button type="submit"><span class="fa fa-hdd-o"></span> {% trans "Save" %}</button>
</p>
</fieldset>
</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 %}

{% block buttonbar %}{% endblock %}
