{% extends "base.html" %}
{% block title %}{{ plan_file.name }} — {{ project.name }}{% endblock %}

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

{% block topbar_main %}
<nav class="crumbs" aria-label="Breadcrumb">
    <a href="/projects">Projects</a><span class="sep">/</span>
    <a href="/projects/{{ project.id }}">{{ project.name }}</a><span class="sep">/</span>
    <span class="here">{{ plan_file.name }}.md</span>
  </nav>
{% endblock %}

{% block topbar_actions %}
<div class="reading">
      <button type="button" class="btn" id="reading-toggle"
              aria-expanded="false" aria-controls="reading-panel"
              title="Reading settings">Aa</button>
      <div class="reading-panel" id="reading-panel" hidden role="group" aria-label="Reading settings">
        <h3>Reading</h3>
        <div class="reading-group"><span id="rl-preset">Preset</span>
          <div class="reading-segs" data-reading="preset" role="group" aria-labelledby="rl-preset">
            <button type="button" class="reading-seg" data-value="default">Default</button>
            <button type="button" class="reading-seg" data-value="book">Book</button>
            <button type="button" class="reading-seg" data-value="night">Night</button>
            <button type="button" class="reading-seg" data-value="plain">Plain</button>
          </div>
        </div>
        <div class="reading-group"><span id="rl-font">Font</span>
          <div class="reading-segs" data-reading="font" role="group" aria-labelledby="rl-font">
            <button type="button" class="reading-seg" data-value="serif">Serif</button>
            <button type="button" class="reading-seg" data-value="sans">Sans</button>
            <button type="button" class="reading-seg" data-value="mono">Mono</button>
            <button type="button" class="reading-seg" data-value="system">System</button>
          </div>
        </div>
        <div class="reading-group"><span id="rl-size">Size</span>
          <div class="reading-segs" data-reading="size" role="group" aria-labelledby="rl-size">
            <button type="button" class="reading-seg" data-value="s">S</button>
            <button type="button" class="reading-seg" data-value="m">M</button>
            <button type="button" class="reading-seg" data-value="l">L</button>
            <button type="button" class="reading-seg" data-value="xl">XL</button>
          </div>
        </div>
        <div class="reading-group"><span id="rl-measure">Width</span>
          <div class="reading-segs" data-reading="measure" role="group" aria-labelledby="rl-measure">
            <button type="button" class="reading-seg" data-value="narrow">Narrow</button>
            <button type="button" class="reading-seg" data-value="comfortable">Normal</button>
            <button type="button" class="reading-seg" data-value="wide">Wide</button>
          </div>
        </div>
      </div>
    </div>
    <a class="btn" href="/plans/{{ plan_file.id }}/history">History</a>
    <a class="btn" href="/plans/{{ plan_file.id }}/download?version={{ version.version }}"
       data-no-boost download>Download</a>
    <a class="btn btn-primary" href="/plans/{{ plan_file.id }}/edit" data-no-boost>Edit</a>
{% endblock %}

{% block content %}
<div class="plan-layout">

  <div class="plan-main">
    {#
      A retired plan still renders: a saved link should explain itself
      rather than 404, and pretending the page is gone would be a stronger
      claim than the one actually made. The wording avoids "deleted" for
      the same reason the command does.
    #}
    {% if retirement %}
    <div class="notice bad" style="margin-bottom:14px">
      <b>This plan is retired.</b>
      It is hidden from every listing and no longer sent to peers.
      {% if retirement.reason %} Reason given: {{ retirement.reason }}.{% endif %}
      {% if retirement.by %} Claimed by {{ retirement.by }}.{% endif %}
      Nothing was erased — every version is still here, and a teammate who
      has not synced since still sees it. Bring it back with
      <code class="mono">flanner retire {{ plan_file.name }} --restore</code>.
    </div>
    {% endif %}
    <div class="plan-head">
      <h2 class="title">{{ plan_file.name }}.md</h2>
      {% if freshness %}
      <span class="drift" data-level="{{ freshness.status }}" aria-hidden="true">
        <i></i><i></i><i></i><i></i></span>
      <span class="pill pill-{{ freshness.status }}">{{ freshness.status }}</span>
      {% endif %}

      <form class="vpicker" method="get" action="/plans/{{ plan_file.id }}">
        <label class="field-label" for="version-selector">Version</label>
        <select class="btn" name="version" id="version-selector" onchange="this.form.requestSubmit()">
          {% for v in all_versions %}
          <option value="{{ v.version }}" {% if v.version == version.version %}selected{% endif %}>
            v{{ v.version }}{% if v.version == plan_file.current_version %} · latest{% endif %}</option>
          {% endfor %}
        </select>
        <noscript><button class="btn btn-sm" type="submit">Go</button></noscript>
      </form>
    </div>

    {% if render_capped %}
    <div class="alert alert-info" style="margin-top:14px">
      This plan is {{ "{:,}".format(content_chars) }} characters, past the
      1,000,000-character rendering limit, so it is shown as plain text.
    </div>
    <pre class="raw-content">{{ content }}</pre>
    {% else %}
    <article class="doc markdown-content">
      {% if frontmatter %}
      {#
        Collapsed on arrival. The header is bookkeeping - ids, hashes, parent
        artifacts - and at a dozen lines it pushed the actual writing below
        the fold on every screen. It is still one click away, and still the
        real text rather than a summary of it.
      #}
      <div class="meta" data-meta>
        <button type="button" class="btn btn-sm meta-toggle"
                aria-expanded="false" aria-controls="plan-meta">
          <span class="meta-caret" aria-hidden="true">›</span>
          <span data-meta-label>Show metadata</span>
          <span class="meta-count tnum">{{ frontmatter | length }}</span>
        </button>
        <div class="meta-body" id="plan-meta">
          <div>
            <div class="frontmatter">---
{% for key, value in frontmatter.items() %}{{ key }}: {{ value }}
{% endfor %}---</div>
          </div>
        </div>
      </div>
      {% endif %}
      {{ content_html|safe }}
    </article>
    {% endif %}

    <div class="filebar">
      <span>File location:</span>
      <span class="p">{{ version.file_path }}</span>
      {% if project.auto_gitignore %}<span class="ok">git-ignored ✓</span>{% endif %}
    </div>
  </div>

  <aside class="plan-rail" aria-label="About this plan">
    <section>
      <h2>Details</h2>
      <div class="kv"><span>Version</span><span class="m">v{{ version.version }}</span></div>
      <div class="kv"><span>Updated by</span><b>{{ version.created_by or 'user' }}</b></div>
      {% if version.created_at %}
      <div class="kv"><span>Authored</span><b>{{ version.created_at | relative_time }}</b></div>
      {% endif %}
      {% if freshness and freshness.anchor %}
      <div class="kv"><span>Anchor commit</span><span class="m">{{ freshness.anchor[:7] }}</span></div>
      {% endif %}
      {% if version.notes %}
      <div class="kv"><span>Notes</span><b>{{ version.notes }}</b></div>
      {% endif %}
    </section>

    {% if linear_links %}
    <section class="linear-panel">
      <h2>Linked issues</h2>
      {% for link in linear_links %}
      <div class="kv">
        <span>
          {% if link.url %}<a href="{{ link.url }}" target="_blank" rel="noopener">{{ link.issue_id }}</a>
          {% else %}{{ link.issue_id }}{% endif %}
        </span>
        <b>{{ link.state or 'not synced' }}</b>
      </div>
      {% if link.title %}<div class="hint">{{ link.title }}</div>{% endif %}
      {% if link.notes %}<div class="hint">{{ link.notes }}</div>{% endif %}
      {% endfor %}
    </section>
    {% endif %}

    {#
      Comments from the mesh. Each one is resolved against the version on
      screen rather than the one it was written on, because that is the
      question a reader has: does this still apply to what is in front of
      me? A comment that has lost its text keeps its words and says so,
      rather than sliding quietly onto a sentence nobody commented on.
    #}
    {% if comments %}
    <section>
      <h2>Comments</h2>
      {% for note in comments %}
      <div class="comment{% if not note.anchored %} adrift{% endif %}">
        <div class="quote">{{ note.quote }}</div>
        <div class="body">{{ note.body }}</div>
        <div class="by">
          <span>{{ note.by }}{% if note.version %} · on v{{ note.version }}{% endif %}</span>
          {% if note.state != 'exact' %}
          <span class="pill pill-{{ note.tone }}">{{ note.label }}</span>
          {% endif %}
        </div>
      </div>
      {% endfor %}
    </section>
    {% endif %}

    {#
      Review from outside the mesh. Kept visually distinct from anything a
      teammate wrote, because the reviewer had no device key: the only
      signature involved says which device received these, not who wrote
      them. Presenting them as equivalent would be the one unforgivable bug
      in this feature.
    #}
    {% if outside_notes %}
    <section class="outside">
      <h2>From outside
        <span class="pill pill-aging">unverified</span></h2>
      {% for note in outside_notes %}
      <div class="outside-note">
        <div class="quote">{{ note.quote }}</div>
        <div class="body">{{ note.body }}</div>
        <div class="by">{{ note.reviewer }}{% if note.version %} · on v{{ note.version }}{% endif %}</div>
      </div>
      {% endfor %}
      <p class="hint">Sent back in a review packet. Nobody outside the team
         can sign, so these are recorded as received rather than authored.</p>
    </section>
    {% endif %}

    {% if freshness %}
    <section>
      <h2>Freshness evidence</h2>
      {% if freshness.reasons %}
        {% for reason in freshness.reasons %}
        <div class="check">
          <span class="{% if freshness.status == 'fresh' %}ok{% else %}no{% endif %}"
                aria-hidden="true">{% if freshness.status == 'fresh' %}✓{% else %}!{% endif %}</span>
          <span>{{ reason }}</span>
        </div>
        {% endfor %}
      {% else %}
        <div class="check"><span class="ok" aria-hidden="true">✓</span>
          <span>Nothing has drifted since this was written.</span></div>
      {% endif %}
    </section>
    {% endif %}

    <section>
      <h2>Version history</h2>
      {% for v in all_versions %}
      <div style="display:flex; align-items:center; gap:9px; padding:4px 0">
        <span class="vtag {% if v.version == plan_file.current_version %}vtag-current{% endif %}">
          v{{ v.version }}</span>
        <a href="/plans/{{ plan_file.id }}?version={{ v.version }}"
           style="font-size:12px; color:var(--text-2)">{{ v.notes or 'no note' }}</a>
        <span style="margin-left:auto; font-size:11px; color:var(--text-4)">
          {{ v.created_at | relative_time if v.created_at }}</span>
      </div>
      {% endfor %}
      <a class="btn btn-sm" style="margin-top:10px"
         href="/plans/{{ plan_file.id }}/history">Full history</a>
    </section>
  </aside>

</div>
{% endblock %}