{% extends "base.html" %}
{% block head %}{% if on_hold %}<meta http-equiv="refresh" content="5;url={{ request.url }}" />{% endif %}{% endblock %}
{% block title %} - Vipps{% endblock %}
{% block body %}
    {% include 'bar.html' %}

    <form method="post">
        <div id="vipps">
            {% if not status %}
            <p>Tast inn mobilnummeret ditt for å synliggjøre hele litteraturlisten.</p>
            <script>ga('send', 'event', 'paywall', 'enter', '{{ bibliography_id }}');</script>
            {% elif status == statuses['unacknowledged'] %}
            <p>Vennligst vent til forespørselen din har blitt behandlet.</p>
            {% elif status == statuses['timeout'] %}
            <p>Vi brukte for lang tid. Det betyr at du får tilgang nå. Vipps-forespørsel kommer senere.</p>
            <script>ga('send', 'event', 'paywall', 'timeout', '{{ bibliography_id }}', {{ price }});</script>
            {% elif status == statuses['acknowledged'] %}
            <p>Betalingen din blir behandlet. Vi sender straks en Vipps-forespørsel.</p>
            {% elif status == statuses['responded'] %}
            <p>Du har mottatt en Vipps-forespørsel. Vennligst godta transaksjonen for å få tilgang.</p>
            {% elif status == statuses['paid'] %}
            <p>Vi har mottatt betalingen din. Du har nå tilgang til litteraturlisten!</p>
            <script>ga('send', 'event', 'paywall', 'paid', '{{ bibliography_id }}', {{ price }});</script>
            {% endif %}

            <div id="receipt">
                <img id="logo" src="vipps.png" />
                <span id="price">Kr <span id="amount">{{ price }},</span>00</span>
                <span id="product">Litteraturliste fra LittList</span>
                
                {% if status == statuses['paid'] or status == statuses['timeout'] %}
                <div class="checkmark-circle">
                    <div class="background"></div>
                    <div class="checkmark draw"></div>
                </div>
                {% endif %}
                
                {% if on_hold %}
                <span class="loading-spinner"></span>
                {% endif %}
            </div>

            {% if not status %}
            <input type="tel" name="phone_number" placeholder="Ditt mobilnummer" required />
            <button type="submit">Betal</button>
            {% endif %}
        </div>
    </form>

{% endblock %}