{% load vote_extras %}

<div class="card mb-2">
  <div class="card-body">
    <h4 class="mb-0">{{ election.title }}
      {% if not electon.started and not election.is_open and not election.closed and election.voters_self_apply %}
        {% if edit %}
          <a class="btn btn-danger float-right ml-3"
             href="{% url 'vote:delete_own_application' election.pk %}"> Delete application </a>
        {% endif %}
        <a class="btn btn-dark float-right"
           href="{% url 'vote:apply' election.pk %}"> {% if edit %} Edit application {% else %}
          Apply {% endif %}</a>
      {% endif %}
    </h4>
    {% if election.end_date %}
      <small class="text-muted">Voting Period: {{ election.start_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>
      <!-- hidden start and end time for javascript  | is used to delimit values-->
      <div class="d-none time">{{ election.start_date|date:"U" }}|</div>
      <div class="d-none time">{{ election.end_date|date:"U" }}|</div>
    {% endif %}
    <hr>
    <div class="list-group mt-3">
      {% if can_vote %}
        <a class="btn btn-primary" role="button" href="{% url 'vote:vote' election.pk %}">Vote Now!</a>
      {% elif election.closed and election.result_published %}
        <div class="alert alert-info" role="alert">
          <h4 class="alert-heading">Voting Ended:</h4>
          <hr>
          <table class="table table-striped">
            <thead class="thead-dark">
            <tr>
              <th scope="col">#</th>
              <th scope="col">{% if election.voters_self_apply %}Applicant{% else %}Option{% endif %}</th>
              <th scope="col">Yes</th>
              <th scope="col">No</th>
              <th scope="col">Abstention</th>
            </tr>
            </thead>
            <tbody>
            {% for application in election.election_summary %}
              <tr>
                <th scope="row">{{ forloop.counter }}</th>
                <td>{{ application.get_display_name }}</td>
                <td>{{ application.votes_accept }}</td>
                <td>{{ application.votes_reject }}</td>
                <td>{{ application.votes_abstention }}</td>
              </tr>
            {% endfor %}
            </tbody>
          </table>
        </div>
      {% elif not electon.started and not election.is_open and not election.closed %}
        <a class="btn btn-outline-dark disabled" role="button" href="#">
          {% if election.end_date %}
            Voting starts {{ election.start_date|date:"l Y-m-d H:i:s" }}
          {% else %}
            Wait for the admin to start the election
          {% endif %}
        </a>

      {% else %}
          <div class="alert alert-success" role="alert">
              <h4 class="alert-heading">Thank You For Your Vote!</h4>
              <hr>
              <p class="mb-0">This election will end {{ election.end_date|date:"l Y-m-d H:i:s" }}</p>
          </div>
      {% endif %}
    </div>
      {% if election.can_apply %}
          <hr>
          <h5 class="mb-0 mt-4">{% if election.voters_self_apply %}Applicants{% else %}Options{% endif %}</h5>
          {% if max_votes_yes %}
              <small class="text-muted">Up to {{ max_votes_yes }} applicants will be elected.</small>
          {% endif %}
          {% if not election.applications.all %}
              No {% if election.voters_self_apply %}applicants{% else %}options to vote for{% endif %} so far...
          {% endif %}
          <div class="mt-3">
              <div class="row row-cols-1 row-cols-md-2 vote-list">
                  {% for application in election.applications.all|shuffle %}
                      <div class="col mb-2">
                          <div class="applicant">
                              {% if application.avatar %}
                                  <img src="{{ application.avatar.url }}" class="applicant-picture"
                                       alt="applicant-picture">
                                  {#                    {% else %}#}
                                  {#                      <img src="{% static 'img/blank_avatar.png' %}" class="applicant-picture"#}
                  {#                           alt="applicant-picture">#}
                {% endif %}
                <h6>{% applicant_name application %}</h6>
                <p class="description">{{ application.text|escape }}</p>
              </div>
            </div>
          {% endfor %}
        </div>
      </div>
    {% endif %}
  </div>
</div>