{% extends "base.html" %}

{% block title %}{{ user.name }} - MyWhoosh Garmin Sync{% endblock %}

{% block content %}
<h1>{{ user.name }}</h1>
<div class="page-actions">
    <a class="btn secondary" href="/users/{{ user.id }}/edit">Edit</a>
    <a class="btn secondary" href="/">Back to dashboard</a>
</div>

<div class="card">
    <dl class="info-grid">
        <dt>Status</dt>
        <dd><span class="badge badge-{{ user.health_state.value }}">{{ user.health_state.value.replace("_", " ") }}</span></dd>

        <dt>Enabled</dt>
        <dd>{{ "Yes" if user.enabled else "No" }}</dd>

        <dt>MyWhoosh state</dt>
        <dd>{{ user.mywhoosh_state }}</dd>

        <dt>Garmin state</dt>
        <dd>{{ user.garmin_state }}</dd>

        <dt>Action reason</dt>
        <dd>{{ user.action_reason or "-" }}</dd>

        <dt>Created at</dt>
        <dd>{{ user.created_at }}</dd>

        <dt>Updated at</dt>
        <dd>{{ user.updated_at }}</dd>
    </dl>
</div>

{% if user.action_reason == "garmin_mfa_required" %}
<h2>Garmin MFA required</h2>
<div class="card">
    {% include "fragments/mfa_form.html" %}
</div>
{% elif user.action_reason == "mywhoosh_device_conflict" %}
<h2>MyWhoosh device conflict</h2>
<div class="card">
    <p>MyWhoosh reports this account is already logged in on another device. Log out of MyWhoosh there (app or website), then retry the sync.</p>
</div>
{% endif %}

<h2>Recent sync runs</h2>
<div class="card">
    {% if recent_runs %}
    <table>
        <thead>
            <tr>
                <th>Started</th>
                <th>Finished</th>
                <th>Status</th>
                <th>Discovered</th>
                <th>Imported</th>
                <th>Skipped</th>
                <th>Failed</th>
            </tr>
        </thead>
        <tbody>
            {% for run in recent_runs %}
            <tr>
                <td>{{ run.started_at }}</td>
                <td>{{ run.finished_at or "-" }}</td>
                <td><span class="badge badge-{{ run.status.value }}">{{ run.status.value }}</span></td>
                <td>{{ run.discovered_count }}</td>
                <td>{{ run.imported_count }}</td>
                <td>{{ run.skipped_count }}</td>
                <td>{{ run.failed_count }}</td>
            </tr>
            {% if run.summary_error %}
            <tr>
                <td colspan="7" class="summary-error">{{ run.summary_error }}</td>
            </tr>
            {% endif %}
            {% endfor %}
        </tbody>
    </table>
    {% else %}
    <p class="empty-state">No sync runs yet.</p>
    {% endif %}
</div>

<h2>Activities</h2>
<div class="card">
    <ul class="user-list">
        {% for activity in activities %}
        <li>
            {{ activity.activity_name }} &mdash; {{ activity.status.value }}
            {% if activity.status.value == "failed" and activity.retryable %}
            <form method="post" action="/activities/{{ activity.id }}/retry" class="inline-form">
                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                <button type="submit" class="secondary">Retry</button>
            </form>
            {% endif %}
        </li>
        {% else %}
        <li class="empty-state">No pending activities.</li>
        {% endfor %}
    </ul>
</div>
{% endblock %}