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

{% block title_text %}Dashboard{% endblock title_text %}
{% block header_text %}<span>Dash</span>board{% endblock header_text %}

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

        <section class="wallet-balances">
            <div><i class="fa-solid fa-ticket"></i>: <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">
                    <i class="fa-solid fa-clover"></i>
                    <div class="token-tooltip">
                        <h4>{{ coin.tooltip_name }}</h4>
                        <p>{{ coin.tooltip_description }}</p>
                        {% if coin.tooltip_shoptalk %}
                            <small><em>{{ coin.tooltip_shoptalk }}</em></small>
                        {% endif %}
                        <p class="expiry">{{ coin.tooltip_expiry }}</p>
                    </div>
                </div>
            {% endif %}
            {% for token in free_tokens %}
                <div id="id_free_token_{{ forloop.counter0 }}" class="token">
                    <i class="fa-solid fa-coins"></i>
                    <div class="token-tooltip">
                        <h4>{{ token.tooltip_name }}</h4>
                        <p>{{ token.tooltip_description }}</p>
                        {% if token.tooltip_shoptalk %}
                            <small><em>{{ token.tooltip_shoptalk }}</em></small>
                        {% endif %}
                        <p class="expiry">{{ token.tooltip_expiry }}</p>
                    </div>
                </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><i class="fa-solid fa-piggy-bank"></i> 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 %}