{% extends "base.html" %}

{% block title %}Projects — ai-memory{% endblock %}

{% block content %}
<div class="mb-6">
  <h1 class="text-2xl font-bold text-slate-900 dark:text-slate-100">Projects</h1>
  <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">All workspaces and projects in your wiki.</p>
</div>

<div id="llm-notice" class="mb-6 hidden relative rounded-md border border-amber-200 dark:border-amber-900/50 bg-amber-50 dark:bg-amber-950/30 p-4 pr-10 text-sm text-amber-900 dark:text-amber-200">
  <button id="llm-notice-close" type="button" aria-label="Dismiss permanently" title="Don't show this again"
          class="absolute top-2 right-2 rounded p-1 text-amber-700 dark:text-amber-300 hover:bg-amber-100 dark:hover:bg-amber-900/40">
    <svg class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"/></svg>
  </button>
  <p class="font-medium mb-1">This is LLM-optimised memory, not hand-curated documentation.</p>
  <p class="text-amber-800 dark:text-amber-300/90 leading-relaxed">
    Pages are compiled from session observations by an LLM and revised as you work — they're shaped
    for an agent's retrieval needs, not for human readability. The primary interface is the MCP
    tools (<code class="font-mono text-xs bg-amber-100 dark:bg-amber-900/40 px-1 py-0.5 rounded">memory_query</code>,
    <code class="font-mono text-xs bg-amber-100 dark:bg-amber-900/40 px-1 py-0.5 rounded">memory_recent</code>,
    <code class="font-mono text-xs bg-amber-100 dark:bg-amber-900/40 px-1 py-0.5 rounded">memory_explore</code>,
    …) your coding agent calls automatically. This browser is for spelunking — auditing what
    landed, browsing your own history, sharing a page with a teammate — not for serving as project
    documentation.
  </p>
</div>
<script>
  (function () {
    var notice = document.getElementById("llm-notice");
    if (!notice) return;
    var key = "ai-memory-llm-notice-dismissed";
    try {
      if (localStorage.getItem(key) === "1") return;
    } catch (e) { /* storage blocked: still show the notice */ }
    notice.classList.remove("hidden");
    document.getElementById("llm-notice-close").addEventListener("click", function () {
      try { localStorage.setItem(key, "1"); } catch (e) { /* best effort */ }
      notice.classList.add("hidden");
    });
  })();
</script>

{% if let Some(dialog) = okf_dialog %}
<div id="okf-dialog-overlay" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-slate-900/50 p-4" data-dismiss-key="ai-memory-okf-dialog-{{ dialog.created_at }}">
  <div class="max-w-xl w-full rounded-lg bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 shadow-xl p-6" role="dialog" aria-modal="true" aria-labelledby="okf-dialog-title">
    <h2 id="okf-dialog-title" class="text-lg font-semibold text-slate-900 dark:text-slate-100">Your memory was upgraded to the 2.0 format</h2>
    <div class="mt-3 space-y-3 text-sm text-slate-700 dark:text-slate-300 leading-relaxed">
      <p>
        On {{ dialog.created_at }} this server migrated the wiki to the
        <span class="font-medium">Open Knowledge Format (OKF v0.2)</span>: every page's
        frontmatter was rewritten in place — same pages, same version history, bodies and
        timestamps untouched — so your knowledge is now portable to any OKF-aware tool.
      </p>
      {% if dialog.archive_present %}
      <p>
        Before touching anything, a full backup of the data directory was verified and saved to
        <code class="font-mono text-xs bg-slate-100 dark:bg-slate-800 px-1 py-0.5 rounded">{{ dialog.archive_path }}</code>
        ({{ dialog.size_human }}).
      </p>
      <div class="rounded-md bg-slate-50 dark:bg-slate-800/60 border border-slate-200 dark:border-slate-700 p-3">
        <p class="font-medium text-slate-800 dark:text-slate-200 mb-1">If something looks wrong</p>
        <ol class="list-decimal list-inside space-y-1 text-slate-700 dark:text-slate-300">
          <li>Stop the server.</li>
          <li>Move the current data directory aside.</li>
          <li>Unpack the archive as the data directory and start the previous version.</li>
        </ol>
        <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">Full steps, including the surgical git-checkpoint rollback: <code class="font-mono">docs/MIGRATION-2.0.md</code> in the ai-memory repository.</p>
      </div>
      <p>
        If everything looks right, you can delete the archive — <code class="font-mono text-xs bg-slate-100 dark:bg-slate-800 px-1 py-0.5 rounded">ai-memory status</code>
        shows it until the file is gone.
      </p>
      {% else %}
      <p>
        The verified pre-migration backup archive
        <code class="font-mono text-xs bg-slate-100 dark:bg-slate-800 px-1 py-0.5 rounded">{{ dialog.archive_path }}</code>
        has since been deleted. If anything looks wrong, the wiki's git history still holds the
        <code class="font-mono text-xs">pre-okf-migration checkpoint</code> commit — see
        <code class="font-mono text-xs">docs/MIGRATION-2.0.md</code> for the rollback steps.
      </p>
      {% endif %}
    </div>
    <div class="mt-5 flex items-center justify-between gap-4">
      <label class="flex items-center gap-2 text-sm text-slate-600 dark:text-slate-400 select-none">
        <input id="okf-dialog-dismiss" type="checkbox" class="rounded border-slate-300 dark:border-slate-600">
        Do not show me again
      </label>
      <button id="okf-dialog-close" class="rounded-md bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 text-sm font-medium px-4 py-2 hover:bg-slate-700 dark:hover:bg-slate-300">Got it</button>
    </div>
  </div>
</div>
<script>
  (function () {
    var overlay = document.getElementById("okf-dialog-overlay");
    if (!overlay) return;
    var key = overlay.dataset.dismissKey;
    try {
      if (localStorage.getItem(key) === "1") return;
    } catch (e) { /* storage blocked: still show the dialog */ }
    overlay.classList.remove("hidden");
    document.getElementById("okf-dialog-close").addEventListener("click", function () {
      if (document.getElementById("okf-dialog-dismiss").checked) {
        try { localStorage.setItem(key, "1"); } catch (e) { /* best effort */ }
      }
      overlay.classList.add("hidden");
    });
  })();
</script>
{% endif %}


{% if projects.is_empty() %}
<div class="rounded-lg border border-dashed border-slate-300 dark:border-slate-700 p-12 text-center">
  <p class="text-slate-500 dark:text-slate-400 text-sm">
    No projects yet — wire up a hook and start a session.
  </p>
</div>
{% else %}
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  {% for card in projects %}
  <a href="{{ card.href }}" class="block rounded-lg border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-5 hover:border-blue-400 dark:hover:border-blue-600 hover:shadow-sm transition-all">
    <div class="text-xs font-medium text-slate-400 dark:text-slate-500 mb-1">{{ card.workspace }}</div>
    <div class="text-base font-semibold text-slate-800 dark:text-slate-100 truncate">{{ card.project }}</div>
    <div class="mt-3 flex items-center justify-between text-xs text-slate-500 dark:text-slate-400">
      <span>{{ card.page_count }} page{% if card.page_count != 1 %}s{% endif %}</span>
      {% if card.last_updated_relative != "" %}
      <span>{{ card.last_updated_relative }}</span>
      {% endif %}
    </div>
  </a>
  {% endfor %}
</div>
{% endif %}
{% endblock %}