{% load i18n %}
{% load l10n %}
{% load commadecimal %}
{% load static %}
{% load dotdecimal %}
{% load ibanformat %}
{% load money %}
{% load unidecode %}
{% load rich_text %}
{% load eventurl %}

{% if pending_description %}
    {{ pending_description|rich_text }}
{% endif %}
<p>{% blocktrans trimmed %}
    Please transfer the full amount to the following bank account:
{% endblocktrans %}</p>

<div class="row">
    <div class="{% if settings.bank_details_type == "sepa" %}col-md-6{% else %}col-md-12{% endif %} col-xs-12">
            {% if settings.bank_details_type == "sepa" %}
                <dl class="dl-horizontal">
                    <dt>{% trans "Account holder" %}:</dt><dd>{{ settings.bank_details_sepa_name }}</dt>
                    <dt>{% trans "IBAN" %}:</dt><dd>{{ settings.bank_details_sepa_iban|ibanformat }}</dt>
                    <dt>{% trans "BIC" %}:</dt><dd>{{ settings.bank_details_sepa_bic }}</dt>
                    <dt>{% trans "Bank" %}:</dt><dd>{{ settings.bank_details_sepa_bank }}</dt>
                {% if details %}
                </dl>
                {% endif %}
            {% endif %}
            {% if details %}
                {{ details|linebreaks }}
                <dl class="dl-horizontal">
            {% endif %}
            {% if not settings.bank_details_type == "sepa" and not details %}
                <dl class="dl-horizontal">
            {% endif %}
            <dt>{% trans "Amount:" %}</dt><dd>{{ amount|money:event.currency }}</dd>
            <dt>{% trans "Reference code (important):" %}</dt><dd><b>{{ code }}</b></dd>
        </dl>
        <p class="text-muted">
            {% trans "There is no further action required on this website." %}
            {% trans "We will send you an email as soon as we received your payment." %}
        </p>
    </div>
    {% if settings.bank_details_type == "sepa" and any_barcodes %}
        <div class="col-md-6 col-sm-6 hidden-xs text-center js-only blank-after">
            <ul class="nav nav-tabs" id="banktransfer_qrcodes_tabs" role="tablist">
                {% if swiss_qrbill %}
                    <li class="active"><a href="#banktransfer_qrcodes_qrbill" role="tab" id="banktransfer_qrcodes_qrbill_tab" data-toggle="tab" aria-controls="banktransfer_qrcodes_qrbill" aria-expanded="true">QR-bill</a></li>
                {% endif %}
                {% if eu_barcodes %}
                    <li {% if not swiss_qrbill %}class="active"{% endif %}><a href="#banktransfer_qrcodes_girocode" role="tab" id="banktransfer_qrcodes_girocode_tab" data-toggle="tab" aria-controls="banktransfer_qrcodes_girocode" aria-expanded="{% if swiss_qrbill %}false{% else %}true{% endif %}">EPC-QR</a></li>
                    <li class=""><a href="#banktransfer_qrcodes_bezahlcode" role="tab" id="banktransfer_qrcodes_bezahlcode_tab" data-toggle="tab" aria-controls="banktransfer_qrcodes_bezahlcode" aria-expanded="false">BezahlCode</a></li>
                {% endif %}
            </ul>
            <div class="tab-content" id="banktransfer_qrcodes_tabs_content">
                {% if swiss_qrbill %}
                    <div id="banktransfer_qrcodes_qrbill" class="tab-pane fade active in" role="tabpanel" aria-labelledby="banktransfer_qrcodes_qrbill_tab">
                        <p class="small">
                            {% trans "Scan the qr-code with your banking app" %}
                        </p>
                        <p class="banktransfer-swiss-cross-overlay">
                            <svg class="banktransfer-swiss-cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.8 19.8"><path stroke="#fff" stroke-width="1.436" d="M.7.7h18.4v18.4H.7z"/><path fill="#fff" d="M8.3 4h3.3v11H8.3z"/><path fill="#fff" d="M4.4 7.9h11v3.3h-11z"/></svg>
                            <script type="text/plain" data-size="150" data-replace-with-qr data-desc="{% trans 'Scan this image with your banking app’s QR-Reader to start the payment process.' %}">{{swiss_qrbill}}</script>
                        </p>
                    </div>
                {% endif %}
                {% if eu_barcodes %}
                    <div id="banktransfer_qrcodes_girocode" class="tab-pane fade {% if not swiss_qrbill %}active in{% endif %}" role="tabpanel" aria-labelledby="banktransfer_qrcodes_girocode_tab">
                        <p class="small">
                            {% trans "Scan the qr-code with your banking app" %}
                        </p>
                        <p>
                            <script type="text/plain" data-size="150" data-replace-with-qr data-desc="{% trans 'Scan this image with your banking app’s QR-Reader to start the payment process.' %}">BCD
002
2
SCT
{{ settings.bank_details_sepa_bic }}
{{ settings.bank_details_sepa_name|unidecode }}
{{ settings.bank_details_sepa_iban }}
{{ event.currency }}{{ amount|dotdecimal }}


{{ code }}

</script>
                        </p>
                    </div>
                    <div id="banktransfer_qrcodes_bezahlcode" class="tab-pane fade" role="tabpanel" aria-labelledby="banktransfer_qrcodes_bezahlcode_tab">
                        <p class="small">
                            {% trans "Scan the qr-code with your banking app" %}
                        </p>
                        <p>
                            <a aria-label="{% trans "Open BezahlCode in your banking app to start the payment process." %}" href="bank://singlepaymentsepa?name={{ settings.bank_details_sepa_name|urlencode }}&iban={{ settings.bank_details_sepa_iban }}&bic={{ settings.bank_details_sepa_bic }}&amount={{ amount|commadecimal }}&reason={{ code }}&currency={{ event.currency }}">
                                <script type="text/plain" data-size="150" data-replace-with-qr data-desc="{% trans 'Scan this image with your banking app’s QR-Reader to start the payment process.' %}">bank://singlepaymentsepa?name={{ settings.bank_details_sepa_name|urlencode }}&iban={{ settings.bank_details_sepa_iban }}&bic={{ settings.bank_details_sepa_bic }}&amount={{ amount|commadecimal }}&reason={{ code }}&currency={{ event.currency }}</script>
                            </a>
                        </p>
                    </div>
                {% endif %}
            </div>
        </div>
    {% endif %}
</div>
{% if swiss_qrbill %}
<link rel="stylesheet" href="{% static "pretixplugins/banktransfer/swisscross.css" %}">
{% endif %}

{% if invoice_email_enabled and has_invoices %}
    {% if payment_info.send_invoice_to %}
        <p>
            {% blocktrans trimmed with recipient=payment_info.send_invoice_to %}
                At your request, we sent the invoice directly to {{ recipient }}.
            {% endblocktrans %}
            <a data-toggle="collapse" data-target="#payment_banktransfer_send_invoice_to" class="btn btn-default btn-xs">
                <span class="fa fa-envelope-o"></span>
                {% trans "Send again or somewhere else" %}
            </a>
        </p>
    {% endif %}
    <form id="payment_banktransfer_send_invoice_to" method="post"
          action="{% eventurl event "plugins:banktransfer:mail_invoice" order=order.code secret=order.secret %}"
          {% if payment_info.send_invoice_to %}class="collapse"{% endif %}>
        {% csrf_token %}
        <p>
            {% blocktrans trimmed %}
                To send the invoice directly to your accounting department, please enter their email address:
            {% endblocktrans %}
        </p>
        <div class="row">
            <div class="col-md-9 col-xs-12">
                <label for="mail_invoice_email" class="sr-only">{% trans "Invoice recipient email" %}:</label>
                <input type="email" name="email" id="mail_invoice_email" class="form-control" value="" required
                    placeholder="{% trans "Email address" %}" />
            </div>
            <div class="col-md-3 col-xs-12">
                <button class="btn btn-default btn-block">
                    <span class="fa fa-envelope-o" aria-hidden="true"></span>
                    {% trans "Send invoice via email" %}
                </button>
            </div>
        </div>
    </form>
    <hr>
{% endif %}