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

{% block content %}
  <div class="row justify-content-center">
    <div class="col-12">
      <div class="card shadow">
        <div class="card-body">
            {% if application_id %}
                <form action="{% url 'management:edit_application' pk=election.pk  application_id=application_id %}"
                      method="post" enctype="multipart/form-data">
            {% else %}
                <form action="{% url 'management:add_application' pk=election.pk %}" method="post"
                      enctype="multipart/form-data">
            {% endif %}
            {% csrf_token %}
            <div class="form-group">
                {% if application_id %}
                    <h4>Edit {% if election.voters_self_apply %}Application{% else %}Option{% endif %}</h4>
                {% else %}
                    <h4>New {% if election.voters_self_apply %}Application{% else %}Option{% endif %}</h4>
                {% endif %}
            </div>
            <hr>

            {{ form|as_crispy_errors }}

            <div class="card mb-3">
                <div class="card-body p-3">
                    <h5 class="card-title">Display Name</h5>
                    <div class="form-row">
                <div class="form-group col-md-12 mb-0">
                  {{ form.display_name|as_crispy_field:"bootstrap4" }}
                </div>
              </div>
            </div>
          </div>

          {% if with_email %}
            <div class="card mb-3">
              <div class="card-body p-3">
                <h5 class="card-title">Contact E-Mail Address<span class="ml-2 badge badge-secondary">Optional</span>
                </h5>
                <span class="form-text text-muted mb-2">The e-mail address will not be visible to voters.</span>
                <div class="form-row">
                  <div class="form-group col-md-6 mb-0">
                    {{ form.email|as_crispy_field:"bootstrap4" }}
                  </div>
                </div>
              </div>
            </div>
          {% endif %}

          {% if with_description %}
            <div class="card mb-3">
              <div class="card-body p-3">
                <h5 class="card-title">Application Info<span class="ml-2 badge badge-secondary">Optional</span></h5>
                <span><strong>This information is visible to voters!</strong></span>

                <span class="form-text text-muted mb-2">Add a short description of the applicant.</span>
                <div id="div_id_text" class="form-group">
                  <label for="id_text" class="">Description <small class="text-muted">(max. 250
                    characters)</small></label>
                  <div class="">
                    <textarea name="text" cols="40" rows="2" maxlength="250" class="textarea form-control" id="id_text">{% if form.text.value %}
                      {{ form.text.value }}{% endif %}</textarea>
                  </div>
                </div>

                <span class="form-text text-muted mt-4 mb-2">Add a photo of the applicant.</span>
                {{ form.avatar }}
              </div>
            </div>
          {% endif %}
          <button type="submit" class="btn btn-primary btn-block">Submit</button>
          </form>
        </div>
      </div>
    </div>
  </div>
{% endblock %}

{% block footer_scripts %}
  <script src="{% static "js/application.js" %}"></script>
{% endblock %}
