{% extends "base.html" %}{% block title %}{{ t("app.title") }}{% endblock %}
{% block wrap_class %}wide{% endblock %}
{% block body %}

<h1>{{ t("app.title") }}</h1>

<div class="idcard">
  <div>
    <dt>{{ t("app.your_address") }}</dt>
    <dd class="mono">{{ me }}</dd>
  </div>
  <div>
    <dt>{{ t("app.fingerprint") }}</dt>
    <dd class="mono muted" style="font-size:14px">{{ fingerprint }}</dd>
  </div>
  <div>
    <dt>{{ t("link.title") }}</dt>
    <dd style="font-size:14px"><a href="/link">{{ t("app.link_hint") }}</a></dd>
  </div>
</div>

{% if pending %}
<div class="headline">
  <h2>{{ t("app.decide") }}</h2>
  <p class="muted">{{ t("app.pairing_hint") }}</p>
</div>
{% for req in pending %}
<form method="post" action="/app/pair/decide" class="decide">
  <input type="hidden" name="request_id" value="{{ req.id }}">
  <input type="hidden" name="csrf" value="{{ csrf }}">
  <p class="who">
    <span class="mono">{{ req.requester }}</span>
    <span class="pill">{{ t("app.fingerprint") }}: {{ req.requester_fingerprint or "?" }}</span>
  </p>
  {% if req.note %}<p class="muted" style="margin:0">{{ t("app.note") }}: {{ req.note }}</p>{% endif %}

  {% if req.offer %}
  <p class="offer"><strong>{{ t("app.they_offer") }}:</strong>
    {% if req.offer.sessions %}{{ t("app.they_offer_some") }}
      {% for name in req.offer.sessions %}<code>{{ name }}</code>{% endfor %}
    {% else %}{{ t("app.they_offer_all") }}{% endif %}
    {% if req.offer.trusted %}<span class="pill trust">{{ t("app.they_offer_trusted") }}</span>{% endif %}
  </p>
  {% endif %}

  {% if req.asks %}
  {% if req.proposed %}<p class="muted" style="margin:6px 0 0;font-size:13px">
    {{ t("app.they_proposed") }}</p>{% endif %}

  <div class="fields">
    <div>
      <label for="s-{{ req.id }}">{{ t("app.limit_mine") }}</label>
      <input id="s-{{ req.id }}" name="sessions" type="text" list="mine-{{ req.id }}"
             value="{{ req.want_mine }}" placeholder="{{ t('app.limit_all') }}">
      <datalist id="mine-{{ req.id }}">
        {% for name in req.mine %}<option value="{{ name }}">{% endfor %}
      </datalist>
      {% if req.mine %}<p class="hintline">{{ t("app.limit_yours") }}
        {% for name in req.mine %}<code>{{ name }}</code>{% endfor %}</p>{% endif %}
    </div>
    <div>
      <label for="p-{{ req.id }}">{{ t("app.limit_theirs") }}</label>
      <input id="p-{{ req.id }}" name="peer_sessions" type="text" list="theirs-{{ req.id }}"
             value="{{ req.want_theirs }}" placeholder="{{ t('app.limit_all') }}">
      <datalist id="theirs-{{ req.id }}">
        {% for name in req.theirs %}<option value="{{ name }}">{% endfor %}
      </datalist>
      {% if req.theirs %}<p class="hintline">{{ t("app.limit_peers") }}
        {% for name in req.theirs %}<code>{{ name }}</code>{% endfor %}</p>{% endif %}
    </div>
  </div>
  <p class="muted" style="font-size:12.5px;margin:8px 0 0">{{ t("app.limit_hint") }}</p>

  <label class="check">
    <input type="checkbox" name="trusted" value="1" {% if req.want_trusted %}checked{% endif %}>
    <span><strong>{{ t("app.trusted") }}</strong>
      {% if req.want_trusted %}<span class="pill">{{ t("app.they_asked_for_it") }}</span>{% endif %}<br>
      <span class="muted">{{ t("app.trusted_hint") }}</span></span>
  </label>

  <label class="check">
    <input type="checkbox" name="ask_back" value="1" {% if req.want_mutual %}checked{% endif %}>
    <span><strong>{{ t("app.ask_back") }}</strong><br>
      <span class="muted">{{ t("app.ask_back_hint") }}</span></span>
  </label>
  {% else %}
  <p class="muted" style="margin:10px 0 0;font-size:13px">{{ t("app.asks_nothing") }}</p>
  {% endif %}

  <p class="row" style="margin:18px 0 0">
    <button name="decision" value="approve">{{ t("app.approve") }}</button>
    <button name="decision" value="deny" class="ghost">{{ t("app.deny") }}</button>
  </p>
</form>
{% endfor %}
{% endif %}

<div class="headline">
  <h2>{{ t("app.my_sessions") }}</h2>
  <p class="muted">{{ t("app.my_sessions_hint") }}</p>
</div>
{% if sessions %}
<div class="panel">
  <table class="compact">
    <tr>
      <th>{{ t("app.sessions") }}</th><th>{{ t("app.state") }}</th>
      <th>{{ t("app.who_may_write") }}</th><th>{{ t("app.your_address") }}</th>
    </tr>
    {% for s in sessions %}
    <tr>
      <td>
        <span class="mono" style="font-size:15px">{{ s.session }}</span>
        {% if s.label %}<br><span class="muted">{{ s.label }}</span>{% endif %}
      </td>
      <td class="muted" style="white-space:nowrap">
        <span class="dot {% if s.online %}on{% endif %}"></span>
        {{ t("app.online") if s.online else t("app.offline") }}
        {% if not s.online and s.ago %}<br><span title="{{ s.last_seen }}">{{ t("app.last_seen") }} {{ s.ago }}</span>{% endif %}
      </td>
      <td>
        {% for r in s.readers %}
        <span class="mono">{{ r.peer }}</span>{% if r.trusted %}
        <span class="pill trust">{{ t("app.trusted_on") }}</span>{% endif %}<br>
        {% endfor %}
        {% if not s.readers %}<span class="muted">{{ t("app.nobody_outside") }}</span>{% endif %}
      </td>
      <td class="mono muted" style="font-size:13px">{{ s.endpoint }}</td>
    </tr>
    {% endfor %}
  </table>
</div>
{% else %}
<p class="muted">{{ t("app.no_sessions") }}</p>
{% endif %}

<div class="headline">
  <h2>{{ t("app.contacts") }}</h2>
</div>
{% if peers %}
<div class="panel">
  <table>
    <tr>
      <th>{{ t("app.peer") }}</th>
      <th>{{ t("app.they_to_me") }}</th>
      <th>{{ t("app.me_to_them") }}</th>
      <th>{{ t("app.sessions") }}</th>
      <th>{{ t("app.expires") }}</th>
      <th></th>
    </tr>
    {% for p in peers %}
    <tr>
      <td class="mono">{{ p.peer }}{% if p.self %}<br>
        <span class="pill trust">{{ t("app.own_account") }}</span>{% endif %}</td>

      <td>
        {% if p.inbound %}
          <span class="mono">{{ p.inbound.my_sessions | join(", ") }}</span>
          {% if not p.self %}
          <form method="post" action="/app/grant/trust" class="inline">
            <input type="hidden" name="grant_id" value="{{ p.inbound.grant_id }}">
            <input type="hidden" name="csrf" value="{{ csrf }}">
            <input type="hidden" name="trusted" value="{{ 0 if p.inbound.trusted else 1 }}">
            <button class="ghost" style="padding:2px 9px;font-size:12px;white-space:nowrap">
              {{ t("app.trusted_on") if p.inbound.trusted else t("app.trusted_off") }}
            </button>
          </form>
          {% endif %}
        {% else %}<span class="muted">&mdash;</span>{% endif %}
      </td>

      <td>
        {% if p.outbound %}<span class="mono">{{ p.outbound.peer_sessions | join(", ") }}</span>
          {% if p.outbound.trusted %}
          <span class="pill trust" title="{{ t('app.they_trust_me_hint') }}">
            {{ t("app.they_trust_me") }}</span>{% endif %}
        {% else %}<span class="muted">&mdash;</span>{% endif %}
      </td>

      <td class="muted">
        {% for ep in p.endpoints %}
        <span class="mono">{{ ep.session }}</span>{% if ep.online %}
        <span class="dot on"></span>{% endif %}<br>
        {% endfor %}
        {% if not p.endpoints %}{{ t("app.no_endpoints") }}{% endif %}
      </td>

      <td class="muted" style="white-space:nowrap">
        {% set exp = (p.inbound.expires_at if p.inbound else None) or (p.outbound.expires_at if p.outbound else None) %}
        {{ exp[:10] if exp else t("app.no_expiry") }}
      </td>

      <td>
        {% for g in [p.inbound, p.outbound] %}
        {% if g and g.grant_id and not p.self %}
        <form method="post" action="/app/grant/revoke" class="inline">
          <input type="hidden" name="grant_id" value="{{ g.grant_id }}">
          <input type="hidden" name="csrf" value="{{ csrf }}">
          <button class="ghost" style="padding:2px 9px;font-size:12px;white-space:nowrap">
            {{ t("app.revoke_in") if loop.first else t("app.revoke_out") }}
          </button>
        </form>
        {% endif %}
        {% endfor %}
      </td>
    </tr>
    {% endfor %}
  </table>
  <p class="muted" style="font-size:12.5px;padding:0 0 10px">{{ t("app.contacts_hint") }}</p>
</div>
{% else %}
<p class="muted">{{ t("app.no_contacts") }}</p>
{% endif %}

{% if sent %}
<div class="headline">
  <h2>{{ t("app.sent_title") }}</h2>
  <p class="muted">{{ t("app.sent_hint") }}</p>
</div>
<div class="panel">
  <table>
    <tr><th>{{ t("app.sent_to") }}</th><th>{{ t("app.note") }}</th><th></th></tr>
    {% for req in sent %}
    <tr>
      <td class="mono">{{ req.target }}</td>
      <td class="muted">{{ req.note or "" }}</td>
      <td><span class="pill">{{ t("app.sent_waiting") }}</span></td>
    </tr>
    {% endfor %}
  </table>
</div>
{% endif %}

<div class="grid" style="margin-top:8px">
  <div class="card">
    <h3>{{ t("app.ask_access") }}</h3>
    <form method="post" action="/app/pair/request">
      <input type="hidden" name="csrf" value="{{ csrf }}">
      <label for="target">{{ t("app.target") }}</label>
      <input id="target" name="target" type="text"
             placeholder="handle@{{ relay_host }}/session" required>
      <p class="muted" style="font-size:12.5px">{{ t("app.target_hint") }}</p>
      {% if sessions %}
      <label for="from_session">{{ t("app.asking_from") }}</label>
      <select id="from_session" name="from_session">
        {% for s in sessions %}<option value="{{ s.session }}">{{ s.session }}</option>{% endfor %}
        <option value="">{{ t("app.asking_from_web") }}</option>
      </select>
      <p class="muted" style="font-size:12.5px">{{ t("app.asking_from_hint") }}</p>
      {% endif %}
      <datalist id="my-sessions">
        {% for s in sessions %}<option value="{{ s.session }}">{% endfor %}
      </datalist>

      <label for="direction">{{ t("app.direction_label") }}</label>
      <select id="direction" name="direction">
        <option value="out">{{ t("app.direction_out") }}</option>
        <option value="in">{{ t("app.direction_in") }}</option>
        <option value="both" selected>{{ t("app.direction_both") }}</option>
      </select>

      <fieldset class="half">
        <legend>{{ t("app.give_legend") }}</legend>
        <label for="give_sessions">{{ t("app.give_sessions") }}</label>
        <input id="give_sessions" name="give_sessions" type="text" list="my-sessions"
               placeholder="{{ t('app.limit_all') }}">
        <label class="check">
          <input type="checkbox" name="give_trusted" value="1">
          <span>{{ t("app.trusted") }} &mdash;
            <span class="muted">{{ t("app.trusted_hint") }}</span></span>
        </label>
        <p class="muted" style="font-size:12.5px;margin:8px 0 0">{{ t("app.give_hint") }}</p>
      </fieldset>

      <fieldset class="half">
        <legend>{{ t("app.want_legend") }}</legend>
        <label for="want_peer_sessions">{{ t("app.want_peer_sessions") }}</label>
        <input id="want_peer_sessions" name="want_peer_sessions" type="text" list="my-sessions"
               placeholder="{{ t('app.limit_all') }}">
        <label class="check">
          <input type="checkbox" name="want_any" value="1">
          <span>{{ t("app.want_any") }}</span>
        </label>
        <label class="check">
          <input type="checkbox" name="want_trusted" value="1">
          <span>{{ t("app.want_trusted") }}</span>
        </label>
        <p class="muted" style="font-size:12.5px;margin:8px 0 0">{{ t("app.want_hint") }}</p>
      </fieldset>
      <label for="note">{{ t("app.note_for") }}</label>
      <input id="note" name="note" type="text" maxlength="200">
      <p class="row" style="margin-top:16px"><button>{{ t("app.send_request") }}</button></p>
    </form>
  </div>

  <div class="card">
    <h3>{{ t("app.connect") }}</h3>
    <p class="muted" style="font-size:14px">{{ t("app.connect_hint") }}</p>
    <pre><code>claude mcp add --scope user --transport http aim {{ mcp_url }}</code></pre>
    <p class="muted" style="font-size:14px">{{ t("app.connect_then") }}
      <a href="/docs">{{ t("app.guide") }}</a></p>
    {% if has_email %}
    <form method="post" action="/app/notify" class="row" style="margin-top:16px">
      <input type="hidden" name="csrf" value="{{ csrf }}">
      <label style="margin:0;display:flex;align-items:center;gap:8px;color:var(--fg)">
        <input type="checkbox" name="email_notify" {% if email_notify %}checked{% endif %}
               style="width:auto"> {{ t("app.notices_on") }}
      </label>
      <button class="ghost">{{ t("app.save") }}</button>
    </form>
    {% endif %}
  </div>
</div>

{% endblock %}