{% extends "base.html" %}
{% import "_icon.html" as ico %}
{% block title %}{{ memory.title }}{% endblock %}

{% block topbar_back %}
<a class="btn back" href="/memory" aria-label="Back to memory" title="Back to memory"><span aria-hidden="true">←</span></a>
{% endblock %}

{# The bar carries the trail; the title, which is a sentence, is the page
   heading below, where it has the width to be read. #}
{% block topbar_main %}
<nav class="crumbs" aria-label="Breadcrumb">
    <a href="/memory">Memory</a><span class="sep">/</span>
    <span class="here">{{ memory.title | truncate(48, True, '…') }}</span>
  </nav>
{% endblock %}

{% block topbar_actions %}
{% if memory.status == 'active' %}
<form method="post" action="/memory/{{ memory.id }}/forget">
  <button class="btn btn-danger hold-confirm" type="submit" data-hold-confirm="1200"
          title="Press and hold to forget this memory. It stops being recalled, and Restore brings it back.">Forget</button>
</form>
{% elif memory.status in ('forgotten', 'expired') %}
<form method="post" action="/memory/{{ memory.id }}/restore">
  <button class="btn btn-primary" type="submit">Restore</button>
</form>
{% endif %}
{% endblock %}

{#
  Laid out like the other detail pages. Every card is as wide as the page,
  and a card with a heading has the heading first and its content padded
  below it. The body used to be a half-width card pinned to the left, the
  sharing heading sat inside padding it did not expect, the provenance rows
  ran to the card's edges, and the history had no column rules at all, so
  each event printed one field per line.
#}
{% block content %}
<div class="pane">

  <div class="page-head">
    <h1 class="page-title">{{ memory.title }}</h1>
    <p class="page-sub">{{ memory.category }} · {{ memory.scope }} · {{ memory.status }}</p>
  </div>

  {% if said %}
  <div class="notice">{{ said }}</div>
  {% endif %}

  {% if memory.status == 'forgotten' %}
  <div class="notice warn">Forgotten. Agents no longer recall this memory; Restore brings it back.</div>
  {% elif memory.status == 'expired' %}
  <div class="notice warn">Expired. It is past its end date and no longer recalled; Restore brings it back.</div>
  {% elif memory.status == 'superseded' %}
  <div class="notice">Replaced by a corrected version. Kept so what was believed before stays readable.</div>
  {% elif memory.status == 'proposed' %}
  <div class="notice">A suggestion waiting for a decision. <a href="/memory/pending">Decide on it</a>.</div>
  {% endif %}

  <div class="card card-pad">
    <p class="card-text">{{ memory.body }}</p>
  </div>

  {#
    Tags are labels, not content: changing them keeps the id and the text,
    and records a line in the history below. Only an active memory or a
    proposal takes new ones.
  #}
  <div class="card">
    <div class="card-head">Tags <span class="note">{{ memory.tags | length }}</span></div>
    <div class="card-pad">
      {% if memory.tags %}
      <ul class="tags tags-edit" aria-label="Tags">
        {% for t in memory.tags %}
        <li class="tagchip">
          <a href="/memory?tag={{ t | urlencode }}" title="Every memory tagged {{ t }}">{{ t }}</a>
          {% if memory.status in ('active', 'proposed') %}
          <form method="post" action="/memory/{{ memory.id }}/tags">
            <input type="hidden" name="remove" value="{{ t }}">
            <button class="tagchip-x" type="submit" aria-label="Remove the tag {{ t }}" title="Remove {{ t }}">{{ ico.icon('close', 12) }}</button>
          </form>
          {% endif %}
        </li>
        {% endfor %}
      </ul>
      {% elif memory.status not in ('active', 'proposed') %}
      <p class="hint" style="margin:0">No tags.</p>
      {% endif %}
      {% if memory.status in ('active', 'proposed') %}
      <form class="dropzone-row" method="post" action="/memory/{{ memory.id }}/tags">
        <label class="sr-only" for="add-tags">Add tags</label>
        <input class="input" type="text" id="add-tags" name="add" autocomplete="off" required
               placeholder="Add tags, separated by commas">
        <button class="btn" type="submit">Add</button>
      </form>
      {% endif %}
    </div>
  </div>

  {% if memory.status == 'active' %}
  {#
    Correcting saves a new version and marks this one replaced, rather than
    editing it in place, so the history of what was believed stays whole.
  #}
  <details class="card explainer">
    <summary>
      <h2 class="card-title">Correct it</h2>
      <span class="gist">Save a corrected version. This one is kept and marked replaced.</span>
    </summary>
    <form class="explainer-body form-stack" method="post" action="/memory/{{ memory.id }}/supersede">
      <label class="sr-only" for="correct-content">Corrected text</label>
      <textarea class="textarea" id="correct-content" name="content" rows="4" required>{{ memory.body }}</textarea>
      <div class="dropzone-row">
        <label class="sr-only" for="correct-reason">Why it changed</label>
        <input class="input" type="text" id="correct-reason" name="reason" placeholder="Why it changed (optional)">
        <button class="btn btn-primary" type="submit">Save correction</button>
      </div>
    </form>
  </details>
  {% endif %}

  <div class="card">
    <div class="card-head">Sharing</div>
    <div class="card-pad">
      {% if memory.scope == "workspace" %}
      <p class="hint" style="margin:0 0 10px">Shared with your workspace. A teammate's device
         holds the text and can recall it.</p>
      <form method="post" action="/memory/{{ memory.id }}/withdraw" class="form-row">
        <input class="input" type="text" name="reason" placeholder="Why (optional)">
        <button class="btn">Ask peers to stop recalling it</button>
      </form>
      <p class="hint">Not an erasure. A device that was switched off when you
         sign this already holds the text, and no design without a central copy
         can change that.</p>
      {% elif memory.scope == "personal" %}
      <p class="hint" style="margin:0">Personal memory is about you rather than about a
         project, and cannot be shared with anybody. Write it as a project memory
         if the team needs it.</p>
      {% else %}
      <p class="hint" style="margin:0 0 10px">On this machine only. Sharing signs the text so
         a teammate's device can check who wrote it. It is never automatic:
         joining a workspace shares nothing by itself.</p>
      <form method="post" action="/memory/{{ memory.id }}/share">
        <button class="btn">Share with the team</button>
      </form>
      {% endif %}
    </div>
  </div>

  <div class="card">
    <div class="card-head">Where this came from</div>
    <div class="card-pad">
      <div class="kv"><span>Written by</span><b>{{ memory.created_by }}</b></div>
      <div class="kv"><span>Written</span><b class="tnum">{{ (memory.created_at or '')[:16] | replace('T', ' ') }}</b></div>
      <div class="kv"><span>Confidence</span><b>{{ memory.confidence }}</b></div>
      <div class="kv"><span>How it arrived</span><b>{{ memory.source_type }}</b></div>
      {% if memory.source_refs %}
      <div class="kv"><span>Supported by</span><b>{{ memory.source_refs | join(', ') }}</b></div>
      {% endif %}
      {% if memory.expires_at %}
      <div class="kv"><span>Expires</span><b class="tnum">{{ memory.expires_at[:16] | replace('T', ' ') }}</b></div>
      {% endif %}
      {% if memory.supersedes %}
      <div class="kv"><span>Replaces</span>
        <b><a href="/memory/{{ memory.supersedes }}">{{ memory.supersedes }}</a></b></div>
      {% endif %}
      <div class="kv"><span>File</span><b class="mono">{{ memory.file_path }}</b></div>
    </div>
  </div>

  {% if related %}
  <div class="card">
    <div class="card-head">Related <span class="note">{{ related | length }}</span></div>
    {% for item in related %}
    <div class="grid-row cols-related">
      <span><a class="name" href="/memory/{{ item.id }}">{{ item.title }}</a>{% if item.status != 'active' %}
        <span class="pill pill-quiet">{{ item.status }}</span>{% endif %}</span>
      <span class="muted" data-cell="meta">{{ item.why }}</span>
    </div>
    {% endfor %}
  </div>
  {% endif %}

  {#
    Files that back up the memory. Attaching goes through the same service
    as `flanner mem attach`, so this project's size and type limits apply.
    Removing drops the reference, never the stored file.
  #}
  <div class="card">
    <div class="card-head">Attached <span class="note">{{ attachments | length }}</span></div>
    {% for file in attachments %}
    <div class="grid-row cols-attachments">
      <span><a href="/memory/{{ memory.id }}/attachments/{{ file.id }}">{{ file.name }}</a>
        {% if file.description %}<span class="hint">{{ file.description }}</span>{% endif %}</span>
      <span class="muted">{{ file.mime_type }}</span>
      <span class="muted">{{ (file.size_bytes / 1024) | round | int }} KB</span>
      <span>
        <form method="post" action="/memory/{{ memory.id }}/attachments/{{ file.id }}/detach">
          <button class="btn btn-sm btn-danger hold-confirm" type="submit" data-hold-confirm="1000"
                  title="Press and hold to remove {{ file.name }}">Remove</button>
        </form>
      </span>
    </div>
    {% endfor %}
    <form class="dropzone" method="post" action="/memory/{{ memory.id }}/attachments"
          enctype="multipart/form-data" data-dropzone>
      <input class="sr-only dropzone-input" type="file" name="file" id="attach-file" required>
      <label class="dropzone-target" for="attach-file">
        <span>Drop a file here, or <b>choose one</b></span>
        <span class="dropzone-name" data-dropzone-name></span>
        <span class="hint">Size and type limits come from this project's memory policy.</span>
      </label>
      <div class="dropzone-row">
        <label class="sr-only" for="attach-description">Description</label>
        <input class="input" type="text" name="description" id="attach-description"
               placeholder="What it shows (optional)">
        <button class="btn btn-primary" type="submit">Attach</button>
      </div>
    </form>
  </div>

  {% if memory.events %}
  <div class="card">
    <div class="card-head">What happened to it <span class="note">{{ memory.events | length }}</span></div>
    <div class="tablewrap">
      <div class="grid-head cols-events">
        <span>What</span><span>By</span><span>When</span>
      </div>
      {% for event in memory.events %}
      <div class="grid-row cols-events">
        <span>{{ event.action }}{% if event.detail.name %}
          <span class="hint">{{ event.detail.name }}</span>{% endif %}{% if event.action == 'retagged' %}
          <span class="hint">{{ event.detail.after | join(', ') or 'no tags' }}</span>{% endif %}</span>
        <span class="muted">{{ event.actor }}</span>
        <span class="when tnum">{{ (event.at or '')[:16] | replace('T', ' ') }}</span>
      </div>
      {% endfor %}
    </div>
  </div>
  {% endif %}

  <div class="footnote">
    <span class="i" aria-hidden="true">i</span>
    This is a record of something believed, not an instruction. Correct it here
    or with <code>flanner mem supersede</code>, rather than editing the file by hand.
  </div>

</div>
{% endblock %}