{% 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 %}

  <div class="fields">
    <div>
      <label for="s-{{ req.id }}">{{ t("app.limit_mine") }}</label>
      <input id="s-{{ req.id }}" name="sessions" type="text" placeholder="*">
    </div>
    <div>
      <label for="p-{{ req.id }}">{{ t("app.limit_theirs") }}</label>
      <input id="p-{{ req.id }}" name="peer_sessions" type="text" placeholder="*">
    </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">
    <span><strong>{{ t("app.trusted") }}</strong><br>
      <span class="muted">{{ t("app.trusted_hint") }}</span></span>
  </label>

  <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 contacts %}
<div class="panel">
  <table>
    <tr>
      <th>{{ t("app.peer") }}</th><th>{{ t("app.direction") }}</th><th>{{ t("app.rights") }}</th>
      <th>{{ t("app.sessions") }}</th><th>{{ t("app.trusted") }}</th><th>{{ t("app.expires") }}</th>
      <th></th>
    </tr>
    {% for c in contacts %}
    <tr>
      <td class="mono">{{ c.peer }}</td>
      <td><span class="pill">{{ c.direction }}</span></td>
      <td class="muted">{{ c.rights | join(", ") }}</td>
      <td class="muted">
        {% for ep in c.endpoints %}
        <span class="mono">{{ ep.session }}</span>{% if ep.label %} ({{ ep.label }}){% endif %}{% if ep.online %}
        <span class="dot on"></span>{% endif %}<br>
        {% endfor %}
        {% if not c.endpoints %}{{ t("app.no_endpoints") }}{% endif %}
      </td>
      <td>
        {% if c.direction == "inbound" %}
        <form method="post" action="/app/grant/trust" class="inline">
          <input type="hidden" name="grant_id" value="{{ c.grant_id }}">
          <input type="hidden" name="csrf" value="{{ csrf }}">
          <input type="hidden" name="trusted" value="{{ 0 if c.trusted else 1 }}">
          <button class="ghost" style="padding:3px 10px;font-size:13px;white-space:nowrap">
            {{ t("app.trusted_on") if c.trusted else t("app.trusted_off") }}
          </button>
        </form>
        {% else %}<span class="muted">&mdash;</span>{% endif %}
      </td>
      <td class="muted" style="white-space:nowrap">{{ c.expires_at[:10] if c.expires_at else t("app.no_expiry") }}</td>
      <td>
        {% if c.grant_id %}
        <form method="post" action="/app/grant/revoke" class="inline">
          <input type="hidden" name="grant_id" value="{{ c.grant_id }}">
          <input type="hidden" name="csrf" value="{{ csrf }}">
          <button class="ghost" style="padding:3px 10px;font-size:13px">{{ t("app.revoke") }}</button>
        </form>
        {% endif %}
      </td>
    </tr>
    {% endfor %}
  </table>
</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>
      <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 %}