{% extends 'private_template.html' %}
{% load static %}

{% block titulo %}Makarios | Eventos{% endblock %}

{% block header %}
  {% include 'private_header.html' %}
{% endblock %}

{% block content %}
<div id="formulario-externo" class="central_pane p-0 pt-5">
  <div class="card col-md-8 mx-auto mt-5 p-0">
    <div id="card-panel" class="card col-md card-main mb-0">
      <div class="card-body col-md mt-3">
        <h2 class="mb-4">{{ titulo }}</h2>

        {% if form.errors %}
          <div class="alert alert-danger">Corrija os campos em destaque.</div>
        {% endif %}

        <form method="post">
          {% csrf_token %}

          <div class="row">
            <div class="col-md-12 mb-3">
              <label for="{{ form.title.id_for_label }}">Título</label>
              <div class="input-group">
                {{ form.title }}
                <div class="input-group-append">
                  <div class="input-group-text"><span class="fas fa-heading"></span></div>
                </div>
              </div>
              {% if form.title.errors %}<small class="text-danger">{{ form.title.errors.0 }}</small>{% endif %}
            </div>

            <div class="col-md-6 mb-3">
              <label for="{{ form.date.id_for_label }}">Data</label>
              <div class="input-group">
                {{ form.date }}
                <div class="input-group-append">
                  <div class="input-group-text"><span class="fas fa-calendar-alt"></span></div>
                </div>
              </div>
              {% if form.date.errors %}<small class="text-danger">{{ form.date.errors.0 }}</small>{% endif %}
            </div>

            <div class="col-md-6 mb-3">
              <label for="{{ form.time.id_for_label }}">Hora</label>
              <div class="input-group">
                {{ form.time }}
                <div class="input-group-append">
                  <div class="input-group-text"><span class="fas fa-clock"></span></div>
                </div>
              </div>
              {% if form.time.errors %}<small class="text-danger">{{ form.time.errors.0 }}</small>{% endif %}
            </div>

            <div class="col-md-12 mb-3">
              <label for="{{ form.location.id_for_label }}">Local</label>
              <div class="input-group">
                {{ form.location }}
                <div class="input-group-append">
                  <div class="input-group-text"><span class="fas fa-map-marker-alt"></span></div>
                </div>
              </div>
              {% if form.location.errors %}<small class="text-danger">{{ form.location.errors.0 }}</small>{% endif %}
            </div>
          </div>

          <div class="row justify-content-between mt-3">
            <div class="col-md-4">
              <a href="{% url 'listar_eventos' %}" class="btn btn-dark btn-block">Cancelar</a>
            </div>
            <div class="col-md-4 offset-md-4">
              <button type="submit" class="btn btn-warning btn-block">Salvar</button>
            </div>
          </div>

        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}