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

{% block head %}
  <link rel="stylesheet" href="{% static "management/css/DateTimePicker.css" %}"/>
{% endblock %}

{% block content %}
  <div class="row justify-content-center">
    <div class="col-12">
      <div class="card shadow">
        <div class="card-body">
          <h4>Create election in {{ session.title }}</h4>
          <form class="user" action="{% url 'management:add_election' pk=session.id %}" method="post">
            {% csrf_token %}

            {{ form|as_crispy_errors }}
            {% for field in form %}
              {% if field.html_name != "remind_text" and field.html_name != "send_emails_on_start" and field.html_name != "voters_self_apply" and field.html_name != "email" and field.html_name != 'enable_abstention' and field.html_name != 'result_published' %}
                {{ field|as_crispy_field }}
              {% endif %}
            {% endfor %}

            {# collapse card example taken from https://www.codeply.com/p/cI2Pu6O5N5#}
            <div class="card mb-0">
              <div
                  class="card-header mycard-header cursor-pointer{% if not form.remind_text.value %} collapsed{% endif %}"
                  data-toggle="collapse" href="#collapseOne">
                <span class="card-title">
                  Advanced Options
                </span>
              </div>
              <div id="collapseOne" class="card-body collapse{% if form.remind_text.value %} show{% endif %}">
                {{ form.result_published|as_crispy_field }}
                {{ form.enable_abstention|as_crispy_field }}
                {{ form.voters_self_apply|as_crispy_field }}
                {{ form.send_emails_on_start|as_crispy_field }}
                <h5>Remind email template text</h5>
                The template has be written the python format string format. The following variables are available:<br>
                <table class="table table-responsive">
                  <thead>
                  <tr>
                    <th scope="col">Name</th>
                    <th scope="col">Meaning</th>
                  </tr>
                  </thead>
                  <tbody>
                  {% for key, val in variables.items %}
                    <tr>
                      <th scope="row" class="monospace">{{ key }}</th>
                      <td>{{ val }}</td>
                    </tr>
                  {% endfor %}
                  </tbody>
                </table>

                Here is an example:<br><br>
                <p class="monospace">Dear,<br><br>This is a reminder that the {title} election has just began.
                  So you can now start voting for your favourite candidates on
                  &lt;a href="{url}"&gt;{url}&lt;/a&gt;.
                  The access code can be found in the invitation email. Please be reminded that you can only vote until
                  {end_time_en} on the {end_date_en}.
                  <br><br>
                  Best regards,<br>
                  Your awesome Organizers
                </p>

                <p>
                  {{ form.remind_text|as_crispy_field }}
                </p>
                <br>
                <h6>Send test mail</h6>
                <div class="form-row">
                  <div class="col-8">
                    {{ form.email|as_crispy_field }}
                  </div>
                  <div class="col">
                    <button type="submit" id="id_btn_start" class="btn btn-warning btn-block" name="submit_type"
                            value="test">
                      Send test mail
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <br>

            <button type="submit" id="id_btn_send_test" class="btn btn-primary btn-block" name="submit_type" value="commit">
              Submit
            </button>
              <a class="btn btn-secondary btn-block"
              href="{% url 'management:session' session.pk %}">Cancel</a>
            <div id="dtBox"></div>
          </form>
        </div>
      </div>
    </div>
  </div>
{% endblock %}
{% block footer_scripts %}
  <script src="{% static "js/jquery-3.5.1.min.js" %}"
          integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="></script>
  <script src="{% static "bootstrap-4.5.3-dist/js/bootstrap.min.js" %}"
          integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"></script>
  <script src="{% static "management/js/DateTimePicker.js" %}"></script>
  <script src="{% static "management/js/datetime.js" %}"></script>
{% endblock %}