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

{% block headtitle %}Applicant Details | {{ exam_form }}{% endblock %}

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

{% block left_content %}
    <h2>{{ exam_form }}</h2>

    <ul class="nav nav-stacked">
        <li class="active">
            <a href="{% url 'theory_exam_applicant' exam_form.slug exam_application.id %}">Applicant Details</a>
        </li>
        <li class="disabled">
            <a>Payment</a>
        </li>
    </ul>
{% endblock %}

{% block title %}
    <ul class="breadcrumb">
        <li><a href="/">Home</a></li>
        <li class="active">{{ exam_form }}</li>
    </ul>
    <h1>{{ exam_form }}</h1>
    <h2>Applicant Details</h2>
{% endblock %}

{% block content %}
    <div id="exam_application">
        <form action="" method="POST" class="form form-horizontal">
            {% csrf_token %}
            {% include "public/partials/form.html" with form=applicant_details_form %}
            <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 %}