{% extends "core/base.html" %}
{% load static %}

{% block content %}
    <div class="wallet-page">
        <h1>Wallet</h1>

        <section class="wallet-balances">
            <div>Writs: <span id="id_writs_balance">{{ wallet.writs }}</span></div>
            <div>Esteem: <span id="id_esteem_balance">{{ wallet.esteem }}</span></div>
        </section>

        <section class="wallet-tokens">
            {% if coin %}
                <div id="id_coin_on_a_string" class="token">
                    <span class="token-tooltip">{{ coin.tooltip_text }}</span>
                </div>
            {% endif %}
            {% for token in free_tokens %}
                <div id="id_free_token_{{ forloop.counter0 }}" class="token">
                    <span class="token-tooltip">{{ token.tooltip_text }}</span>
                </div>
            {% endfor %}
        </section>

        <section id="id_payment_methods">
            <h2>Payment Methods</h2>

            <button id="id_add_payment_method">Add Payment Method</button>
            <div id="id_stripe_payment_element"></div>
            <button id="id_save_payment_method" hidden>Save Card</button>
        </section>

        <section id="id_tithe_token_shop">
            <h2>Tithe Tokens</h2>

            <div class="token-bundle">
                <span>Tithe Token ×1</span>
                <span>+ Writ bonus</span>
            </div>
        </section>
    </div>
    <script src="https://js.stripe.com/v3/"></script>
    <script src="{% static "apps/scripts/wallet.js" %}"></script>
{% endblock content %}