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

{% block headtitle %}
	{{ pp_form }}
{% endblock %}

{% block title %}

	<ul class="breadcrumb">
		<li><a href="/">Home</a></li>
		<li class="active">{{ pp_form }}</li>
	</ul>

	<h1>{{ pp_form.name }}</h1>
	
	{{ pp_form.description|safe }}


{% endblock %}

{% block content %}
    <div id="meeting_book">
    	<form action"" method="post" class="form form-horizontal">
            {% csrf_token %}
            <h2>Personal Details</h2>
            <div class="form_contents">
                {% include "public/partials/form-field.html" with field=pp_application_form.title %}
                {% include "public/partials/form-field.html" with field=pp_application_form.forename %}
                {% include "public/partials/form-field.html" with field=pp_application_form.surname %}
                {% include "public/partials/form-field.html" with field=pp_application_form.email %}
                {% include "public/partials/form-field.html" with field=pp_application_form.telephone %}
                {% include "public/partials/form-field.html" with field=pp_application_form.institution %}
                {% include "public/partials/form-field.html" with field=pp_application_form.address %}
            </div>

            <h2>1. Applicants</h2>
            <div class="applicant_items">
                {{ applicant_formset.management_form }}
                {% for form in applicant_formset %}
                    <div class="applicant_item">
                        {% include "public/partials/form.html" with form=form %}
                    </div>
                {% endfor %}
            </div>
            <a id="add_applicant" href="#" class="btn btn-success btn-md"><i class="glyphicon glyphicon-plus"></i> Add Applicant</a>
            <a id="remove_applicant" href="#" class="btn btn-danger btn-md"><i class="glyphicon glyphicon-minus"></i> Remove Applicant</a>

            <hr/>

            <h2>2. Institution that will be administering the grant</h2>
            <div class="form_contents">
                {% include "public/partials/form-field.html" with field=pp_application_form.adm_institution %}
                {% include "public/partials/form-field.html" with field=pp_application_form.adm_institution_address %}
            </div>

            <hr/>

            <h2>3. Title of the Study</h2>
            <div class="form_contents">
                {% include "public/partials/form-field.html" with field=pp_application_form.title_of_study %}
            </div>

            <hr/>

            <h2>4. Abstract and methodological description of the study</h2>
            <div class="form_contents">
                {% include "public/partials/form-field.html" with field=pp_application_form.abstract %}
            </div>

            <hr/>

            <h2>5. Proposed Timetable</h2>
            <div class="timetable_items">
                {{ timetable_formset.management_form }}
                {% for form in timetable_formset %}
                    <div class="timetable_item">
                        {% include "public/partials/form.html" with form=form %}
                    </div>
                {% endfor %}
            </div>
            <a id="add_timetable" href="#" class="btn btn-success btn-md"><i class="glyphicon glyphicon-plus"></i> Add Item</a>
            <a id="remove_timetable" href="#" class="btn btn-danger btn-md"><i class="glyphicon glyphicon-minus"></i> Remove Item</a>

            <hr/>

            <h2>6. Funding Details</h2>
            <div class="funding_items">
                {{ funding_formset.management_form }}
                {% for form in funding_formset %}
                    <div class="funding_item">
                        {% include "public/partials/form.html" with form=form %}
                    </div>
                {% endfor %}
            </div>
            <a id="add_funding" href="#" class="btn btn-success btn-md"><i class="glyphicon glyphicon-plus"></i> Add Item</a>
            <a id="remove_funding" href="#" class="btn btn-danger btn-md"><i class="glyphicon glyphicon-minus"></i> Remove Item</a>

            <hr/>

            <h2>7. Provide details of ethical approval. If no approval needed please explain why.</h2>
            <div class="form_contents">
                {% include "public/partials/form-field.html" with field=pp_application_form.ethical_approval %}
            </div>
            <hr/>

            <h2>8. Institutional approval information</h2>
            <div class="form_contents">
                {% include "public/partials/form-field.html" with field=pp_application_form.institutional_approval_information %}
            </div>
            <hr/>
            <h2>9.	Declaration</h2>
            <div class="form_contents">
                {% include "public/partials/form-field.html" with field=pp_application_form.confirm_declaration %}
            </div>

            <h3>Head of Department</h3>
            <div class="form_contents">
                {% include "public/partials/form-field.html" with field=pp_application_form.hod_title %}
                {% include "public/partials/form-field.html" with field=pp_application_form.hod_forename %}
                {% include "public/partials/form-field.html" with field=pp_application_form.hod_surname %}
                {% include "public/partials/form-field.html" with field=pp_application_form.hod_email %}
                {% include "public/partials/form-field.html" with field=pp_application_form.hod_telephone %}
                {% include "public/partials/form-field.html" with field=pp_application_form.hod_institution %}
                {% include "public/partials/form-field.html" with field=pp_application_form.hod_address %}
            </div>

            <div class="form-group form-actions">
                <div class="col-lg-offset-4 col-lg-4">
                    <input type="submit" class="btn btn-primary" value="Submit" />
                </div>
            </div>
        </form>
        
        <div class="empty_forms hidden">
            <div class="empty_applicant_form">
                <div class="applicant_item">
                    {% include "public/partials/form.html" with form=applicant_formset.empty_form %}
                </div>
            </div>
            <div class="empty_timetable_form">
                <div class="timetable_item">
                    {% include "public/partials/form.html" with form=timetable_formset.empty_form %}
                </div>
            </div>
            <div class="empty_funding_form">
                <div class="funding_item">
                    {% include "public/partials/form.html" with form=funding_formset.empty_form %}
                </div>
            </div>
        </div>

	</div>
{% endblock %}

{% block headscript %}
    <script>
        $(document).ready(function(){
            $(document).on('click','#add_applicant',function(e){
                e.preventDefault();
                var number = $('.applicant_items .applicant_item').length;
                var html = $('.empty_applicant_form').html().replace(/__prefix__/g, number);
                $('.applicant_items').append(html);
                var number = $('.applicant_items .applicant_item').length;
                $('#id_applicant-TOTAL_FORMS').val(number);
                if (number > 0){
                    $('#remove_applicant').show();
                }
            });
            $(document).on('click','#remove_applicant',function(e){
                e.preventDefault();
                var form = $('.applicant_items .applicant_item').last();
                form.remove();
                var number = $('.applicant_items .applicant_item').length;
                $('#id_applicant-TOTAL_FORMS').val(number);
                if (number == 0){
                    $('#remove_applicant').hide();
                }
            });

            $(document).on('click','#add_timetable',function(e){
                e.preventDefault();
                var number = $('.timetable_items .timetable_item').length;
                var html = $('.empty_timetable_form').html().replace(/__prefix__/g, number);
                $('.timetable_items').append(html);
                var number = $('.timetable_items .form_contents').length;
                $('#id_timetable-TOTAL_FORMS').val(number);
                if (number > 0){
                    $('#remove_timetable').show();
                }
            });

            $(document).on('click','#remove_timetable',function(e){
                e.preventDefault();
                var form = $('.timetable_items .timetable_item').last();
                form.remove();
                var number = $('.timetable_items .form_contents').length;
                $('#id_timetable-TOTAL_FORMS').val(number);
                if (number == 0){
                    $('#remove_timetable').hide();
                }
            });

            $(document).on('click','#add_funding',function(e){
                e.preventDefault();
                var number = $('.funding_items .funding_item').length;
                var html = $('.empty_funding_form').html().replace(/__prefix__/g, number);
                $('.funding_items').append(html);
                var number = $('.funding_items .form_contents').length;
                $('#id_funding-TOTAL_FORMS').val(number);
                if (number > 0){
                    $('#remove_funding').show();
                }
            });

            $(document).on('click','#remove_funding',function(e){
                e.preventDefault();
                var form = $('.funding_item').last();
                form.remove();
                var number = $('.funding_items .form_contents').length;
                $('#id_funding-TOTAL_FORMS').val(number);
                if (number == 0){
                    $('#remove_funding').hide();
                }
            });
        });
    </script>
{% endblock %}