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

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

{% block headscript %}
    <script type="text/javascript">

        $(document).ready(function(){
            if ($('#id_know_existing').is(':checked')){
                $('#support_existing').hide();
                $('#support_new').show();
            } else {
                $('#support_new').hide();
                $('#support_existing').show();
            }

            $('#id_know_existing').change(function() {
                if ($(this).is(':checked')){
                    $('#support_existing').hide();
                    $('#support_new').show();
                } else {
                    $('#support_new').hide();
                    $('#support_existing').show();
                }
            });

            if ($('#id_trainee').is(':checked')){
                $('#training').show();
            } else {
                $('#training').hide();
            }

            $('#id_trainee').change(function() {
                if ($(this).is(':checked')){
                    $('#training').show();
                } else {
                    $('#training').hide();
                }
            });

        });

        $(function() {
            $( "#id_training_commencement" ).datepicker({
                dateFormat: 'dd/mm/yy'
            });
        });


    </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>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>Hospital Information</h2>
            {% include "public/partials/form.html" with form=registration_form_hospital %}

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

            <h2>Training Information</h2>
            {% include "public/partials/form.html" with form=registration_form_are_trainee %}

            <div id="training">
                {% include "public/partials/form.html" with form=registration_form_training %}
            </div>


            <h2>Professional Certification</h2>
            {% include "public/partials/form.html" with form=registration_form_professional %}

            <div id="support">
                <h2>Support of Application</h2>

                <p>Ordinary members and those working within the National Abdominal Aortic Aneurysm Screening programme (Special Interest Group) are eligible to apply for Indemnity Insurance through the Society of Radiographers.</p>

                <p>To demonstrate your eligibility, those applying for these types of membership are required to provide the email address of a current SVT member or provide a completed form of support from a line manager or senior colleague who can verify your role. Please either complete the supporting member email or upload your completed form below.</p>

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

            </div>

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

            <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 %}