{% extends 'base.html' %}
{% load static %}

{% block title %}{{ project_name }} Dashboard{% endblock %}

{% block head %}
    <link rel="stylesheet" href="{% static 'css/custom.css' %}">
    <meta name="description" content="AutoTask AI-powered automation platform dashboard.">
{% endblock %}

{% block content %}
<div class="dashboard-container">
    <header class="text-center mb-4">
        <h1>{{ project_name }}</h1>
    </header>

    <main>
        <section class="wallet-card mb-5">
            <h2>Wallet Balance</h2>
            <div class="wallet-balance-btc">{{ wallet.balance_btc|floatformat:8 }} BTC</div>
            <div class="wallet-balance-usd">~ ${{ wallet.balance_usd|floatformat:2 }} USD</div>
        </section>

        <section class="transactions">
            <h2>Recent Transactions</h2>
            <div class="table-responsive">
                <table class="transaction-table">
                    <thead>
                        <tr>
                            <th>Description</th>
                            <th>Amount (BTC)</th>
                            <th>Timestamp</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for tx in transactions %}
                        <tr>
                            <td>{{ tx.description }}</td>
                            <td class="{% if tx.type == 'credit' %}text-credit{% else %}text-debit{% endif %}">
                                {% if tx.type == 'credit' %}+{% endif %}{{ tx.amount_btc|floatformat:8 }}
                            </td>
                            <td>{{ tx.timestamp }}</td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="3">No transactions yet.</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </section>
    </main>

</div>
{% endblock %}
