{% extends 'base.html' %}
{% load staticfiles %}
{% block stylesheets %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'css/DateTimePicker.min.css' %}"/>
    <link rel="stylesheet" href="{% static 'css/select2.css' %}"/>

{% endblock stylesheets %}
{% block content %}
    <form method="post" id="simple_form"
            {% if form.is_multipart %}
          enctype="multipart/form-data"
            {% endif %}
            >

        {% csrf_token %}

        <table class="table">
            <thead>
            <tr>
                <th colspan="2">
                    <h5>
                        {{ form_header }}
                    </h5>
                </th>

            <tr>
                <th colspan="2" align="right">
                    <button type="submit" class="button primary">Save</button>
                    <a class="button" href="{{ form_back_url }}">Cancel</a>
                </th>
            </tr>

            </tr>
            </thead>
            <tbody>

            {% for field in form %}
                {% if field.errors %}
                    <tr>
                        <td colspan="2">
                            <ul style="margin-bottom: 0; margin-top: 0;">
                                {% for err in field.errors %}
                                    <li><span class="icon-warning on-left fg-red"></span>{{ err }}</li>
                                {% endfor %}
                            </ul>
                        </td>
                    </tr>
                {% endif %}

                <tr>
                    <td>
                        {{ field.label_tag }}
                    </td>
                    <td>
                        {{ field }}
                    </td>
                </tr>

            {% endfor %}

            </tbody>

            <tfoot>
            <tr>
                <td colspan="2" align="right">
                    <button type="submit" class="button primary">Save</button>
                    <a class="button" href="{{ form_back_url }}">Cancel</a>
                </td>
            </tr>
            </tfoot>
        </table>
    </form>

    <!-- le wild invisible date time picker div appears -->
    <div id="dtbox"></div>

    {% block extra %}
    {% endblock extra %}

{% endblock content %}

{% block scripts %}
    {{ block.super }}
    <script type="text/javascript" src="{% static 'js/metro-calendar.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/metro-datepicker.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/DateTimePicker.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/select2.min.js' %}"></script>
    <script>
        $(document).ready(function () {
            // initialize jquery stuff after page load, fancier datepicker and select dropdown
            $(".select2").select2(
                    {
                        allowClear: true
                    }
            );

            $('#dtbox').DateTimePicker({
                mode: "time"
            });

            $('#simple_form:not(.filter) :input:visible:enabled:first').focus();

        });

    </script>
{% endblock %}