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

{% block content %}
<div class="row justify-content-center">

  <div class="col-12">
    <div class="card bg-dark text-light shadow mb-2 py-2">
      <div class="card-body">
        <h4 class="text-center d-inline">{{ title }} - Spectator View</h4>
        {% if meeting_link %}
          <div><small>Meeting at <a href="{{ meeting_link }}">{{ meeting_link }}</a></small></div>
        {% endif %}
      </div>
    </div>
    <div id="electionCard">
      {% if not existing_elections %}
      <div class="list-group-item mt-3">
        <span>There are no elections for this session</span>
      </div>
      {% elif open_elections %}
      <div class="card shadow mb-2">
        <div class="card-header">
          <h4>Open Elections</h4>
        </div>
        <div class="card-body">
          {% for election in open_elections %}
            {% include 'vote/spectator_election_item.html' %}
          {% endfor %}
        </div>
      </div>
      {% endif %}
      {% if upcoming_elections %}
      <div class="card shadow mb-2">
        <div class="card-header">
          <h4>Upcoming Elections</h4>
        </div>
        <div class="card-body">
          {% for election in upcoming_elections %}
            {% include 'vote/spectator_election_item.html' %}
          {% endfor %}
        </div>
      </div>
      {% endif %}
      {% if published_elections %}
      <div class="card shadow mb-2">
        <div class="card-header">
          <h4>Published Results</h4>
        </div>
        <div class="card-body">
          {% for election in published_elections %}
            {% include 'vote/spectator_election_item.html' %}
          {% endfor %}
        </div>
      </div>
      {% endif %}
      {% if closed_elections %}
      <div class="card shadow mb-2">
        <div class="card-header">
          <h4>Closed Elections</h4>
        </div>
        <div class="card-body">
          {% for election in closed_elections %}
            {% include 'vote/spectator_election_item.html' %}
          {% endfor %}
        </div>
      </div>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}

{% block footer_scripts %}
{# Automatic reload of the page: #}
{# - either if the start date / end date of a election is due#}
{# - or if the admin started / stopped one election and the page is notified with a websocket#}
<script src="{% static "js/jquery-3.5.1.min.js" %}"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="></script>
<script src="{% static "js/reload.js" %}"></script>
{% endblock %}