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

{% load election_extras %}

{% block headtitle %}
    {{ election.name }}
{% endblock %}

{% block headscript %}

    <script type="text/javascript">
        $(document).ready(function(){
            {% for position in positions %}
                {% if position.num_votes > 1 %}
                    $("input[name='position_{{ position.id }}']").change(function () {
                        var maxAllowed = {{ position.num_votes }};
                        var cnt = $("input[name='position_{{ position.id }}']:checked").length;
                        if (cnt > maxAllowed) {
                            $(this).prop("checked", "");
                        }
                    });
                {% endif %}
            {% endfor %}
        });
    </script>
{% endblock %}

{% block title %}

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

    <h1>{{ election.name }}</h1>
{% endblock %}

{% block content %}

    {{ election.voting_introduction|safe }}

    <div id="election_voting">
        
        <form action="" class="form form-horizontal" method="post">
            {% csrf_token %}         
            {% if positions %}
                {% for position in positions %}
                    {% if position.get_approved_candidates %}
                        <h2>{{ position.name }}</h2>                        
                        {% if position in votable_positions %}
                            {% if position.num_votes > 1 %}
                                <p>You may vote for <strong>{{ position.num_votes }}</strong> candidates for this position.</p>
                            {% endif %}
                            <div class="candidates">
                                {% for candidate in position.get_approved_candidates %}
                                    <div class="candidate">
                                        <div class="candidate_option">
                                            {% if position.num_votes > 1 %}
                                                <input type="checkbox" value="{{ candidate.id }}" name="position_{{ position.id }}" class="position_{{ position.id }}" id="candidate_{{ candidate.id }}"/>
                                            {% else %}
                                                <input type="radio" value="{{ candidate.id }}" name="position_{{ position.id }}" class="position_{{ position.id }}" id="candidate_{{ candidate.id }}"/>
                                            {% endif %}
                                        </div>
                                        <div class="candidate_details">
                                            <label for="candidate_{{ candidate.id }}">{{ candidate.title }} {{ candidate.given_name }} {{ candidate.surname }}</label><br/>
                                            {{ candidate.manifesto|truncatewords:25 }} <a href="{% url 'elections_election_vote_candidate' election.slug candidate.id %}">View More</a>
                                        </div>
                                        <div class="clear"></div>
                                    </div>
                                {% endfor %}
                            </div>
                        {% else %}
                            <p>Sorry, you have already voted for this position.</p>
                        {% endif %}
                    {% endif %}
                {% endfor %}

                {% if votable_positions %}
                    <div class="submit">
                        <input type="submit" class="btn btn-primary" value="Submit Vote{% if votable_positions.count > 1 %}s{% endif %}"/>
                    </div>
                {% endif %}
            
            {% else %}            
                <p>Sorry, there are no positions you can vote for.</p>
            {% endif %}
        </form>
    </div>

{% endblock %}