{% extends "base.html" %}
{% block content %}

<h1>Dashboard</h1>
<p class="page-subtitle">Overview of today's activity, current sessions, and system health.</p>

<!-- Top stats: 2 columns mobile (forced via .stat-grid default), 4 columns desktop -->
<div class="stat-grid">
    <div class="stat-card good">
        <div class="label">Sales Today</div>
        <div class="value">₱{{ data.sales_today_pesos }}</div>
        <div class="hint">{{ data.sales_today_count }} voucher{{ '' if data.sales_today_count == 1 else 's' }}</div>
    </div>
    <div class="stat-card accent">
        <div class="label">Lifetime</div>
        <div class="value">₱{{ data.sales_lifetime_pesos }}</div>
        <div class="hint">{{ data.sales_lifetime_count }} voucher{{ '' if data.sales_lifetime_count == 1 else 's' }} total</div>
    </div>
    <div class="stat-card">
        <div class="label">Active</div>
        <div class="value">{{ data.active_sessions }}</div>
        <div class="hint">{{ data.paused_sessions }} paused</div>
    </div>
    <div class="stat-card">
        <div class="label">Uptime</div>
        <div class="value">{{ data.system.uptime }}</div>
        <div class="hint">since last boot</div>
    </div>
</div>

<section>
    <h2>System Health</h2>
    <!-- Memory + Disk: stack to 1 column on mobile (more room for progress bars and text) -->
    <div class="stat-grid stat-grid--stack">
        <div class="stat-card">
            <div class="label">Memory</div>
            <div class="value">{{ data.system.mem_used_pct }}%</div>
            <div class="hint">{{ data.system.mem_available }} free of {{ data.system.mem_total }}</div>
            <div class="progress"><div class="progress-fill" style="width: {{ data.system.mem_used_pct }}%"></div></div>
        </div>
        <div class="stat-card">
            <div class="label">Disk</div>
            <div class="value">{{ data.system.disk_used_pct }}%</div>
            <div class="hint">{{ data.system.disk_free }} free of {{ data.system.disk_total }}</div>
            <div class="progress"><div class="progress-fill" style="width: {{ data.system.disk_used_pct }}%"></div></div>
        </div>
    </div>
</section>

<section>
    <div class="section-head">
        <h2>Recent Vouchers</h2>
        <a href="/vouchers" class="section-link">View all →</a>
    </div>
    {% if data.recent %}
        <div class="table-scroll">
            <table>
                <thead>
                    <tr>
                        <th>Code</th>
                        <th>Status</th>
                        <th>Time</th>
                        <th>Paid</th>
                        <th class="col-hide-mobile">MAC</th>
                        <th class="col-hide-mobile">Created</th>
                    </tr>
                </thead>
                <tbody>
                    {% for v in data.recent %}
                        <tr>
                            <td><code>{{ v.code }}</code></td>
                            <td><span class="badge badge-{{ v.status }}">{{ v.status }}</span></td>
                            <td>{{ v.minutes_total | duration }}</td>
                            <td>₱{{ v.paid_pesos }}</td>
                            <td class="col-hide-mobile">{% if v.mac %}<span class="code">{{ v.mac }}</span>{% else %}<span style="color: var(--muted-2);">—</span>{% endif %}</td>
                            <td class="col-hide-mobile">{{ v.created }}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% else %}
        <div class="empty-state">
            <strong>No vouchers yet.</strong><br>
            Drop a coin into the slot to generate the first one.
        </div>
    {% endif %}
</section>

{% endblock %}