{% extends "bases/bootstrap-with-nav.html" %}
{% load staticfiles %}
{% load bootstrap3 %}

{% block app_js_vars %}
    const OPTION_COUNT = {{ object.options.count }};
    const MIN_SELECTIONS = {{ min_selection }};
    const MAX_SELECTIONS = {{ max_selection }};
    const POLL_COUNT = {{ poll_count }};
    const POLL_NUM = {{ poll_num }};
    var selectedCount = 0;
{% endblock %}

{% block content %}

<div class="container">
    {% if can_vote %}
        <!-- Hidden fields -->
        {% csrf_token %}
        <input id="event-param" type="text" value="{{event.EID}}" hidden/>
        <input id="comb_pk" type="text" value="{{event.public_key}}" hidden/>

        <!-- Event info and instructions -->
        <h2>Event Voting Page for the Event '{{ object.event.title }}'</h2>
        <hr/>
        <div class="alert alert-warning" role="alert" style="margin-top: 1em;">
            You are voting as: <strong>{{ voter_email }}</strong> - Ensure this is correct and don't share this URL!
        </div>
        <span><strong>Voting status:</strong>
            {% if has_voted %}
                <span style="color: green; font-weight: bold">Voted - Re-submitting will change your vote</span>
            {% else %}
                <span style="color: red; font-weight: bold">Not Voted</span>
            {% endif %}
        </span>
        <br/>
        <br/>
        <span><strong>Instructions:</strong>
            You will be shown each poll for this event one by one where you will need to make a selection for the current
            poll before moving onto the next poll. <strong>For this specific poll</strong> you need to make a <strong>
            minimum</strong> of {{ min_selection }} option selection(s) and a <strong>maximum</strong> of
            {{ max_selection }}.

            {% if min_selection == 0 %}
                <br/><br/>Due to the fact that you are permitted to select nothing, simply hitting submit will submit a
                'blank' vote so please be aware of this. You can always re-visit this page before the event ends if you
                change your mind.
            {% endif %}

            <br/><br/>Please make your choice below.
        </span>

        <!-- Poll Voting Section -->
        <p id="poll-num" hidden>{{ poll_num}}</p>
        <h3>Poll {{ poll_num }} of {{ poll_count }}: {{object.question_text}}</h3>
        <hr/>

        {% load crispy_forms_tags %}
         <div class="panel panel-default">
           <div class="panel-heading"><strong>Options</strong></div>
           <div class="panel panel-body">
             {% for option in object.options.all %}
                 <div class="checkbox">
                    {% load custom_filters_tags %}
                    <label id="{{forloop.counter|get_ballot_value:object.options.all.count}}">
                        <input type="checkbox" value="{{forloop.counter|get_ballot_value:object.options.all.count}}">{{ option.choice_text }}
                    </label>
                 </div>
             {% endfor %}
             <hr/>
            <div id="ballot-gen-progress-area">
                <button id="gen-ballots-btn" class="btn btn-primary">Begin Voting</button>
                <!-- Progress bar which is used during encryption -->
                <h4 id="progress-bar-description" class="hidden">Generating 2 Digital Ballots. Please wait...</h4>
                <div id="progress-bar-container" class="progress hidden">
                  <div id="progress-bar" class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
                    <span class="sr-only">70% Complete</span>
                  </div>
                </div>
            </div>
           </div>
         </div>

        <!-- Poll Navigation -->
        <div class="panel panel-body">
          {% if prev_uuid %}
            <a href="{% url 'polls:event-vote' event_id=object.event.uuid poll_id=prev_uuid %}?key={{ a_key }}" class="btn btn-danger"
               role="button">
              <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> Previous Poll
            </a>
          {% endif %}
          {% if next_uuid %}
            <a href="{% url 'polls:event-vote' event_id=object.event.uuid poll_id=next_uuid %}?key={{ a_key }}" class="btn btn-primary"
               role="button" style="float: right;">
                Next Poll <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            </a>
          {% endif %}
        </div>

        <!-- Information Dialog called upon request -->
        <div class="modal fade" id="modalDialog" role="dialog" tabindex="-1" data-backdrop="static">
            <div class="modal-dialog" role="document">

              <!-- Dialog content-->
              <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" style="text-align: center"><strong>Please Select a Ballot</strong></h4>
                </div>
                <div class="modal-body">
                    <div class="choice-group">
                        <a id="choice-A" class="btn btn-sq btn-primary">
                            A
                        </a>
                        <a id="choice-B" class="btn btn-sq btn-warning choice">
                            B
                        </a>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="nextDialogBtn" type="button" class="btn btn-primary">Next</button>
                    <button id="cancelDialogBtn" type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                    <button id="closeDialogBtn" type="button" class="btn btn-primary hidden" data-dismiss="modal">Close</button>
                    <button id="startOverDialogBtn" type="button" class="btn btn-danger hidden" data-dismiss="modal">Start Over</button>
                    <button id="submitDialogBtn" type="button" class="btn btn-success hidden">Submit</button>
                </div>
              </div>

            </div>
        </div>

    {% else %} <!-- for: { if can_vote %} -->
        <div class="alert alert-warning" role="alert">
            <p>{{ cant_vote_reason }}</p>
        </div>
    {% endif %}
</div>
{% endblock %}