{% 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 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 %}
