{% extends "base.html" %}

{% block title %}Dashboard - MyWhoosh Garmin Sync{% endblock %}

{% block content %}
<h1>Dashboard</h1>

<div class="stat-tiles">
    <div class="stat-tile">
        <span class="stat-tile-label">Riders</span>
        <span class="stat-tile-value">{{ summary.rider_total }}</span>
        <span class="stat-tile-sub">{{ summary.rider_enabled }} enabled</span>
    </div>
    <div class="stat-tile">
        <span class="stat-tile-label">Imported &middot; 7d</span>
        <span class="stat-tile-value">{{ summary.imported_recent }}</span>
    </div>
    <div class="stat-tile">
        <span class="stat-tile-label">Success rate &middot; 7d</span>
        <span class="stat-tile-value">{% if summary.success_rate_recent is not none %}{{ "%.0f"|format(summary.success_rate_recent) }}%{% else %}&ndash;{% endif %}</span>
    </div>
    <div class="stat-tile">
        <span class="stat-tile-label">Action required</span>
        <span class="stat-tile-value">{{ summary.action_required_count }}</span>
    </div>
</div>

<div class="page-actions">
    <a class="btn secondary" href="/users/new">Add user</a>
    <form method="post" action="/sync-all" class="inline-form">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
        <button type="submit">Sync all now</button>
    </form>
</div>

<ul class="user-list">
    {% for row in rows %}
    <li class="card user-card">
        <div class="user-main">
            <a class="user-name" href="/users/{{ row.id }}">{{ row.name }}</a>
            <div class="user-meta">
                <span class="badge badge-{{ row.health_state }}">{{ row.health_state.replace("_", " ") }}</span>
                <span>{{ "enabled" if row.enabled else "disabled" }}</span>
                <span>last sync: {{ row.last_sync_at or "-" }}</span>
                <span>last activity: {{ row.last_activity_name or "-" }} ({{ row.last_activity_status or "-" }})</span>
            </div>
            {% if row.action_reason == "garmin_mfa_required" %}
            <span class="action-required">Garmin MFA required &mdash; <a href="/users/{{ row.id }}">resolve</a></span>
            {% elif row.action_reason == "mywhoosh_device_conflict" %}
            <span class="action-required">MyWhoosh account logged in on another device &mdash; log out there, then <a href="/users/{{ row.id }}">retry</a></span>
            {% endif %}
        </div>
        <div class="user-actions">
            <form method="post" action="/users/{{ row.id }}/sync" class="inline-form">
                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                <button type="submit" class="secondary">Sync now</button>
            </form>
        </div>
    </li>
    {% else %}
    <li class="card empty-state">No users yet.</li>
    {% endfor %}
</ul>
{% endblock %}