{% extends "base.html" %}
{% block title %}{{ bank.title }} — LocalKeep{% endblock %}
{% block window_title %}{{ bank.title }} - LocalKeep{% endblock %}
{% block content %}
<div class="page-heading">
  <h1>{{ bank.title }}</h1>
  <div class="actions">
    <a class="btn primary" href="/banks/{{ bank.id }}/memories/new">Add memory</a>
    <a class="btn" href="/banks">All banks</a>
  </div>
</div>
{% if bank.description %}<p class="meta">{{ bank.description }}</p>{% endif %}

{% if memories %}
<div class="next-step {% if mcp_connected %}is-ready{% endif %}" id="ask-claude">
  {% if just_saved %}
  <p class="win-line" role="status">Memory saved.</p>
  {% endif %}

  <p class="mcp-status {% if mcp_connected %}ok{% else %}warn{% endif %}" role="status">
    {% if mcp_connected %}
      <strong>You’re connected.</strong> LocalKeep is live with Claude
      (last active {{ mcp_last_seen_label }}). This is the win — ask about your timeline below.
    {% else %}
      <strong>Almost there.</strong> Your memories are in LocalKeep; Claude just can’t see them yet.
      Finish the one-time setup, quit Claude, come back here and refresh — this box turns green when it works.
    {% endif %}
  </p>

  {% if mcp_connected %}
  <p class="first-run-lead">{% if just_saved %}Saved — now ask Claude{% else %}Ask Claude now{% endif %}</p>
  <p class="first-run-pitch">
    Paste this in a new Claude chat. Before you send it, replace <strong>…</strong> with a real date
    from this bank{% if prompt_dates %} (try
    {% for d in prompt_dates %}<code>{{ d }}</code>{% if not loop.last %} or {% endif %}{% endfor %}){% endif %}.
    Claude should search your memories and reason over the <strong>dates</strong>, not hallucinate details.
  </p>
  <label class="meta" for="claude-prompt">Try this prompt</label>
  <textarea id="claude-prompt" class="prompt-box" readonly rows="4">{{ claude_prompt }}</textarea>
  <div class="actions" style="margin-top:8px">
    <button type="button" class="primary" id="copy-prompt">Copy prompt</button>
    <a class="btn" href="/banks/{{ bank.id }}/memories/new">Add another memory</a>
    <span class="meta" id="copy-status" aria-live="polite"></span>
  </div>
  <p class="meta" style="margin-top:10px">
    Tip: add a second dated memory, then ask what changed between the two dates.
  </p>

  <hr class="next-step-rule">
  <details class="connect-panel" id="connect-panel">
    <summary>
      <span class="connect-toggle-title">Connection setup (already done)</span>
      <span class="connect-toggle-hint" aria-hidden="true"></span>
    </summary>
    {% include "banks/_connect_steps.html" %}
  </details>

  {% else %}
  <p class="first-run-lead">{% if just_saved %}Saved. Next — connect Claude{% else %}Connect Claude to unlock this bank{% endif %}</p>
  <p class="first-run-pitch">
    Claude can’t find local tools by itself — one copy-paste into its config file unlocks your timeline.
    Then try the prompt.
  </p>

  <details class="connect-panel" id="connect-panel" open>
    <summary>
      <span class="connect-toggle-title">Connect LocalKeep to Claude (once)</span>
      <span class="connect-toggle-hint" aria-hidden="true"></span>
    </summary>
    {% include "banks/_connect_steps.html" %}
  </details>

  <hr class="next-step-rule">
  <p class="first-run-lead">Then paste this prompt in Claude</p>
  <p class="first-run-pitch">
    After the status above turns green, paste this in a new Claude chat.
    Replace <strong>…</strong> with a date from this bank{% if prompt_dates %} (try
    {% for d in prompt_dates %}<code>{{ d }}</code>{% if not loop.last %} or {% endif %}{% endfor %}){% endif %}.
  </p>
  <label class="meta" for="claude-prompt">Try this prompt</label>
  <textarea id="claude-prompt" class="prompt-box" readonly rows="4">{{ claude_prompt }}</textarea>
  <div class="actions" style="margin-top:8px">
    <button type="button" class="primary" id="copy-prompt">Copy prompt</button>
    <a class="btn" href="/banks/{{ bank.id }}/memories/new">Add another memory</a>
    <span class="meta" id="copy-status" aria-live="polite"></span>
  </div>
  <p class="meta" style="margin-top:10px">
    Tip: add a second dated memory in this bank, then ask what changed between the two dates.
  </p>
  {% endif %}
</div>
<script>
  (function () {
    function wireCopy(btnId, boxId, statusId) {
      var btn = document.getElementById(btnId);
      var box = document.getElementById(boxId);
      var status = document.getElementById(statusId);
      if (!btn || !box) return;
      btn.addEventListener("click", function () {
        var text = box.value;
        function ok() {
          if (status) status.textContent = "Copied.";
        }
        if (navigator.clipboard && navigator.clipboard.writeText) {
          navigator.clipboard.writeText(text).then(ok).catch(function () {
            box.focus();
            box.select();
            if (status) status.textContent = "Select and copy (⌘C / Ctrl+C).";
          });
        } else {
          box.focus();
          box.select();
          if (status) status.textContent = "Select and copy (⌘C / Ctrl+C).";
        }
      });
    }
    wireCopy("copy-prompt", "claude-prompt", "copy-status");
    wireCopy("copy-mcp-config", "mcp-config", "copy-mcp-status");
    wireCopy("copy-prefs", "prefs-snippet", "copy-prefs-status");
  })();
</script>
{% endif %}

<div class="canvas">
{% if memories %}
{% for memory in memories %}
<article class="memory-block">
  <h2>{{ memory.title }}</h2>
  <div class="meta">Date: {{ memory.event_date }}{% if memory.entities %} · {{ memory.entities | join(', ') }}{% endif %}</div>
  <p>{{ memory.content }}</p>
  <div class="actions">
    <a class="btn" href="/memories/{{ memory.id }}/edit">Edit</a>
    <form method="post" action="/memories/{{ memory.id }}/delete" style="display:inline" onsubmit="return confirm('Delete this memory?');">
      <button type="submit" class="danger">Delete</button>
    </form>
  </div>
</article>
{% endfor %}
{% else %}
<div class="first-run">
  <p class="first-run-lead">This bank is empty — add a dated memory</p>
  <p class="first-run-pitch">
    Step 2 of 3. Dated memories are what Claude looks up later when you ask about your timeline.
    Use this example template:
  </p>

  <div class="memory-shape" aria-label="Memory shape">
    <div class="memory-shape-row"><span class="memory-shape-key">Title</span><span class="memory-shape-val">short label for what happened</span></div>
    <div class="memory-shape-row"><span class="memory-shape-key">Event date</span><span class="memory-shape-val">when it happened (this unlocks timeline questions)</span></div>
    <div class="memory-shape-row"><span class="memory-shape-key">Note</span><span class="memory-shape-val">what you want remembered — keep specific details</span></div>
  </div>

  <p class="first-run-cta">
    <a class="btn primary" href="/banks/{{ bank.id }}/memories/new">Add your first memory</a>
  </p>
  <p class="meta">Step 3 comes after you save: we’ll help you connect Claude, then give you a prompt that uses this bank’s dates.</p>
</div>
{% endif %}
</div>

<form method="post" action="/banks/{{ bank.id }}/delete" onsubmit="return confirm('Delete this bank and all its memories?');" style="margin-top:8px">
  <button type="submit" class="danger">Delete bank</button>
</form>
{% endblock %}