{% extends "pretixcontrol/items/base.html" %}
{% load i18n %}
{% load eventsignal %}
{% load bootstrap3 %}
{% block title %}{% trans "Voucher" %}{% endblock %}
{% block inside %}
    <h1>{% trans "Create multiple vouchers" %}</h1>
    <form action="" method="post" class="form-horizontal" data-asynctask mail-preview-url="{% url "control:event.vouchers.bulk.mail_preview" event=request.event.slug organizer=request.event.organizer.slug %}">
        {% 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" max="100000"
                               placeholder="{% trans "Number" context "number_of_things" %}">
                        <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" %}

        </fieldset>
        <fieldset>
            <legend>{% trans "Voucher details" %}</legend>
            {% bootstrap_field form.max_usages layout="control" %}
            {% bootstrap_field form.valid_until layout="control" %}
            {% bootstrap_field form.itemvar 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>
            <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 %}
            {% if "seats" in form.fields %}
                {% bootstrap_field form.seats layout="control" %}
            {% endif %}
        </fieldset>
        <fieldset>
            <legend>{% trans "Advanced settings" %}</legend>
            {% bootstrap_field form.block_quota layout="control" %}
            {% bootstrap_field form.allow_ignore_quota layout="control" %}
            {% bootstrap_field form.min_usages layout="control" %}
            {% bootstrap_field form.budget addon_after=request.event.currency layout="control" %}
            {% bootstrap_field form.tag layout="control" %}
            {% bootstrap_field form.comment layout="control" %}
            {% bootstrap_field form.show_hidden_items layout="control" %}
            {% bootstrap_field form.all_addons_included layout="control" %}
            {% bootstrap_field form.all_bundles_included layout="control" %}
        </fieldset>
        <fieldset>
            <legend>{% trans "Send out emails" %}</legend>
            {% bootstrap_field form.send layout="control" %}

            <div id="send_subject_panel" class="preview-panel form-group" for="send_subject">
                {% with field=form.send_subject item="send_subject" %}
                    <label class="col-md-3 control-label">{{ field.label }}</label>
                    <div class="col-md-9">
                        <ul class="nav nav-tabs">
                            <li role="presentation" class="active">
                                <a data-toggle="tab" type="edit" href="#{{ item }}_edit"><i class="fa fa-pencil-square-o fa-fw"></i> {% trans "Edit" %}</a>
                            </li>
                            <li role="presentation">
                                <a data-toggle="tab" type="preview" href="#{{ item }}_preview"><i class="fa fa-tv fa-fw"></i> {% trans "Preview" %}</a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div id="{{ item }}_edit" class="tab-pane fade in active">
                                {% bootstrap_field field show_label=False form_group_class="" %}
                            </div>
                            <div id="{{ item }}_preview" class="tab-pane mail-preview-group">
                                <div lang="all" for="{{ item }}" class="mail-preview"></div>
                            </div>
                        </div>
                    </div>
                {% endwith %}
            </div>
            <div id="send_message_panel" class="preview-panel form-group" for="send_message">
                {% with field=form.send_message item="send_message" %}
                    <label class="col-md-3 control-label">{{ field.label }}</label>
                    <div class="col-md-9">
                        <ul class="nav nav-tabs">
                            <li role="presentation" class="active">
                                <a data-toggle="tab" type="edit" href="#{{ item }}_edit"><i class="fa fa-pencil-square-o fa-fw"></i> {% trans "Edit" %}</a>
                            </li>
                            <li role="presentation">
                                <a data-toggle="tab" type="preview" href="#{{ item }}_preview"><i class="fa fa-tv fa-fw"></i> {% trans "Preview" %}</a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div id="{{ item }}_edit" class="tab-pane fade in active">
                                {% bootstrap_field field show_label=False form_group_class="" %}
                            </div>
                            <div id="{{ item }}_preview" class="tab-pane mail-preview-group">
                                <div lang="all" for="{{ item }}" class="mail-preview"></div>
                            </div>
                        </div>
                    </div>
                {% endwith %}
            </div>

            {% bootstrap_field form.send_recipients layout="horizontal" %}
        </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 %}
