{% extends "base.html" %}
{% block content %}
<section class="page-head">
  <div>
    <p class="eyebrow">Garmin Connect</p>
    <h1>Authentication</h1>
  </div>
  <span class="state {{ 'ok' if configured else 'warn' }}">{{ "Configured" if configured else "Not configured" }}</span>
</section>

{% if error %}<p class="alert">{{ error }}</p>{% endif %}
{% if message %}<p class="notice">{{ message }}</p>{% endif %}

<section class="panel form-panel">
  <header><h2>Garmin Login</h2></header>
  <form method="post" action="/garmin/setup" class="grid-form">
    <label>Email <input name="email" type="email" autocomplete="email" required></label>
    <label>Password <input name="password" type="password" autocomplete="current-password" required></label>
    <button type="submit">Save and log in</button>
  </form>
</section>

{% if mfa_pending %}
<section class="panel form-panel">
  <header><h2>MFA Challenge</h2></header>
  <form method="post" action="/garmin/mfa" class="grid-form">
    <label>Code <input name="code" inputmode="numeric" autocomplete="one-time-code" required></label>
    <button type="submit">Submit MFA</button>
  </form>
</section>
{% endif %}
{% endblock %}