{% extends "base.html" %}
{% block content %}
    <section class="grid-2">
        <article class="panel">
            <h2>Bank</h2>
            <p class="muted">Wallet money is exposed to mugging. Bank money is protected.</p>
            <div class="cards">
                <div class="card">
                    <h3>${{ current_user.wallet_money }}</h3>
                    <p class="muted">Wallet</p>
                </div>
                <div class="card">
                    <h3>${{ current_user.bank_money }}</h3>
                    <p class="muted">Bank</p>
                </div>
            </div>
        </article>
        <article class="panel">
            <h2>Transfer Cash</h2>
            <div class="grid-2">
                <form method="post" class="stack">
                    <input type="hidden" name="action" value="deposit">
                    <label>
                        Deposit amount
                        <input type="number" name="amount" min="1" required>
                    </label>
                    <button type="submit" class="primary">Deposit</button>
                </form>
                <form method="post" class="stack">
                    <input type="hidden" name="action" value="withdraw">
                    <label>
                        Withdraw amount
                        <input type="number" name="amount" min="1" required>
                    </label>
                    <button type="submit" class="subtle">Withdraw</button>
                </form>
            </div>
        </article>
    </section>

    <section class="panel">
        <h2>Bank Log</h2>
        {% if bank_logs %}
            <ul class="log-list">
                {% for log in bank_logs %}
                    <li>
                        <strong>{{ log.action|capitalize }} ${{ log.amount }}</strong>
                        <p class="muted mini">{{ format_ts(log.created_at) }}</p>
                    </li>
                {% endfor %}
            </ul>
        {% else %}
            <p class="muted">No bank activity yet.</p>
        {% endif %}
    </section>
{% endblock %}