{% extends 'management/base.html' %}
{% load static %}

{% block content %}
  <div class="row justify-content-center">
    <div class="col-12">
      <div class="card shadow">
        <div class="card-header bg-dark text-light">
          <h4 class="d-inline">{{ session.title }}</h4>
          <div class="d-inline float-right dropdown ml-2">
            <button
                class="btn btn-outline-secondary dropdown-toggle"
                type="button"
                id="dropdown-session-options"
                data-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="false">
              <i class="hamburger"></i>
            </button>
            <div class="dropdown-menu" aria-labelledby="dropdown-session-options">
              <a class="dropdown-item" href="{% url 'management:session_settings' pk=session.pk %}">Session Settings</a>
              <a class="dropdown-item" href="{% url 'management:spectator' pk=session.pk %}">Public Spectator Link</a>
            </div>
          </div>
          <a class="btn btn-success d-inline float-right"
             href="{% url 'management:add_election' pk=session.pk %}">Add Election</a>
          {% if session.meeting_link %}
            <br/>
            <small>Meeting on <a href="{{ session.meeting_link }}">{{ session.meeting_link }}</a></small>
          {% endif %}
          {% if session.start_date %}
            <br/>
            <small>Starts on {{ session.start_date }}</small>
          {% endif %}
        </div>
        <div class="card-body pt-0" id="electionCard">
          <div class="list-group">
            {% if not existing_elections %}
              <div class="list-group-item mt-3">
                <span>There are no elections for this session</span>
              </div>
            {% else %}
              {% if open_elections %}
                <h5 class="mt-3">Open elections</h5>
                {% for election in open_elections %}
                  {% include 'management/session_election_item.html' %}
                {% endfor %}
              {% endif %}
              {% if upcoming_elections %}
                <h5 class="mt-3">Upcoming elections</h5>
                {% for election in upcoming_elections %}
                  {% include 'management/session_election_item.html' %}
                {% endfor %}
              {% endif %}
              {% if published_elections %}
                <h5 class="mt-3">Published Results</h5>
                {% for election in published_elections %}
                  {% include 'management/session_election_item.html' %}
                {% endfor %}
              {% endif %}
              {% if closed_elections %}
                <h5 class="mt-3">Closed elections</h5>
                {% for election in closed_elections %}
                  {% include 'management/session_election_item.html' %}
                {% endfor %}
              {% endif %}
            {% endif %}
          </div>
        </div>
      </div>
      <div class="card shadow my-4">
        <div class="card-header bg-white">
          <h4 class="d-inline">Voters</h4>
          <div class="d-inline float-right dropdown">
            <button
                class="btn btn-success dropdown-toggle"
                type="button"
                id="dropdown-voter-options"
                data-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="false">
              <i class="hamburger"></i>
            </button>
            <div class="dropdown-menu" aria-labelledby="dropdown-voter-options">
              <a class="dropdown-item"
                 href="{% url 'management:add_voters' pk=session.pk %}">Add Voters</a>
              <a class="dropdown-item"
                 href="{% url 'management:import_csv' pk=session.pk %}">Import from CSV</a>
              <a class="dropdown-item"
                 href="{% url 'management:add_tokens' pk=session.pk %}">Add Tokens</a>
              <button type="button" class="dropdown-item" data-toggle="modal"
                      data-target="#downloadToken"
                      aria-label="download tokens">
                <span aria-hidden="true">Download Tokens</span>
              </button>
            </div>
          </div>
        </div>
        {#      The following div is only needed to update the voter's list#}
        <div id="voterCard">
          <div class="card-body">
            <div class="list-group list-group-flush">
              {% if voters %}
                <div class="list-group-item">
                  <span class="w-25 font-weight-bold">E-Mail</span>
                  <span data-toggle="tooltip" data-placement="right"
                        title="Mail addresses turn green, as soon as their invite link has been clicked.
                               Mail addresses are red, if the address is invalid and no email was sent.">
                    <img class="pl-1 pb-1" src="{% static "img/question-circle.svg" %}" height="25pt" alt="[?]">
                </span>
                </div>
                <div class="voter-table">
                  {% for voter in voters %}
                    <div class="list-group-item">
                      <span class="w-25 {% if voter.logged_in %}text-success{% elif voter.invalid_email %}text-danger{% endif %}"> {{ voter }}</span>
                      <span class="float-right">
                  <form action="{% url 'management:delete_voter' voter.pk %}" method="post">
                    {% csrf_token %}
                    <button type="submit" class="close btn btn-danger" aria-label="remove voter">
                      &times;
                    </button>
                  </form>
                </span>
                    </div>
                  {% endfor %}
                </div>
              {% else %}
                <div class="list-group-item">
                  <span>No voters were added yet</span>
                </div>
              {% endif %}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="downloadToken" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Download Token</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <p>Downloading the tokens PDF will generate new tokens and thus invalidating any previously
            generated tokens. Are you sure you want to download the tokens?</p>
        </div>
        <div class="modal-footer">
          <a class="btn btn-warning d-inline float-left ml-2" id="downloadlink"
             href="{% url 'management:print_token' session.pk %}">Download Tokens</a>

          <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
        </div>
      </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#}
  {#    - or if a voter has logged in #}
  <script src="{% static "js/jquery-3.5.1.min.js" %}"
          integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="></script>
  <script src="{% static "js/reload.js" %}"></script>

  <script src="{% static "js/popper-1.16.1.min.js" %}"
          integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"></script>
  <script src="{% static "bootstrap-4.5.3-dist/js/bootstrap.min.js" %}"
          integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"></script>
  <script src="{% static "management/js/session.js" %}"></script>
{% endblock %}
