{% load i18n %}
{% load bootstrap3 %}
{% load formset_tags %}
{% load getitem %}
<div class="formset" data-formset data-formset-prefix="{{ formset.prefix }}" id="item_variations">
    {{ formset.management_form }}
    {% bootstrap_formset_errors formset %}
    <div data-formset-body>
        {% for form in formset %}
            <details class="panel panel-default" data-formset-form>
                <div class="sr-only">
                    {{ form.id }}
                    {% bootstrap_field form.DELETE form_group_class="" layout="inline" %}
                    {% bootstrap_field form.ORDER form_group_class="" layout="inline" %}
                </div>
                <summary class="panel-heading">
                    <div class="row">
                        <div class="col-md-4 col-xs-12">
                            <strong class="panel-title">
                                <span class="fa fa-warning text-danger hidden variation-error"></span>
                                <span class="variation-name">
                                    Variation name
                                </span>
                            </strong>
                            <span class="fa fa-warning text-warning hidden variation-warning"></span>
                            {% if form.instance.id %}
                                <br>
                                <small class="text-muted">#{{ form.instance.id }}</small>
                            {% endif %}
                        </div>
                        <div class="col-md-2 col-xs-6">
                            <span class="fa fa-clock-o fa-fw text-muted variation-timeframe variation-icon-hidden"
                                  data-toggle="tooltip"
                                  title="{% trans "Only available in a limited timeframe" %}"></span>
                            <span class="fa fa-tags fa-fw text-muted variation-voucher variation-icon-hidden"
                                  data-toggle="tooltip"
                                  title="{% trans "Only visible with a voucher" %}"></span>
                            <span class="fa fa-id-badge fa-fw text-muted variation-membership variation-icon-hidden"
                                  data-toggle="tooltip"
                                  title="{% trans "Require a valid membership" %}"></span>
                        </div>
                        <div class="col-md-2 col-xs-6">
                            {% for k, c in sales_channels.items %}
                                <span class="fa fa-fw fa-{{ c.icon }} text-muted variation-channel-{{ k }} variation-icon-hidden"
                                      data-toggle="tooltip" title="{% trans c.verbose_name %}"></span>
                            {% endfor %}
                        </div>
                        <div class="col-md-1 col-xs-6 text-right flip variation-price">
                            <!-- price will be inserted by JS here -->
                        </div>
                        <div class="col-md-3 col-xs-6 text-right flip">
                            <button type="button" class="btn btn-default" data-formset-move-up-button>
                                <i class="fa fa-arrow-up"></i></button>
                            <button type="button" class="btn btn-default" data-formset-move-down-button>
                                <i class="fa fa-arrow-down"></i></button>
                            <button type="button" class="btn btn-danger" data-formset-delete-button>
                                <i class="fa fa-trash"></i></button>
                        </div>
                    </div>
                </summary>
                <div class="panel-body form-horizontal">
                    {% if form.instance.pk and not form.instance.quotas.exists %}
                        <div class="alert alert-warning">
                            {% blocktrans trimmed %}
                                Please note that your variation will <strong>not</strong> be available for sale
                                until you have added it to an existing or newly created quota.
                            {% endblocktrans %}
                        </div>
                    {% endif %}
                    {% bootstrap_form_errors form %}
                    {% bootstrap_field form.active layout="control" %}
                    {% bootstrap_field form.value layout="control" %}
                    {% bootstrap_field form.default_price addon_after=request.event.currency layout="control" %}
                    {% bootstrap_field form.free_price_suggestion addon_after=request.event.currency layout="control" %}
                    {% bootstrap_field form.original_price addon_after=request.event.currency layout="control" %}
                    {% bootstrap_field form.description layout="control" %}
                    {% if form.meta_fields %}
                        <div class="form-group metadata-group">
                            <label class="col-md-3 control-label">{% trans "Meta data" %}</label>
                            <div class="col-md-9">
                                {% for fname in form.meta_fields %}
                                    {% with form|getitem:fname as field %}
                                        <div class="row">
                                            <div class="col-md-4">
                                                <label for="{{ field.id_for_label }}">
                                                    {{ field.label }}
                                                </label>
                                            </div>
                                            <div class="col-md-8">
                                                {% bootstrap_field field layout="inline" %}
                                            </div>
                                        </div>
                                    {% endwith %}
                                {% endfor %}
                            </div>
                        </div>
                    {% endif %}
                    {% bootstrap_field form.available_from visibility_field=form.available_from_mode layout="control_with_visibility"  %}
                    {% bootstrap_field form.available_until visibility_field=form.available_until_mode layout="control_with_visibility" %}
                    {% bootstrap_field form.sales_channels layout="control" %}
                    {% bootstrap_field form.hide_without_voucher layout="control" %}
                    {% bootstrap_field form.require_approval layout="control" %}
                    {% if form.require_membership %}
                        {% bootstrap_field form.require_membership layout="control" %}
                        <div data-display-dependency="#{{ form.require_membership.id_for_label }}">
                            {% bootstrap_field form.require_membership_types layout="control" %}
                            {% bootstrap_field form.require_membership_hidden layout="control" %}
                        </div>
                    {% endif %}
                    {% bootstrap_field form.checkin_attention layout="control" %}
                    {% bootstrap_field form.checkin_text layout="control" %}
                </div>
            </details>
        {% endfor %}
    </div>
    <script type="form-template" data-formset-empty-form>
        {% escapescript %}
            <details class="panel panel-default" data-formset-form open>
                <div class="sr-only">
                    {{ formset.empty_form.id }}
                    {% bootstrap_field formset.empty_form.DELETE form_group_class="" layout="inline" %}
                    {% bootstrap_field formset.empty_form.ORDER form_group_class="" layout="inline" %}
                </div>
                <summary class="panel-heading">
                    <div class="row">
                        <div class="col-md-4 col-xs-12">
                            <strong class="panel-title">
                                <span class="fa fa-warning text-danger hidden variation-error"></span>
                                <span class="variation-name">
                                    {% trans "New variation" %}
                                </span>
                            </strong>
                            <span class="fa fa-warning text-warning hidden variation-warning"></span>
                            {% if form.instance.id %}
                                <br>
                                <small class="text-muted">#{{ form.instance.id }}</small>
                            {% endif %}
                        </div>
                        <div class="col-md-2 col-xs-6">
                            <span class="fa fa-clock-o fa-fw text-muted variation-timeframe variation-icon-hidden"
                                  data-toggle="tooltip"
                                  title="{% trans "Only available in a limited timeframe" %}"></span>
                            <span class="fa fa-tags fa-fw text-muted variation-voucher variation-icon-hidden"
                                  data-toggle="tooltip"
                                  title="{% trans "Only visible with a voucher" %}"></span>
                            <span class="fa fa-id-badge fa-fw text-muted variation-membership variation-icon-hidden"
                                  data-toggle="tooltip"
                                  title="{% trans "Require a valid membership" %}"></span>
                        </div>
                        <div class="col-md-2 col-xs-6">
                            {% for k, c in sales_channels.items %}
                                <span class="fa fa-fw fa-{{ c.icon }} text-muted variation-channel-{{ k }} variation-icon-hidden"
                                      data-toggle="tooltip" title="{% trans c.verbose_name %}"></span>
                            {% endfor %}
                        </div>
                        <div class="col-md-1 col-xs-6 text-right flip variation-price">
                            <!-- price will be inserted by JS here -->
                        </div>
                        <div class="col-md-3 col-xs-6 text-right flip">
                            <button type="button" class="btn btn-default" data-formset-move-up-button>
                                <i class="fa fa-arrow-up"></i></button>
                            <button type="button" class="btn btn-default" data-formset-move-down-button>
                                <i class="fa fa-arrow-down"></i></button>
                            <button type="button" class="btn btn-danger" data-formset-delete-button>
                                <i class="fa fa-trash"></i></button>
                        </div>
                    </div>
                </summary>
                <div class="panel-body form-horizontal">
                    {% bootstrap_field formset.empty_form.active layout="control" %}
                    {% bootstrap_field formset.empty_form.value layout="control" %}
                    {% bootstrap_field formset.empty_form.default_price addon_after=request.event.currency layout="control" %}
                    {% bootstrap_field formset.empty_form.free_price_suggestion addon_after=request.event.currency layout="control" %}
                    {% bootstrap_field formset.empty_form.original_price addon_after=request.event.currency layout="control" %}
                    {% bootstrap_field formset.empty_form.description layout="control" %}
                    {% if formset.empty_form.meta_fields %}
                        <div class="form-group metadata-group">
                            <label class="col-md-3 control-label">{% trans "Meta data" %}</label>
                            <div class="col-md-9">
                                {% for fname in formset.empty_form.meta_fields %}
                                    {% with formset.empty_form|getitem:fname as field %}
                                        <div class="row">
                                            <div class="col-md-4">
                                                <label for="{{ field.id_for_label }}">
                                                    {{ field.label }}
                                                </label>
                                            </div>
                                            <div class="col-md-8">
                                                {% bootstrap_field field layout="inline" %}
                                            </div>
                                        </div>
                                    {% endwith %}
                                {% endfor %}
                            </div>
                        </div>
                    {% endif %}
                    {% bootstrap_field formset.empty_form.available_from visibility_field=formset.empty_form.available_from_mode layout="control_with_visibility"  %}
                    {% bootstrap_field formset.empty_form.available_until visibility_field=formset.empty_form.available_until_mode layout="control_with_visibility" %}
                    {% bootstrap_field formset.empty_form.available_until layout="control" %}
                    {% bootstrap_field formset.empty_form.sales_channels layout="control" %}
                    {% bootstrap_field formset.empty_form.hide_without_voucher layout="control" %}
                    {% bootstrap_field formset.empty_form.require_approval layout="control" %}
                    {% if formset.empty_form.require_membership %}
                        {% bootstrap_field formset.empty_form.require_membership layout="control" %}
                        <div data-display-dependency="#{{ formset.empty_form.require_membership.id_for_label }}">
                            {% bootstrap_field formset.empty_form.require_membership_types layout="control" %}
                            {% bootstrap_field formset.empty_form.require_membership_hidden layout="control" %}
                        </div>
                    {% endif %}
                    {% bootstrap_field formset.empty_form.checkin_attention layout="control" %}
                    {% bootstrap_field formset.empty_form.checkin_text layout="control" %}
                </div>
            </details>
        {% endescapescript %}
    </script>
    <p>
        <button type="button" class="btn btn-default" data-formset-add>
            <i class="fa fa-plus"></i> {% trans "Add a new variation" %}</button>
    </p>
</div>
