{% extends 'base.template.html' %}
{% load staticfiles %}
{% block title %}Registrar Evento{% endblock title %}
{% block extraJs %}
    <script src="{% static "js/formset.js" %}"></script>
    <script type="text/javascript">
    $(function() {
        $('#id_orders_table tbody tr').formset({
            // For inline formsets, be sure to set the prefix, as the default prefix
            // ('form') isn't correct.
            // Django appears to generate the prefix from the lowercase plural
            // name of the related model, with camel-case converted to underscores.
            prefix: 'form'
        })
          $('.datepicker').pickadate({
            selectMonths: true, // Creates a dropdown to control month
            selectYears: 15, // Creates a dropdown of 15 years to control year,
            today: 'Today',
            clear: 'Clear',
            close: 'Ok',
            closeOnSelect: false, // Close upon selecting a date,
            format: "dd/mm/yyyy",
          });
    })
    </script>
{%endblock%}

{% block content %}
    <div class="content center">
        <h5>Datos del Evento</h5><hr/><br>
        <form id="form" method="post">
            {% csrf_token %}
            <div class="input-field {% if form.nombre_evento.errors %}invalid{% endif %}">
                {{ form.nombre_evento }}
                <label for="icon_prefix {{ form.nombre_evento.auto_id }}">Nombre</label>
                {% include 'base.forms.errors.html' with form_errors=form.nombre_evento.errors col_title_error='col s2' col_msg_error='col s10' %}
            </div>
            
            <div class="input-field {% if form.fecha.errors %}invalid{% endif %}">
                <i class="tiny material-icons prefix">perm_contact_calendar</i>
                {{ form.fecha }}
                <label for="icon_prefix {{ form.fecha.auto_id }}">Fecha</label>
                {% include 'base.forms.errors.html' with form_errors=form.fecha.errors col_title_error='col s2' col_msg_error='col s10' %}
            </div>

            <div class="file-field input-field {% if form.archivo.errors %}invalid{% endif %}">
                
                <div class="btn">
                <span for="icon_prefix {{ form.archivo.auto_id }}">Archivo</span>
                    <input type="file">
                </div>
                <div class="file-path-wrapper">
                    {{ form.archivo }}
                </div>
                {% include 'base.forms.errors.html' with form_errors=form.archivo.errors col_title_error='col s2' col_msg_error='col s10' %}
            </div>
            <h5>Datos de los Participantes</h5><hr/><br>
            <table class="striped" id="id_orders_table">
                <thead>
                  <tr>
                      <th scope="col">Nombres</th>
                      <th scope="col">Apellidos</th>
                      <th scope="col">Pasaporte</th>
                      <th scope="col">Correo</th>
                      <th scope="col">Opcion</th>
                  </tr>
                </thead>
                <tbody>
                {{ form2.management_form }}
                {% for form in form2  %}
                <tr id="{{ form.prefix }}-row">
                  <td>
                  {{form.nombres}}
                  </td>
                  <td>
                  {{form.apellidos}}
                  </td>
                  <td>
                  {{form.pasaporte}}
                  </td>
                  <td>
                  {{form.correo}}
                  </td>
                  <td></td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
            <div>
                <button type="submit" class="btn waves-effect red darken-1">Registrar</button>
            </div>
            </div>
        </form>
    </div>
{% endblock %}