{% extends "pretixcontrol/items/base.html" %}
{% load i18n %}
{% load bootstrap3 %}
{% load static %}
{% load compress %}
{% block title %}
    {% if checkinlist %}
        {% blocktrans with name=checkinlist.name %}Check-in list: {{ name }}{% endblocktrans %}
    {% else %}
        {% trans "Check-in list" %}
    {% endif %}
{% endblock %}
{% block inside %}
    {% if checkinlist %}
        <h1>
            {% blocktrans with name=checkinlist.name %}Check-in list: {{ name }}{% endblocktrans %}
            <a href="{% url "control:event.orders.checkinlists.simulator" event=request.event.slug organizer=request.event.organizer.slug list=checkinlist.pk %}"
               target="_blank"
               class="btn btn-default">
                <span class="fa fa-flask"></span>
                {% trans "Check-in simulator" %}
            </a>
        </h1>
    {% else %}
        <h1>{% trans "Check-in list" %}</h1>
    {% endif %}
    <form action="" method="post" class="form-horizontal">
        <script type="text/plain"
                id="product-select2">{% url "control:event.items.select2" event=request.event.slug organizer=request.organizer.slug %}</script>
        <script type="text/plain"
                id="variations-select2">{% url "control:event.items.variations.select2" event=request.event.slug organizer=request.organizer.slug %}</script>
        <script type="text/plain"
                id="gates-select2">{% url "control:organizer.gates.select2" organizer=request.organizer.slug %}</script>
        {% csrf_token %}
        {% bootstrap_form_errors form %}
        <div class="tabbed-form">
            <fieldset>
                <legend>{% trans "General" %}</legend>
                {% bootstrap_field form.name layout="control" %}
                {% if form.subevent %}
                    {% bootstrap_field form.subevent layout="control" %}
                {% endif %}
                {% bootstrap_field form.include_pending layout="control" %}
                {% bootstrap_field form.all_products layout="control" %}
                {% bootstrap_field form.limit_products layout="control" %}
            </fieldset>
            <fieldset>
                <legend>{% trans "Advanced" %}</legend>
                <div class="alert alert-info">
                    {% blocktrans trimmed %}
                        These settings on this page are intended for professional users with very specific check-in
                        situations. Please reach out to support if you have questions about setting this up.
                    {% endblocktrans %}
                    <br>
                </div>
                <div class="alert alert-warning">
                    {% blocktrans trimmed %}
                        Make sure to always use the latest version of our scanning apps for these options to work.
                    {% endblocktrans %}
                    <br>
                    {% blocktrans trimmed %}
                        If you make use of these advanced options, we recommend using our Android and Desktop apps.
                    {% endblocktrans %}
                </div>

                {% bootstrap_field form.allow_multiple_entries layout="control" %}
                {% bootstrap_field form.allow_entry_after_exit layout="control" %}
                {% bootstrap_field form.addon_match layout="control" %}
                {% bootstrap_field form.exit_all_at layout="control" %}
                {% bootstrap_field form.auto_checkin_sales_channels layout="control" %}
                {% if form.gates %}
                    {% bootstrap_field form.gates layout="control" %}
                {% endif %}
                {% bootstrap_field form.consider_tickets_used layout="control" %}
                {% bootstrap_field form.ignore_in_statistics layout="control" %}

                <h3>{% trans "Custom check-in rule" %}</h3>
                <div id="rules-editor" class="form-inline">
                    <div>
                        <ul class="nav nav-tabs" role="tablist">
                            <li role="presentation" class="active">
                                <a href="#rules-edit" role="tab" data-toggle="tab">
                                    <span class="fa fa-edit"></span>
                                    {% trans "Edit" %}
                                </a>
                            </li>
                            <li role="presentation">
                                <a href="#rules-viz" role="tab" data-toggle="tab">
                                    <span class="fa fa-eye"></span>
                                    {% trans "Visualize" %}
                                </a>
                            </li>
                        </ul>

                        <!-- Tab panes -->
                        <div class="tab-content">
                            <div role="tabpanel" class="tab-pane active" id="rules-edit">
                                <checkin-rules-editor></checkin-rules-editor>
                            </div>
                            <div role="tabpanel" class="tab-pane" id="rules-viz">
                                <checkin-rules-visualization></checkin-rules-visualization>
                            </div>
                        </div>

                    </div>
                    <div class="alert alert-info" v-if="missingItems.length">
                        <p>
                            {% trans "Your rule always filters by product or variation, but the following products or variations are not contained in any of your rule parts so people with these tickets will not get in:" %}
                        </p>
                        <ul>
                            <li v-for="h in missingItems">{{ "{" }}{h}{{ "}" }}</li>
                        </ul>
                        <p>
                            {% trans "Please double-check if this was intentional." %}
                        </p>
                    </div>
                </div>
                <div class="disabled-withoutjs sr-only">
                    {{ form.rules }}
                </div>
            </fieldset>
        </div>
        <div class="form-group submit-group">
            <button type="submit" class="btn btn-primary btn-save">
                {% trans "Save" %}
            </button>
        </div>
    </form>
    {{ items|json_script:"items" }}

    {% if DEBUG %}
        <script type="text/javascript" src="{% static "vuejs/vue.js" %}"></script>
    {% else %}
        <script type="text/javascript" src="{% static "vuejs/vue.min.js" %}"></script>
    {% endif %}
    {% compress js %}
        <script type="text/javascript" src="{% static "d3/d3.v6.js" %}"></script>
        <script type="text/javascript" src="{% static "d3/d3-color.v2.js" %}"></script>
        <script type="text/javascript" src="{% static "d3/d3-dispatch.v2.js" %}"></script>
        <script type="text/javascript" src="{% static "d3/d3-ease.v2.js" %}"></script>
        <script type="text/javascript" src="{% static "d3/d3-interpolate.v2.js" %}"></script>
        <script type="text/javascript" src="{% static "d3/d3-selection.v2.js" %}"></script>
        <script type="text/javascript" src="{% static "d3/d3-timer.v2.js" %}"></script>
        <script type="text/javascript" src="{% static "d3/d3-transition.v2.js" %}"></script>
        <script type="text/javascript" src="{% static "d3/d3-drag.v2.js" %}"></script>
        <script type="text/javascript" src="{% static "d3/d3-zoom.v2.js" %}"></script>
    {% endcompress %}
    {% compress js %}
        <script type="text/javascript" src="{% static "pretixcontrol/js/ui/checkinrules/jsonlogic-boolalg.js" %}"></script>
        <script type="text/vue" src="{% static 'pretixcontrol/js/ui/checkinrules/datetimefield.vue' %}"></script>
        <script type="text/vue" src="{% static 'pretixcontrol/js/ui/checkinrules/timefield.vue' %}"></script>
        <script type="text/vue" src="{% static 'pretixcontrol/js/ui/checkinrules/lookup-select2.vue' %}"></script>
        <script type="text/vue" src="{% static 'pretixcontrol/js/ui/checkinrules/checkin-rule.vue' %}"></script>
        <script type="text/vue" src="{% static 'pretixcontrol/js/ui/checkinrules/checkin-rules-editor.vue' %}"></script>
        <script type="text/vue" src="{% static 'pretixcontrol/js/ui/checkinrules/viz-node.vue' %}"></script>
        <script type="text/vue" src="{% static 'pretixcontrol/js/ui/checkinrules/checkin-rules-visualization.vue' %}"></script>
        <script type="text/javascript" src="{% static "pretixcontrol/js/ui/checkinrules.js" %}"></script>
    {% endcompress %}
{% endblock %}
