{% extends "public/content.html" %}

{% block headtitle %}Register{% endblock %}

{% block footer_script %}
	<script type="text/javascript">
    	$(function() {
    		$( "#id_date_of_birth" ).datepicker({
				dateFormat: 'dd/mm/yy',
				changeMonth: true,
				changeYear: true,
				defaultDate: '-30y',
	            yearRange: '1920:c'
			});
    	});

        $(document).ready(function(){
            if ($('#id_member_type').val() == 3) {
                //junior
                $('#junior_referrer').show();
			} else {
                $('#junior_referrer').hide();
			}

            $('#id_member_type').change(function(){
                if ($(this).val() == 3) {
                    //junior
                    $('#junior_referrer').show();
				} else {
                    $('#junior_referrer').hide();
				}
			});
		});
	</script>
{% endblock %}

{% block title %}
	<ul class="breadcrumb">
        <li><a href="/">Home</a></li>
        <li class="active">Become A Member</li>
    </ul>

	<h1>Become A Member</h1>

{% endblock %}

{% block content %}
	<div id="registration">
		{% if content_block %}
            {{ content_block.content|safe }}
		{% endif %}

		<form action="" method="POST" enctype="multipart/form-data" class="form form-horizontal">
			{% csrf_token %}

            <p>Fields marked with a <span class="required">*</span> are required</p>

            <h2>Account Details</h2>
            {% include "public/partials/form.html" with form=registration_form_user %}
            {% include "public/partials/form.html" with form=registration_form_password %}

            <h2>Personal Details</h2>
            {% include "public/partials/form.html" with form=registration_form_personal %}

            <h2>Institution Address</h2>
            {% include "public/partials/form.html" with form=registration_form_institution %}

            <h2>Home Address</h2>
            {% include "public/partials/form.html" with form=registration_form_personal_address %}

            <h2>Membership Category</h2>
            <p>Please select one category to apply for membership for.</p>
            {% include "public/partials/form.html" with form=registration_form_member_type %}

            <h2>Areas of Interest</h2>
            <p>Please indicate as appropriate.</p>
		    {% include "public/partials/form.html" with form=registration_form_areas checkboxes="true" %}

			{% include "public/partials/form.html" with form=registration_form_contact %}

    		<div class="form-group form-actions">
    			<div class="col-lg-4">
    				<input type="submit" class="btn btn-primary" value="Submit" />
    			</div>
    		</div>



		</form>
	</div>

{% endblock %}