{% extends 'vote/base.html' %}
{% load crispy_forms_tags %}
{% load static %}
{% load vote_extras %}

{% block content %}
  <div class="row justify-content-center">
    <div class="col-12">
      <div class="card shadow">
        <div class="card-body">
          {% if can_vote %}
            <form action="{% url 'vote:vote' election.pk %}" method="post">
              {% csrf_token %}
              <div class="form-group">
                <h4 class="mb-0">{{ title }}</h4>
                <small class="text-muted">Voting Period: {{ election.application_due_date|date:"D Y-m-d H:i:s" }}
                  - {{ election.end_date|date:"D Y-m-d H:i:s" }} (UTC{{ election.end_date|date:"O" }})</small>
              </div>
              <hr>
              {% if form.non_field_errors %}
                <div class="alert alert-block alert-danger">
                  <ul class="m-0">
                    {% for error in form.non_field_errors %}
                        <li>{{ error|escape }}</li>
                    {% endfor %}
                  </ul>
                </div>
              {% endif %}
                {% if form.visible_fields %}
                    <div class="card">
                        <h5 class="card-header">Instruction</h5>
                        <div class="card-body">
                            {% if max_votes_yes > 1 %}You may give up to {{ max_votes_yes }} YES votes.<br>{% endif %}
                            NO votes should only be used if you are explicitly against
                            {% if election.voters_self_apply %}a candidate{% else %}an option{% endif %}.<br>
                            The display order of the {% if election.voters_self_apply %}applicants{% else %}
                            options{% endif %} is randomized.<br>
                            Your vote is anonymous.
                        </div>
                    </div>
                    {% if max_votes_yes > 1 and max_votes_yes >= form.num_applications %}
                        <div class="mt-4 text-right d-none">
                            <button type="button" class="btn btn-success" id="all-yes">Select YES for
                                all {{ form.num_applications }} applicants
                            </button>
                        </div>
                    {% endif %}
                    <table class="table table-sm vote-list" data-max-votes-yes="{{ max_votes_yes }}">
                        <thead class="thead-light">
                        <tr>
                            <th>{% if election.voters_self_apply %}Applicant{% else %}Option{% endif %}</th>
                            {% if election.enable_abstention %}
                                <th class="choice text-center">Abstention</th>
                            {% endif %}
                            <th class="choice text-center text-success">YES</th>
                            <th class="choice text-center text-muted"
                                title="NO should only be selected if you want to vote EXPLICITLY AGAINST this applicant">
                                NO*
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                  {% for field in form.visible_fields|shuffle %}
                    <tr>
                      <td class="applicant">
                        <div class="row no-gutters">
                          {% if field.application.avatar %}
                            <div class="col-3">
                              <img src="{{ field.application.avatar.url }}" class="card-img" alt="applicant-picture">
                            </div>
                          {% endif %}
                          <div class="col-9">
                            <div class="card-body">
                              <h6 class="card-title">{{ field.label|escape }}</h6>
                              <p class="card-text">{{ field.application.text|escape }}</p>
                            </div>
                          </div>
                        </div>
                      </td>
                      {% for radio in field %}
                        <td class="text-center"><label class="radio" for="{{ radio.id_for_label }}"
                                                       title="{{ radio.choice_label }}">{{ radio.tag }}</label></td>
                      {% endfor %}
                    </tr>
                  {% endfor %}
                  </tbody>
                  <tfoot>
                  <tr>
                    <td></td>
                    <td></td>
                    <td class="text-center"><span
                        class="yes badge badge-pill badge-secondary">Up to {{ max_votes_yes }}</span></td>
                    <td></td>
                  </tr>
                  </tfoot>
                </table>
                <hr>
                <button type="submit" class="btn btn-primary btn-block">Submit</button>
              {% else %}
                <div class="row justify-content-center">
                  <div class="col-12 text-center">
                    <span class="display-1 d-block">:(</span>
                    <div class="mt-4 mb-4 lead">Unfortunately there were no applicants.</div>
                  </div>
                </div>
              {% endif %}
            </form>
          {% else %}
            <div>
              <span>Already voted</span>
            </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
{% endblock %}

{% block footer_scripts %}
  <script src="{% static "vote/js/vote.js" %}"></script>
{% endblock %}
