{% extends "base.html" %}
{% block title %}Join the beta — CareAgents{% endblock %}
{% block bodyclass %}page-setup{% endblock %}
{# Beta onboarding brief section 1. Plain words, read on a phone: no
   "tenant", no "FHIR". The ref's value is never shown; that a ref came at
   all changes the opening line. #}
{% block content %}
{% include "_beta_banner.html" %}
<main class="setup-wrap">
  <div class="setup-card beta-page">
    <h1>Help us test CareAgents</h1>
    {% if invite %}
    {# A personal invite link (careagents/invites.py). The inviter's own
       first name if they gave one, and nothing else about them. #}
    <p class="beta-open">{% if invite.first_name %}{{ invite.first_name }} invited you{% else %}Someone you know invited you{% endif %}
      to try CareAgents. It is free during the beta.</p>
    {% elif ref %}
    <p class="beta-open">Someone you know sent you this link. CareAgents is
      free during the beta.</p>
    {% else %}
    <p class="beta-open">CareAgents is free during the beta.</p>
    {% endif %}
    <p>CareAgents is an assistant that reads health records and drafts
      paperwork, and you approve anything it sends. It is not a doctor, and
      it does not give medical advice.</p>
    {% if invite and invite.real %}
    <p id="beta-records-line">You start on made-up sample records. After
      that, you can connect your own. Trying it takes about 15 minutes.</p>
    {% else %}
    <p>During the beta you use made-up sample records, not your own. It takes
      about 15 minutes.</p>
    {% endif %}

    <ol class="beta-steps">
      <li id="beta-step-1"><b>Sign up with your email.</b></li>
      <li id="beta-step-2"><b>Tap Confirm in our email.</b> A chat on
        made-up sample records opens first. Ask it a question.</li>
      <li id="beta-step-3"><b>Try an approval.</b> Ask it to fill in an
        intake form, then check it and approve it.</li>
    </ol>
    {# The videos are files on GitHub, our code site: said before the tap,
       so the page that opens is not a surprise. #}
    <p><a href="{{ demo_url }}" target="_blank" rel="noopener">Watch the
      short demo videos on GitHub</a> to see each step first. It opens our
      code site in a new tab. Tap a video there to play it.</p>

    <h2 class="beta-form-title">Join the beta</h2>
    {# beta.js says what really happened to the email, and offers the
       other way in: "Get started" and a code, which needs no email from
       this form. #}
    <div id="beta-done" class="form-ok beta-done" hidden>
      <p id="beta-done-text" role="status"></p>
      <button class="btn-secondary btn-block" id="beta-again" type="button"
              hidden>Send the email again</button>
      <a class="btn-secondary btn-block" id="beta-get-started"
         href="/auth">Get started</a>
    </div>
    <form id="beta-form" novalidate>
      <label class="field-label" for="beta-first">First name</label>
      <input class="field" id="beta-first" name="first_name" maxlength="40"
             autocomplete="given-name" required>
      <label class="field-label" for="beta-email">Email</label>
      <input class="field" id="beta-email" name="email" type="email"
             inputmode="email" autocomplete="email" maxlength="254" required>
      <label class="field-label" for="beta-mobile">Mobile number (optional)</label>
      <input class="field" id="beta-mobile" name="mobile" type="tel"
             inputmode="tel" autocomplete="tel" maxlength="24"
             aria-describedby="beta-mobile-hint">
      <p class="field-hint" id="beta-mobile-hint">Add it only if you have an
        iPhone and want to text your assistant. Spots are limited. We'll
        email you when yours is ready. If you leave it blank, you can still
        do everything on the website.</p>
      {# A bot fills every field it finds; a person never sees this one. #}
      <div class="beta-pot" aria-hidden="true">
        <label for="beta-website">Leave this empty</label>
        <input id="beta-website" name="website" tabindex="-1" autocomplete="off">
      </div>
      <input type="hidden" name="ref" value="{{ ref }}">
      <input type="hidden" name="invite" value="{{ invite.code if invite else '' }}">
      <label class="beta-consent">
        <input type="checkbox" id="beta-consent" name="consent" required>
        <span>You can contact me about the beta.
          <b>Tick this box to join.</b></span>
      </label>
      {# Next to Send, so a phone shows the problem where the thumb is. #}
      <div id="beta-err" class="form-error beta-err" role="alert" hidden></div>
      <button class="btn-primary btn-block" type="submit">Send</button>
    </form>

    <p class="beta-fine">We keep your name, email and phone only to run the
      beta. Remove them any time from the link in our email, or delete your
      account in Settings. We delete your phone number once you're added to
      iMessage, or after {{ mobile_days }} days. If you don't make an
      account, we delete your request after {{ request_days }} days.</p>
    <p class="beta-fine">Questions?
      <a href="{{ feedback }}">Tell us</a>.</p>
  </div>
</main>
<script src="{{ url_for('static', filename='beta.js') }}"></script>
{% endblock %}