{% extends 'web/admin/base.html' %}

{% block admin_title %}Online customers{% endblock %}
{% block admin_subtitle %}Registered accounts (role: customer){% endblock %}

{% block admin_content %}
<div class="card border-0 shadow-sm rounded-4 overflow-hidden">
    <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
        <div>
            <h5 class="mb-0 fw-bold">Customer accounts</h5>
            <small class="text-muted">Newest first · showing up to 100</small>
        </div>
        <span class="badge bg-success">{{ online_customers_count }} total</span>
    </div>
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead class="table-light">
                <tr>
                    <th>#</th>
                    <th>Username</th>
                    <th>Email</th>
                    <th>Phone</th>
                    <th>Joined</th>
                </tr>
            </thead>
            <tbody>
                {% for u in online_customers %}
                <tr>
                    <td class="text-muted small">{{ u.id }}</td>
                    <td class="fw-medium">{{ u.username }}</td>
                    <td>{{ u.email }}</td>
                    <td>{{ u.phone or '—' }}</td>
                    <td class="small text-muted">{{ u.created_at.strftime('%d %b %Y') if u.created_at else '—' }}</td>
                </tr>
                {% else %}
                <tr><td colspan="5" class="text-center text-muted py-5">No customer accounts yet.</td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}