{% extends "base.html" %}
{% block title %}CareAgents settings{% endblock %}
{% block bodyclass %}page-home{% endblock %}
{% block content %}
<main class="hub">
  <div class="hub-head">
    <div>
      <h1>Settings</h1>
      <p class="hub-sub hub-email" title="{{ me.email }}">{{ me.email }}</p>
    </div>
    <a class="pill" href="/home">Back to your hub</a>
  </div>

  <section class="hub-section" id="passkeys-section">
    <div class="section-head"><h2>Passkeys</h2></div>
    {% if passkeys %}
    <ul class="settings-list">
      {% for p in passkeys %}<li>{{ p.name }}</li>{% endfor %}
    </ul>
    {% else %}
    <p class="empty">No passkey yet. Add one to sign in with your face or
      fingerprint.</p>
    {% endif %}
    <a class="pill" href="/auth?enroll=1">Add a passkey</a>
  </section>

  {# One personal invite link per account (careagents/invites.py). The
     link is the whole of what is shared; invite.js copies or shares it. #}
  {% if invite %}
  <section class="hub-section" id="invite-section">
    <div class="section-head"><h2>Invite friends and family</h2></div>
    <div class="invite-row">
      <div class="invite-row-head">
        <b>Your link</b>
        <span class="invite-used">{% if invite.revoked %}turned off{% else %}{{ invite.used }} of {{ invite.cap }} used{% endif %}</span>
      </div>
      {% if not invite.revoked %}
      <code class="invite-url" id="invite-url">{{ invite.url }}</code>
      {% endif %}
    </div>
    {% if invite.revoked %}
    <p class="card-note">This link no longer lets anyone join.</p>
    {% elif invite.used >= invite.cap %}
    <p class="card-note">All {{ invite.cap }} places on your link are used.</p>
    {% else %}
    <p class="card-note">Up to {{ invite.cap }} people can join with it.
      They start on made-up records.</p>
    <div class="invite-actions">
      <button type="button" class="pill" id="invite-share" hidden>Share</button>
      <button type="button" class="pill" id="invite-copy">Copy link</button>
    </div>
    {% endif %}
    <p class="inline-msg" id="invite-msg" role="status" aria-live="polite" hidden></p>
  </section>
  {% elif link_session %}
  {# Opened by the confirm link: the link is made only after a full sign-in
     (#928 F6), so say how to get it rather than leave the section out. #}
  <section class="hub-section" id="invite-section">
    <div class="section-head"><h2>Invite friends and family</h2></div>
    <p class="card-note">You opened CareAgents from the link in our email.
      Before we make your invite link, we email you a code to check it's
      you. Then we bring you back here.</p>
    <a class="btn-primary btn-block" id="invite-signin"
       href="/auth?invite=1">Email me a code for my invite link</a>
  </section>
  {% endif %}

  <section class="hub-section" id="reach">
    <div class="section-head"><h2>Where you can reach your assistant</h2></div>
    <div class="surface-row">
      <div class="surface on"><b>Web</b><span>always on</span></div>
      {# Not serviced in the beta (#536, D6): no webhook, no poller. No id, so
         home.js has nothing to bind. The tile is a label, not a control. #}
      <div class="surface soon"><b>Telegram</b><span>coming soon</span></div>
      {% if imessage_connected %}
      {# One tile per connected phone, masked: enough for the owner to
         recognise, not the whole handle. Disconnect removes that one. #}
      {% for phone in imessage_connected %}
      <div class="surface on im-connected"><b>iMessage</b>
        <span class="im-state">Connected: {{ phone.label }}</span>
        <button type="button" class="pill im-disconnect"
                data-surface="{{ phone.id }}"
                aria-label="Disconnect {{ phone.label }}">Disconnect</button></div>
      {% endfor %}
      {% elif imessage_handle %}
      <div class="surface" id="im-surface" data-agent="{{ first_agent }}"><b>iMessage</b>
        <span id="im-state">connect →</span></div>
      {% else %}
      <div class="surface soon"><b>iMessage</b><span>coming soon</span></div>
      {% endif %}
      {# Not an app store app: the web app added to the home screen. #}
      <details class="surface phone-app"><summary><b>Phone app</b>
        <span>add to your home screen</span></summary>
        <p>iPhone: open this page in Safari, tap the Share button, then
          tap "Add to Home Screen".</p>
        <p>Android: open this page in Chrome, tap the menu (three dots),
          then tap "Add to Home screen".</p>
      </details>
    </div>
    <p class="inline-msg" id="surfaces-msg" role="status" aria-live="polite"
       hidden></p>
  </section>

  <section class="hub-section" id="grants-section">
    <div class="section-head"><h2>Apps you have shared records with</h2></div>
    {% if grants %}
    <div class="card-grid" id="grants">
      {% for g in grants %}
      <div class="hub-card grant-card" data-grant="{{ g.id }}">
        {#- Named by where its codes go, as on the consent page: the name is
            the app's own choice. Labels are escaped; <wbr> after each dot. -#}
        <div class="hub-card-name grant-host">{% if g.redirect_host %}{% for label in g.redirect_host.split('.') %}{{ label }}{% if not loop.last %}.<wbr>{% endif %}{% endfor %}{% else %}{{ g.client_name }}{% endif %}</div>
        {% if g.redirect_host %}<div class="hub-card-sub">calls itself &ldquo;{{ g.client_name }}&rdquo;</div>{% endif %}
        <div class="hub-card-sub">reads {{ g.tenant_label or 'one connection' }} through HealthClaw</div>
        <span class="status status-{{ g.status }}">{{ g.status }}</span>
        {% if g.status != 'revoked' %}
        <button type="button" class="grant-revoke" data-grant="{{ g.id }}"
                title="Stop this app reading your records">Revoke</button>
        {% endif %}
        <span class="grant-msg" role="status" aria-live="polite" hidden></span>
      </div>
      {% endfor %}
    </div>
    {% else %}
    <p class="empty">You haven't shared your records with any app.</p>
    {% endif %}
  </section>

  {# Tone and routines, one form per assistant (one assistant per person
     spec, section 7). "Focuses on", not "Watching": nothing runs unprompted
     (owner decision D3). assistant_settings.js posts each form. #}
  {% if assistants %}
  <section class="hub-section" id="assistant-settings">
    {% set several = assistants | length > 1 %}
    {# Plural over several, as for someone you care for (FHI-45). #}
    <div class="section-head"><h2>{{ "Your assistants" if several else "Your assistant" }}</h2></div>
    {% for a in assistants %}
    <form class="assistant-settings hub-card" data-agent="{{ a.id }}">
      <div class="hub-card-name">{{ a.name }}{% if a.for_line %}
        {# hub.for_line, the hub's rule: never "your other", and "For
           you" once someone you care for is here. #}
        <span class="hub-card-sub">{{ a.for_line }}</span>{% endif %}</div>
      {# An account from before keeps several assistants (owner decision
         D5): each says which records it reads, so they are told apart. #}
      {% if several and a.reads %}
      <div class="hub-card-sub">Reads {{ "sample records" if a.reads == "Sample records" else a.reads }}</div>
      {% endif %}
      <fieldset class="choice-group assistant-tone">
        <legend>Tone</legend>
        {% for key, p in tones %}
        <label class="choice-row"><input type="radio" name="tone-{{ a.id }}"
          value="{{ key }}" {% if a.persona == key %}checked{% endif %}><span>{{ tone_words[key] | capitalize }}</span></label>
        {% endfor %}
      </fieldset>
      <fieldset class="choice-group assistant-routines">
        <legend>Focuses on</legend>
        {% for r in routine_catalog %}
        <label class="choice-row"><input type="checkbox" value="{{ r.id }}"
          {% if r.name in a.routines %}checked{% endif %}><span>{{ r.name }}</span></label>
        {% endfor %}
      </fieldset>
      <p class="card-note">These change what {{ a.name }} pays attention
        to, not what it can read.</p>
      <div class="card-actions">
        <button type="submit" class="pill">Save</button>
        {% if a.legacy_extra %}
        <button type="button" class="pill danger assistant-remove" data-agent="{{ a.id }}">Remove</button>
        {% endif %}
      </div>
      {% if a.legacy_extra %}
      <div class="assistant-remove-confirm" hidden>
        <p>Remove {{ a.name }}? Its chat history stays with the records.</p>
        <div class="card-actions">
          <button type="button" class="pill danger assistant-remove-yes">Remove</button>
          <button type="button" class="pill assistant-remove-no">Keep</button>
        </div>
      </div>
      {% endif %}
      <p class="inline-msg" role="status" aria-live="polite" hidden></p>
    </form>
    {% endfor %}
  </section>
  {% endif %}

  <section class="leaving">
    <h2>Sign out or leave</h2>
    <form method="post" action="/logout"><button class="pill">Sign out</button></form>
    <p>Deleting your account deletes the records behind every connection
      first, then your email, passkey and consents. We keep a log of who
      looked at your records, with no health details in it.</p>
    <button class="pill danger" id="account-delete" type="button">Delete my account</button>
    <p class="inline-msg" id="account-msg" role="status" aria-live="polite" hidden></p>
  </section>
</main>

<!-- Pairing code card. What is shown in #pair-code is byte-identical to what
     Copy writes, so the press-and-hold fallback can't copy the wrong string. -->
<div class="modal" id="code-card" role="dialog" aria-modal="true"
     aria-labelledby="code-title" hidden>
  <div class="modal-card">
    <h3 id="code-title">Text this to connect</h3>
    <p id="code-instructions"></p>
    <div id="pair-code"></div>
    <button type="button" class="btn-secondary btn-block" id="copy-code">
      <span id="copy-state">Copy</span></button>
    <button type="button" class="btn-primary btn-block" id="code-done">Done</button>
  </div>
</div>

{% set delete_for = "account" %}
{% include "_delete_modal.html" %}

{# The hub's script: its dialog, announce and delete primitives are shared,
   and every handler is guarded by the element it binds. #}
<script src="{{ url_for('static', filename='home.js') }}"></script>
<script src="{{ url_for('static', filename='invite.js') }}"></script>
<script src="{{ url_for('static', filename='assistant_settings.js') }}"></script>
{% endblock %}