{% extends 'base.html' %}
{% block title %}{{ 'Welcome' if mode == 'setup' else 'Sign in' if mode == 'login' else 'Join' }} · Stride{% endblock %}
{% block breadcrumb %}{{ 'WELCOME' if mode == 'setup' else 'ACCOUNT' }}{% endblock %}
{% block content %}
<div class="auth-layout">
  <section class="auth-intro"><span class="eyebrow">MADE FOR THE LONG RUN</span><h1>Run. Record.<br><em>Repeat.</em></h1><p>Every route. Every split. Your progress.<br>A home for all the miles you put in.</p><ul class="landing-features"><li>{{ icon('route') }} Replay your routes</li><li>{{ icon('overview') }} See your progress</li><li>{{ icon('friends') }} Share your runs</li></ul><div class="auth-art landing-map">{{ running_map() }}</div></section>
  <section class="panel auth-card">
    <span class="eyebrow">{{ 'FIRST STEPS' if mode == 'setup' else 'WELCOME BACK' if mode == 'login' else 'FIND YOUR STRIDE' }}</span>
    <h2>{{ 'Make yourself at home.' if mode == 'setup' else 'Good to see you.' if mode == 'login' else 'Create your account.' }}</h2>
    <p class="muted">{% if mode == 'setup' %}Create your Stride account. Your {{ import_count }} downloaded activities will be imported privately.{% elif mode == 'login' %}Sign in to your running dashboard.{% else %}Track your progress and share your runs with friends.{% endif %}</p>
    {% if error %}<p role="alert" class="form-error">{{ error }}</p>{% endif %}
    <form method="post" class="stack">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      {% if mode != 'login' %}
      <label>Your name<input name="display_name" required maxlength="80" autocomplete="name" placeholder="How should we call you?" value="{{ request.form.get('display_name','') }}"></label>

      {% endif %}
      <label>Email address<input type="email" name="email" required maxlength="254" autocomplete="email" placeholder="you@example.com" value="{{ request.form.get('email','') }}"></label>
      <label>Password<input type="password" name="password" required minlength="{{ 1 if mode == 'login' else 12 }}" maxlength="128" autocomplete="{{ 'current-password' if mode == 'login' else 'new-password' }}" placeholder="{{ 'Your password' if mode == 'login' else 'At least 12 characters' }}"></label>
      <button class="button primary full">{{ 'Sign in' if mode == 'login' else 'Create account' }} {{ icon('arrow') }}</button>
    </form>
    <p class="auth-foot">{% if mode == 'login' %}New here? <a href="{{ url_for('web.register') }}">Create an account</a>{% else %}Already have an account? <a href="{{ url_for('web.login') }}">Sign in</a>{% endif %}</p>
    {% if mode != 'login' %}<small class="muted">This is your Stride password, separate from your Garmin account.</small>{% endif %}
  </section>
</div>
{% endblock %}