{% extends "pretixpresale/event/base.html" %}
{% load i18n %}
{% load l10n %}
{% load eventurl %}
{% load thumbnail %}
{% load eventsignal %}
{% load rich_text %}
{% block title %}{% trans "Presale" %}{% endblock %}

{% block content %}
    {% if cart.positions %}
        <div class="panel panel-primary cart">
            <div class="panel-heading">
                <h3 class="panel-title">{% trans "Your cart" %}</h3>
            </div>
            <div class="panel-body">
                {% include "pretixpresale/event/fragment_cart.html" with cart=cart event=request.event editable=True %}
                <em id="cart-deadline" data-expires="{{ cart.first_expiry|date:"Y-m-d H:i:sO" }}">
                    {% if cart.minutes_left > 0 %}
                        {% blocktrans trimmed with minutes=cart.minutes_left %}
                            The items in your cart are reserved for you for {{ minutes }} minutes.
                        {% endblocktrans %}
                    {% else %}
                        {% trans "The items in your cart are no longer reserved for you." %}
                    {% endif %}
                </em>
                <div class="row checkout-button-row">
                    <div class="col-md-4 col-xs-12">
                        <form method="post" data-asynctask action="{% eventurl request.event "presale:event.cart.clear" %}">
                            {% csrf_token %}
                            <button class="btn btn-block btn-default btn-lg" type="submit"><i class="fa fa-close"></i> {% trans "Empty cart" %}</button>
                        </form>
                    </div>
                    <div class="col-md-4 col-md-offset-4 col-xs-12">
                        <a class="btn btn-block btn-primary btn-lg"
                                href="{% eventurl request.event "presale:event.checkout.start" %}">
                            <i class="fa fa-shopping-cart"></i> {% trans "Proceed with checkout" %}
                        </a>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
    {% endif %}
    {% if not event.presale_is_running %}
        <div class="alert alert-info">
            {% if event.presale_has_ended %}
                {% blocktrans trimmed %}
                    The presale period for this event is over.
                {% endblocktrans %}
            {% elif event.settings.presale_start_show_date %}
                {% blocktrans trimmed with date=event.presale_start|date:"SHORT_DATE_FORMAT" time=event.presale_start|time:"TIME_FORMAT" %}
                    The presale for this event will start on {{ date }} at {{ time }}.
                {% endblocktrans %}
            {% else %}
                {% blocktrans trimmed %}
                    The presale for this event has not yet started.
                {% endblocktrans %}
            {% endif %}
        </div>
    {% endif %}
    <div>
        {% if frontpage_text %}
        <div>
            {{ frontpage_text|rich_text }}
        </div>
        {% endif %}
        <p class="text-right">
            <a href="{% eventurl event "presale:event.ical.download" %}" class="btn btn-link btn-xs">
                <i class="fa fa-calendar"></i> {% trans "Add to Calendar" %}
            </a>
        </p>
    </div>

    {% eventsignal event "pretix.presale.signals.front_page_top" %}
    {% if event.presale_is_running or event.settings.show_items_outside_presale_period %}
        <form method="post" data-asynctask
                action="{% eventurl request.event "presale:event.cart.add" %}?next={{ request.path|urlencode }}">
            {% csrf_token %}
            {% for tup in items_by_category %}
                <section>
                    {% if tup.0 %}
                        <h3>{{ tup.0.name }}</h3>
                        {% if tup.0.description %}
                            <p>{{ tup.0.description|localize|rich_text }}</p>
                        {% endif %}
                    {% endif %}
                    {% for item in tup.1 %}
                        {% if item.has_variations %}
                            <div class="item-with-variations">
                                <div class="row-fluid product-row headline">
                                    <div class="col-md-8 col-xs-12">
                                        {% if item.picture %}
                                            <a href="{{ item.picture.url }}" class="productpicture"
                                                    data-title="{{ item.name }}"
                                                    data-lightbox="{{ item.id }}">
                                                <img src="{{ item.picture|thumbnail_url:'productlist' }}"
                                                        alt="{{ item.name }}"/>
                                            </a>
                                        {% endif %}
                                        <a href="#" data-toggle="variations">
                                            <strong>{{ item.name }}</strong>
                                        </a>
                                        {% if item.description %}<p>{{ item.description|localize|rich_text }}</p>
                                        {% endif %}
                                        {% if item.min_per_order %}
                                            <p><small>
                                                {% blocktrans trimmed with num=item.min_per_order %}
                                                    minimum amount to order: {{ num }}
                                                {% endblocktrans %}
                                            </small></p>
                                        {% endif %}
                                    </div>
                                    <div class="col-md-2 col-xs-6 price">
                                        {% if item.min_price != item.max_price or item.free_price %}
                                            {% blocktrans trimmed with minprice=item.min_price|floatformat:2 currency=event.currency %}
                                                from {{ currency }} {{ minprice }}
                                            {% endblocktrans %}
                                        {% else %}
                                            {{ event.currency }} {{ item.min_price|floatformat:2 }}
                                        {% endif %}
                                    </div>
                                    <div class="col-md-2 col-xs-6 availability-box">
                                        {% if not event.settings.show_variations_expanded %}
                                            <a href="#" data-toggle="variations" class="js-only">
                                                {% trans "Show variants" %}
                                            </a>
                                        {% endif %}
                                    </div>
                                    <div class="clearfix"></div>
                                </div>
                                <div class="variations {% if not event.settings.show_variations_expanded %}variations-collapsed{% endif %}">
                                    {% for var in item.available_variations %}
                                        <div class="row-fluid product-row variation">
                                            <div class="col-md-8 col-xs-12">
                                                {{ var }}
                                                {% if event.settings.show_quota_left %}
                                                    {% include "pretixpresale/event/fragment_quota_left.html" with avail=var.cached_availability %}
                                                {% endif %}
                                            </div>
                                            <div class="col-md-2 col-xs-6 price">
                                                {% if item.free_price %}
                                                    <div class="input-group input-group-price">
                                                        <span class="input-group-addon">{{ event.currency }}</span>
                                                        <input type="number" class="form-control input-item-price"
                                                                placeholder="0"
                                                                min="{{ var.display_price|stringformat:"0.2f" }}"
                                                                name="price_{{ item.id }}_{{ var.id }}"
                                                                step="any" value="{{ var.display_price|stringformat:"0.2f" }}">
                                                    </div>
                                                {% else %}
                                                    {{ event.currency }} {{ var.display_price|floatformat:2 }}
                                                {% endif %}
                                                {% if item.tax_rate and event.settings.display_net_prices %}
                                                    <small>{% blocktrans trimmed with rate=item.tax_rate %}
                                                        <strong>plus</strong> {{ rate }}% taxes
                                                    {% endblocktrans %}</small>
                                                {% elif item.tax_rate %}
                                                    <small>{% blocktrans trimmed with rate=item.tax_rate %}
                                                        incl. {{ rate }}% taxes
                                                    {% endblocktrans %}</small>
                                                {% endif %}
                                            </div>
                                            {% if item.require_voucher %}
                                                <div class="col-md-2 col-xs-6 availability-box unavailable">
                                                    <small>
                                                        {% trans "Enter a voucher code below to buy this ticket." %}
                                                    </small>
                                                </div>
                                            {% elif var.cached_availability.0 == 100 %}
                                                <div class="col-md-2 col-xs-6 availability-box available">
                                                    {% if item.max_per_order == 1 %}
                                                        <label class="item-checkbox-label">
                                                            <input type="checkbox" value="1"
                                                                    name="variation_{{ item.id }}_{{ var.id }}">
                                                        </label>
                                                    {% else %}
                                                        <input type="number" class="form-control input-item-count" placeholder="0" min="0"
                                                                max="{{ var.order_max }}"
                                                                name="variation_{{ item.id }}_{{ var.id }}">
                                                    {% endif %}
                                                </div>
                                            {% else %}
                                                {% include "pretixpresale/event/fragment_availability.html" with avail=var.cached_availability.0 event=event item=item var=var %}
                                            {% endif %}
                                            <div class="clearfix"></div>
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                        {% else %}
                            <div class="row-fluid product-row simple">
                                <div class="col-md-8 col-xs-12">
                                    {% if item.picture %}
                                        <a href="{{ item.picture.url }}" class="productpicture"
                                                data-title="{{ item.name }}"
                                                data-lightbox="{{ item.id }}">
                                            <img src="{{ item.picture|thumbnail_url:'productlist' }}"
                                                    alt="{{ item.name }}"/>
                                        </a>
                                    {% endif %}
                                    <strong>{{ item.name }}</strong>
                                    {% if item.description %}
                                        <p class="description">{{ item.description|localize|rich_text }}</p>{% endif %}
                                    {% if event.settings.show_quota_left %}
                                        {% include "pretixpresale/event/fragment_quota_left.html" with avail=item.cached_availability %}
                                    {% endif %}
                                    {% if item.min_per_order %}
                                        <p><small>
                                            {% blocktrans trimmed with num=item.min_per_order %}
                                                minimum amount to order: {{ num }}
                                            {% endblocktrans %}
                                        </small></p>
                                    {% endif %}
                                </div>
                                <div class="col-md-2 col-xs-6 price">
                                    {% if item.free_price %}
                                        <div class="input-group input-group-price">
                                            <span class="input-group-addon">{{ event.currency }}</span>
                                            <input type="number" class="form-control input-item-price" placeholder="0"
                                                    min="{{ item.display_price|stringformat:"0.2f" }}"
                                                    name="price_{{ item.id }}"
                                                    step="any" value="{{ item.display_price|stringformat:"0.2f" }}">
                                        </div>
                                    {% else %}
                                        {{ event.currency }} {{ item.display_price|floatformat:2 }}
                                    {% endif %}
                                    {% if item.tax_rate and event.settings.display_net_prices %}
                                        <small>{% blocktrans trimmed with rate=item.tax_rate %}
                                            <strong>plus</strong> {{ rate }}% taxes
                                        {% endblocktrans %}</small>
                                    {% elif item.tax_rate %}
                                        <small>{% blocktrans trimmed with rate=item.tax_rate %}
                                            incl. {{ rate }}% taxes
                                        {% endblocktrans %}</small>
                                    {% endif %}
                                </div>
                                {% if item.require_voucher %}
                                    <div class="col-md-2 col-xs-6 availability-box unavailable">
                                        <small>
                                            {% trans "Enter a voucher code below to buy this ticket." %}
                                        </small>
                                    </div>
                                {% elif item.cached_availability.0 == 100 %}
                                    <div class="col-md-2 col-xs-6 availability-box available">
                                        {% if item.max_per_order == 1 %}
                                            <label class="item-checkbox-label">
                                                <input type="checkbox" value="1"
                                                        name="item_{{ item.id }}">
                                            </label>
                                        {% else %}
                                            <input type="number" class="form-control input-item-count" placeholder="0" min="0"
                                                    max="{{ item.order_max }}" name="item_{{ item.id }}">
                                        {% endif %}
                                    </div>
                                {% else %}
                                    {% include "pretixpresale/event/fragment_availability.html" with avail=item.cached_availability.0 event=event item=item var=0 %}
                                {% endif %}
                                <div class="clearfix"></div>
                            </div>
                        {% endif %}
                    {% endfor %}
                </section>
            {% endfor %}
            {% if event.presale_is_running and display_add_to_cart %}
                <section class="front-page">
                    <div class="row-fluid">
                        <div class="col-md-4 col-md-offset-8 col-xs-12">
                            <button class="btn btn-block btn-primary btn-lg" type="submit" id="btn-add-to-cart">
                                <i class="fa fa-shopping-cart"></i> {% trans "Add to cart" %}
                            </button>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </section>
            {% endif %}
        </form>
    {% endif %}
    {% if vouchers_exist %}
        <section class="front-page">
            <h3>{% trans "Redeem a voucher" %}</h3>
            <form method="get" action="{% eventurl event "presale:event.redeem" %}">
                <div class="row-voucher">
                    <div class="col-md-8 col-sm-6 col-xs-12">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-ticket fa-fw"></i></span>
                            <input type="text" class="form-control" name="voucher" id="voucher"
                                    placeholder="{% trans "Voucher code" %}">
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-6 col-xs-12">
                        <button class="btn btn-block btn-primary" type="submit">
                            {% trans "Redeem voucher" %}
                        </button>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </form>
        </section>
    {% endif %}
    {% eventsignal event "pretix.presale.signals.front_page_bottom" %}
    <section class="front-page">
        <h3>{% trans "If you already ordered a ticket" %}</h3>
        <div>
            <div class="col-md-8 col-xs-12">
                <p>
                    {% blocktrans trimmed %}
                        If you want to see or change the status and details of your order, click on the link in one of the
                        emails we sent you during the order process. If you cannot find the link, click on the
                        following button to request the link to your order to be sent to you again.
                    {% endblocktrans %}
                </p>
            </div>
            <div class="col-md-4 col-xs-12 text-right">
                <a class="btn btn-block btn-primary" href="{% eventurl event "presale:event.resend_link" %}">
                    {% trans "Resend order links" %}
                </a>
            </div>
            <div class="clearfix"></div>
        </div>
    </section>
{% endblock %}
