{% 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 Session</h4>
          <form class="user" action="{% url 'management:index' %}?action=add_session" method="post">
            {% csrf_token %}

            {{ form|as_crispy_errors }}
            {% for field in form %}
              {% if field.html_name != "invite_text" and field.html_name != "email" %}
                {{ field|as_crispy_field }}
              {% endif %}
            {% endfor %}

            <div class="card mb-0">
              <div
                  class="mycard-header card-header cursor-pointer{% if not form.invite_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.invite_text.value %} show{% endif %}">
                <h5>Invite 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>You have been invited to our awesome meeting {title}. We are meeting
                  on {meeting_link}. It
                  takes place on the {start_date_en} at {start_time_en}. You can login with the following link:
                  &lt;a href="{login_url}"&gt;{login_url}&lt;/a&gt;.
                  You can also use the following access code on {base_url}: {access_code}<br><br>
                  Best regards,<br>
                  Your awesome Organizers
                </p>

                <p>
                  {{ form.invite_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_send_test" 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_start" class="btn btn-success">Create Session</button>
            <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 %}
