{% extends '_layout.html' %}
{% from 'components.html' import reading_rows %}
{% block title %}{{ view|title }} · BP Tracker{% endblock %}
{% block content %}
<div class="page-heading"><div><p class="eyebrow">YOUR DAILY PICTURE</p><h1>{{ view|title }}</h1><p class="muted">{{ 'A clearer view of your blood pressure.' if view == 'overview' else 'Every reading, in one place.' if view == 'history' else 'See how your readings change over time.' }}</p></div><a class="button primary add-action" href="{{ url_for('reading.add_reading') }}"><span aria-hidden="true">＋</span> Add reading</a></div>
{% if not calendar %}{% include 'partials/range_filter.html' %}{% endif %}
{% if view == 'overview' %}
<section class="summary-grid" aria-label="Summary">
    <article class="card latest-card"><div class="card-label"><h2>Latest reading</h2><span class="dot" aria-hidden="true"></span></div>
    {% if latest %}<p class="big-number">{{ latest.systolic }}<span class="slash"> / </span>{{ latest.diastolic }} <span class="unit">mmHg</span></p><p class="latest-meta">{{ latest.heart_rate }} bpm <span>·</span> {{ latest.local_timestamp.strftime('%d %b, %I:%M %p') }}</p><p class="card-foot">Most recent, across all dates</p>
    {% else %}<p class="empty-title">Your first reading starts here</p><p class="muted">Record your blood pressure and pulse to get started.</p>{% endif %}</article>
    <article class="card"><h2>Period average</h2>{% if stats.count %}<p class="big-number">{{ stats.systolic }}<span class="slash"> / </span>{{ stats.diastolic }}</p><p class="muted">mmHg · {{ stats.pulse }} bpm average pulse</p>{% else %}<p class="empty-title">No readings yet</p><p class="muted">Averages appear when you add a reading.</p>{% endif %}<p class="card-foot">{{ selected.start.strftime('%d %b') }} – {{ selected.end.strftime('%d %b %Y') }}</p></article>
    <article class="card count-card"><h2>Readings recorded</h2><p class="big-number">{{ stats.count }}</p><p class="muted">In the selected period</p><p class="card-foot">Times shown in {{ timezone_name }}</p></article>
</section>
{% endif %}
{% if view in ['overview', 'trends'] %}{% include 'partials/trend.html' %}{% endif %}
{% if view == 'history' %}
<div class="section-heading"><nav class="segmented" aria-label="History display"><a href="{{ url_for('main.dashboard', view='history', **selected.params) }}" {% if not calendar %}aria-current="page"{% endif %}>Readings</a><a href="{{ url_for('main.dashboard', view='history', mode='calendar') }}" {% if calendar %}aria-current="page"{% endif %}>Calendar</a></nav><span class="muted small">{{ stats.count }} readings · {{ timezone_name }}</span></div>
{% endif %}
{% if calendar %}
<section class="card calendar-card">
    <div class="section-heading"><h2>{{ selected.start.strftime('%d %b') }} – {{ selected.end.strftime('%d %b %Y') }}</h2><div class="actions"><a class="button" aria-label="Previous {{ calendar.unit }}" href="{{ url_for('main.dashboard', view='history', mode='calendar', unit=calendar.unit, anchor=calendar.prev) }}">←</a><a class="button" aria-label="Next {{ calendar.unit }}" href="{{ url_for('main.dashboard', view='history', mode='calendar', unit=calendar.unit, anchor=calendar.next) }}">→</a></div></div>
    <form class="calendar-controls" action="{{ url_for('main.dashboard') }}" method="get"><input type="hidden" name="view" value="history"><input type="hidden" name="mode" value="calendar"><div class="field"><label for="unit">Display</label><select name="unit" id="unit"><option value="month" {% if calendar.unit == 'month' %}selected{% endif %}>Month</option><option value="week" {% if calendar.unit == 'week' %}selected{% endif %}>Week</option></select></div><div class="field"><label for="anchor">Containing date</label><input id="anchor" type="date" name="anchor" value="{{ calendar.anchor }}" required></div><button class="button" type="submit">Go</button></form>
    <p class="muted small">Daily averages in mmHg. Select a day to see its readings.</p>
    <div class="calendar-grid" style="--start-day:{{ selected.start.weekday() + 1 }}">{% for day in calendar.days %}<a class="calendar-day {{ 'has-readings' if day.data else '' }}" href="{{ url_for('main.dashboard', view='history', start_date=day.date.isoformat(), end_date=day.date.isoformat()) }}"><span class="muted small">{{ day.date.strftime('%a') }}</span><strong>{{ day.date.day }}</strong>{% if day.data %}<span>{{ day.data.systolic }} / {{ day.data.diastolic }}</span><small>{{ day.data.count }} reading{{ 's' if day.data.count != 1 else '' }}</small>{% else %}<small>No readings</small>{% endif %}</a>{% endfor %}</div>
</section>
{% elif view in ['overview', 'history'] %}
<section class="card history-card"><div class="section-heading"><div><h2>{{ 'Recent readings' if view == 'overview' else 'Reading history' }}</h2><p class="muted small">Personal thresholds: {{ sys_threshold }}/{{ dia_threshold }} mmHg · <a href="{{ url_for('user.profile') }}">Adjust in Settings</a></p></div>{% if view == 'overview' %}<a class="text-link" href="{{ url_for('main.dashboard', view='history', **selected.params) }}">View all <span aria-hidden="true">→</span></a>{% endif %}</div>
{{ reading_rows(readings, sys_threshold, dia_threshold) }}
{% if pagination and pagination.pages > 1 %}<nav class="pagination" aria-label="History pages">{% if pagination.has_prev %}<a class="button" href="{{ url_for('main.dashboard', view='history', page=pagination.prev_num, **selected.params) }}">← Previous</a>{% endif %}<span>Page {{ pagination.page }} of {{ pagination.pages }}</span>{% if pagination.has_next %}<a class="button" href="{{ url_for('main.dashboard', view='history', page=pagination.next_num, **selected.params) }}">Next →</a>{% endif %}</nav>{% endif %}
</section>
{% endif %}
<div class="report-links"><span class="muted small">Keep a copy of this period</span><a href="{{ url_for('data.export_data', **selected.params) }}" download>Download CSV</a><a href="{{ url_for('main.report', **selected.params) }}">Printable summary ↗</a></div>
{% endblock %}