{% extends "base.html" %}
{# "Sign in or sign up": the beta emails say "sign up", and this is the
   page they land on. The first sign-in with an email creates the account
   (#876). #}
{% block title %}Sign in or sign up — CareAgents{% endblock %}
{% block bodyclass %}page-setup{% endblock %}
{% block content %}
<main class="setup-wrap">
  <div class="setup-card" id="auth-card"
       {%- if back %} data-back="{{ back }}"{% endif %}
       {%- if resume %} data-resume="1"{% endif %}>
    {# Plain words for what this page does. Someone already signed in
       is here to confirm it's them, not to sign in. #}
    <h1>{% if code_for_passkey or code_for_invite or code_for_connect %}Confirm it's you{% else %}Sign in or sign up{% endif %}</h1>
    {% if imessage_pending %}
    <p class="setup-sub" id="imessage-pending">
      Sign in to connect your phone to CareAgents.</p>
    {% endif %}
    {% if code_for_passkey %}
    <p class="setup-sub">To add a passkey, confirm it's you with a code we email.</p>
    {% elif code_for_invite %}
    <p class="setup-sub" id="invite-why">To get your invite link, confirm it's you with a code we email. Then you'll go back to Settings.</p>
    {% elif code_for_connect %}
    <p class="setup-sub" id="connect-why">To connect your own records, confirm it's you with a code we email. Then you'll go back to your hub.</p>
    {% elif resume %}
    {# A page tapped while signed out is kept (#1016). Never named: no
       page, agent or topic on a screen anyone at the browser can read. #}
    <p class="setup-sub" id="resume-why">To keep your health information safe, we check it's you first. Enter the code we email you and we'll take you back to the page you opened.</p>
    {% else %}
    {# The emailed code works for everyone; a passkey only for someone who
       made one (patient walk 2026-10-18), so the code leads. #}
    <p class="setup-sub">We'll email you an 8-digit code to sign in.</p>
    {% endif %}

    <div id="err" class="form-error" hidden></div>

    <!-- Step: passkey-first (skipped when an existing account is enrolling) -->
    <div id="step-start" {% if enroll %}hidden{% endif %}>
      <label class="field-label" for="email">Email</label>
      <input class="field" id="email" type="email" inputmode="email"
             autocomplete="email" placeholder="you@example.com" autofocus
             {%- if prefill %} value="{{ prefill }}"{% endif %}>
      <button class="btn-primary btn-block" id="email-btn">
        Email me a code</button>
      {# Not on the way to adding one: there is no passkey to use yet. #}
      {% if not code_for_passkey %}
      <div class="or">or</div>
      <button class="btn-secondary btn-block" id="passkey-btn">
        Sign in with a passkey</button>
      {% endif %}
      {% if not code_for_passkey %}
      <p class="auth-fine">New here? The same steps sign you up.</p>
      {% endif %}
      <p class="auth-fine">By continuing you agree to the
        <a href="{{ terms_url }}" target="_blank" rel="noopener">Terms</a> and
        <a href="{{ privacy_url }}" target="_blank" rel="noopener">Privacy
          policy</a>.</p>
    </div>

    <!-- Step: code -->
    <div id="step-code" hidden>
      <!-- The lede is set from JS. Three answers, not two: the code was sent
           (#262 cooldown means nothing was sent just now), or we never saw it
           leave and must not claim we did (#220). -->
      <p class="setup-sub"><span id="code-lede">We sent an 8-digit code to</span>
        <b id="code-email"></b>.</p>
      <p class="setup-sub" id="code-note" hidden></p>
      {# Under "We sent a code moments ago… check your inbox and spam
         folder", so that reads first; and the way on after "That code is
         wrong or expired.", in one tap (patient walk of #1016). #}
      <button class="linkish" id="resend-code" type="button" hidden>
        Send a new code</button>
      <label class="field-label" for="code">Code</label>
      <input class="field code-input" id="code" inputmode="numeric"
             maxlength="8" placeholder="••••••••" autocomplete="one-time-code">
      <button class="btn-primary btn-block" id="verify-btn">Continue</button>
      <button class="linkish" id="back-btn">← use a different email</button>
    </div>

    <!-- Step: add passkey — after first verify, or any time via ?enroll=1 -->
    <div id="step-passkey" {% if not enroll %}hidden{% endif %}>
      <span class="persona-emoji">🔐</span>
      <h2 style="font-size:22px;margin:8px 0">Add a passkey</h2>
      <p class="setup-sub">Set up Face ID / Touch ID so next time is one tap.</p>
      <button class="btn-primary btn-block" id="add-passkey-btn">
        Create passkey</button>
      <button class="linkish" id="skip-passkey-btn">
        {% if enroll %}Back to your hub →{% else %}Skip for now →{% endif %}</button>
    </div>
  </div>
</main>
<script src="{{ url_for('static', filename='auth.js') }}"></script>
{% endblock %}