{% extends "pretixcontrol/event/settings_base.html" %}
{% load i18n %}
{% load bootstrap3 %}

{% block title %}{% trans "Map Milestones" %}{% endblock %}

{% block inside %}
    <h1>{% trans "Map Milestones" %}</h1>
    <p>
        {% trans "Define important dates (e.g. newsletter dispatch, ticket start) to see them in the Sales Map timeline." %}
    </p>
    <form action="" method="post" class="form-horizontal">
        {% csrf_token %}
        <div class="formset" data-formset-prefix="{{ formset.prefix }}">
            {{ formset.management_form }}
            {% bootstrap_formset_errors formset %}
            <table class="table table-condensed">
                <thead>
                    <tr>
                        <th>{% trans "Date" %}</th>
                        <th>{% trans "Label" %}</th>
                        <th>{% trans "Delete" %}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for form in formset %}
                        <tr class="formset-row">
                            <td>
                                {{ form.id }}
                                {% bootstrap_field form.date layout='inline' %}
                            </td>
                            <td>
                                {% bootstrap_field form.label layout='inline' %}
                            </td>
                            <td>
                                {% if formset.can_delete %}
                                    {% bootstrap_field form.DELETE layout='inline' %}
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-primary">
                    {% trans "Save" %}
                </button>
            </div>
        </div>
    </form>
    <script type="text/javascript" src="{% static "pretixcontrol/js/ui/main.js" %}"></script>
    <script type="text/javascript">
        $(function () {
            $(".datepickerfield").each(function () {
                var format = $("body").attr("data-dateformat");
                $(this).datetimepicker({
                    format: format,
                    locale: $("body").attr("data-datelocale"),
                    useCurrent: false,
                    showClear: true,
                    icons: {
                        time: 'fa fa-clock-o',
                        date: 'fa fa-calendar',
                        up: 'fa fa-chevron-up',
                        down: 'fa fa-chevron-down',
                        previous: 'fa fa-chevron-left',
                        next: 'fa fa-chevron-right',
                        today: 'fa fa-dot-circle-o',
                        clear: 'fa fa-trash',
                        close: 'fa fa-times'
                    }
                });
            });
        });
    </script>
{% endblock %}