{% extends "pretixcontrol/items/base.html" %}
{% load i18n %}
{% load eventsignal %}
{% load bootstrap3 %}
{% block title %}{% trans "Voucher" %}{% endblock %}
{% block inside %}
    <h1>{% trans "Create multiple voucher" %}</h1>
    <form action="" method="post" class="form-horizontal">
        {% csrf_token %}
        {% bootstrap_form_errors form %}
        <fieldset>
            <legend>{% trans "Voucher codes" %}</legend>
            <div class="form-group form-inline">
                <div class="col-md-7 col-sm-12 col-md-offset-3">
                    <input type="text" class="form-control input-xs"
                           id="voucher-bulk-codes-prefix"
                           placeholder="{% trans "Prefix (optional)" %}">
                    <div class="input-group">
                        <input type="number" class="form-control input-xs"
                               id="voucher-bulk-codes-num"
                               placeholder="{% trans "Number" %}">
                        <div class="input-group-btn">
                            <button class="btn btn-default" type="button" id="voucher-bulk-codes-generate"
                                    data-rng-url="{% url 'control:event.vouchers.rng' organizer=request.event.organizer.slug event=request.event.slug %}">
                                {% trans "Generate random codes" %}
                            </button>
                            <button type="button" class="btn btn-default btn-clipboard" data-clipboard-target="#id_codes">
                                <i class="fa fa-clipboard" aria-hidden="true"></i>
                                {% trans "Copy codes" %}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            {% bootstrap_field form.codes layout="control" %}

            {% bootstrap_field form.max_usages layout="control" %}
        </fieldset>
        <fieldset>
            <legend>{% trans "Voucher details" %}</legend>
            {% bootstrap_field form.valid_until layout="control" horizontal_field_class="col-md-9 splitdatetimerow" %}
            {% bootstrap_field form.block_quota layout="control" %}
            {% bootstrap_field form.allow_ignore_quota layout="control" %}
            <div class="form-group">
                <label class="col-md-3 control-label" for="id_tag">{% trans "Price effect" %}</label>
                <div class="col-md-5">
                    {% bootstrap_field form.price_mode show_label=False form_group_class="" %}
                </div>
                <div class="col-md-4">
                    {% bootstrap_field form.value show_label=False form_group_class="" %}
                </div>
            </div>
            {% bootstrap_field form.itemvar layout="control" %}
            <div class="form-group">
                <div class="col-md-9 col-md-offset-3">
                    <div class="controls">
                        <div class="alert alert-info">
                            {% blocktrans trimmed %}
                                If you choose "any product" for a specific quota and choose to reserve quota for this
                                voucher above, the product can still be unavailable to the voucher holder if another quota
                                associated with the product is sold out!
                            {% endblocktrans %}
                        </div>
                    </div>
                </div>
            </div>
            {% if form.subevent %}
                {% bootstrap_field form.subevent layout="control" %}
            {% endif %}
            {% bootstrap_field form.tag layout="control" %}
            {% bootstrap_field form.comment layout="control" %}
        </fieldset>
        {% eventsignal request.event "pretix.control.signals.voucher_form_html" form=form %}
        <div class="form-group submit-group">
            <button type="submit" class="btn btn-primary btn-save">
                {% trans "Save" %}
            </button>
        </div>
    </form>
{% endblock %}
