{% load i18n %}
{% load bootstrap3 %}
{% load formset_tags %}
<p>
    {% blocktrans trimmed %}
        With program times, you can set specific dates and times for this product.
        This is useful if this product represents access to parts of your event that happen at different times than your event in general.
        This will not affect access control, but will affect calendar invites and ticket output. 
    {% endblocktrans %}
</p>

<div class="formset" data-formset data-formset-prefix="{{ formset.prefix }}">
    {{ formset.management_form }}
    {% bootstrap_formset_errors formset %}
    <div data-formset-body>
        {% for form in formset %}
            <div class="panel panel-default" data-formset-form>
                <div class="sr-only">
                    {{ form.id }}
                    {% bootstrap_field form.DELETE form_group_class="" layout="inline" %}
                </div>
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-sm-8">
                            <h3 class="panel-title">{% trans "Program time" %}</h3>
                        </div>
                        <div class="col-sm-4 text-right flip">
                            <button type="button" class="btn btn-xs btn-danger" data-formset-delete-button>
                                <i class="fa fa-trash"></i></button>
                        </div>
                    </div>
                </div>
                <div class="panel-body form-horizontal">
                    {% bootstrap_form_errors form %}
                    {% bootstrap_field form.start layout="control" %}
                    {% bootstrap_field form.end layout="control" %}
                </div>
            </div>
        {% endfor %}
    </div>
    <script type="form-template" data-formset-empty-form>
        {% escapescript %}
            <div class="panel panel-default" data-formset-form>
                <div class="sr-only">
                    {{ formset.empty_form.id }}
                    {% bootstrap_field formset.empty_form.DELETE form_group_class="" layout="inline" %}
                </div>
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-sm-8">
                            <h3 class="panel-title">{% trans "Program time" %}</h3>
                        </div>
                        <div class="col-sm-4 text-right flip">
                            <button type="button" class="btn btn-xs btn-danger" data-formset-delete-button>
                                <i class="fa fa-trash"></i></button>
                        </div>
                    </div>
                </div>
                <div class="panel-body form-horizontal">
                    {% bootstrap_field formset.empty_form.start layout="control" %}
                    {% bootstrap_field formset.empty_form.end layout="control" %}
                </div>
            </div>
        {% endescapescript %}
    </script>
    <p>
        <button type="button" class="btn btn-default" data-formset-add>
            <i class="fa fa-plus"></i> {% trans "Add a program time" %}</button>
    </p>
</div>