{% extends "base.html" %}{% set active="dashboard" %}{% block title %}My Dashboard{% endblock %}{% block page_title %}My Dashboard{% endblock %}
{% block content %}
<div class="stats-grid">
    <div class="stat-card accent"><div class="stat-label">Today's Patients</div><div class="stat-value">{{ stats.today }}</div><div class="stat-icon">📅</div></div>
    <div class="stat-card success"><div class="stat-label">My Patients</div><div class="stat-value">{{ stats.patients }}</div><div class="stat-icon">👤</div></div>
    <div class="stat-card"><div class="stat-label">Upcoming</div><div class="stat-value">{{ stats.pending }}</div><div class="stat-icon">🗓</div></div>
</div>
<div class="grid-2">
    <div class="card">
        <div class="card-header"><span class="card-title">Next 7 Days</span><a href="{{ url_for('view_appointments') }}" class="btn btn-ghost btn-sm">All →</a></div>
        {% if upcoming %}
        <div class="table-wrap"><table>
            <thead><tr><th>Date/Time</th><th>Patient</th><th>Service</th><th>Reason</th></tr></thead>
            <tbody>{% for a in upcoming %}<tr>
                <td><strong>{{ a.appointment_datetime[:10] }}</strong><span class="text-muted"> {{ a.appointment_datetime[11:16] }}</span></td>
                <td>{{ a.patient_name }}</td><td>{{ a.service_name or '—' }}</td><td class="text-muted">{{ a.reason or '—' }}</td>
            </tr>{% endfor %}</tbody>
        </table></div>
        {% else %}<div class="empty-state"><div class="empty-icon">✅</div><p>No upcoming appointments.</p></div>{% endif %}
    </div>
    <div class="card">
        <div class="card-header"><span class="card-title">Recent Completed</span></div>
        {% if recent %}
        <div class="table-wrap"><table>
            <thead><tr><th>Date</th><th>Patient</th><th>Diagnosis</th></tr></thead>
            <tbody>{% for r in recent %}<tr>
                <td>{{ r.appointment_datetime[:10] }}</td><td>{{ r.patient_name }}</td><td class="text-muted">{{ r.diagnosis or 'No summary' }}</td>
            </tr>{% endfor %}</tbody>
        </table></div>
        {% else %}<div class="empty-state"><div class="empty-icon">📋</div><p>No completed visits yet.</p></div>{% endif %}
    </div>
</div>
{% endblock %}