{% extends "base.html" %}
{% block title %}Share · {{ app_name }}{% endblock %}
{% block bodyattrs %} class="share"{% endblock %}
{#
  🔴 THE PREVIEW, THE DOWNLOAD AND THE POST TEXT DESCRIBE ONE CARD. Every URL here comes
  from routes.share_qs over ONE normalised parameter set, and the page's clock is pinned
  into the preview and the download (`at=`), so the picture on screen, the file handed to
  the share sheet and the caption on the clipboard are the same instant. With JavaScript
  the page edits in place through /share/text.json and writes the server's canonical URL
  back with history.replaceState — the address bar is still the whole truth.

  🔴 EVERY CONTROL IS A LINK FIRST. Without JS each one is an <a href> that changes the
  query string and lands back on ITS OWN PANEL (#stats, #post, #look, #photo), with
  scroll-margin clearing the sticky head. With JS the same element carries `data-set`
  (or `data-stat` / `data-op`), share.js applies it in place, and nothing reloads — so a
  run of stat toggles on a phone no longer throws the screen back to the top each time.

  🔴 NOTHING ABOVE THE VIEWPORT CHANGES HEIGHT WHILE YOU EDIT. Twelve fixed slots, a fixed
  toolbar, catalogue rows of fixed height whose order badge toggles `visibility` (never
  display), and a panel container with overflow-anchor:none. A toggle repaints text in
  place; it never moves an element from one list to another.

  🔴 The download is a plain <a href download>: a fetch()+Blob download misbehaves on iOS
  Safari. Share uses a picture prefetched before the tap (share.js), never a fetch inside it.

  ⚠️ A control is only OFFERED when it would change the picture — the location toggle
  needs a photo that has one, the badge toggle needs badges, Check-in needs a photo, the
  event stamp needs an event. A switch that silently does nothing reads as a broken feature.
#}
{% block body %}
{%- set P = picker -%}
{%- set W = plan.geom.W -%}{%- set H = plan.geom.H -%}
<div id="share" class="sp" data-card="{{ card_src }}" data-download="{{ download }}" data-filename="{{ filename }}"
     data-q="{{ q_json }}" data-ids="{{ ids_json }}" data-t="{{ form_token('share.presets') }}"
     data-save-name="{{ save_name }}">

<section class="sp-head" id="sp-head">
  <a class="sp-preview" id="sp-prev" href="{{ card_src }}" target="_blank" rel="noopener">
    <img id="sp-img" src="{{ card_src }}" alt="{{ post.alt }}" width="{{ W }}" height="{{ H }}" decoding="async"></a>
  <div class="sp-actions">
    <a id="sp-share" class="btn primary sp-go" href="{{ download }}" download="{{ filename }}" data-share-card>📤 Share</a>
    <div class="sp-row2">
      <button type="button" class="btn" data-copy="text" data-js hidden>⧉ Copy text</button>
      <a class="btn" id="sp-dl" href="{{ download }}" download="{{ filename }}" title="Download the picture" aria-label="Download the picture">⬇</a>
    </div>
    <a class="sp-first" id="sp-first" href="#post">{{ first_line }}</a>
    {% if nudge and nudge.id != q.photo %}<a class="chip sp-today" href="{{ nudge.href }}#stats">📸 Today's check-in →</a>{% endif %}
  </div>
  <nav class="sp-presets" id="sp-presets" aria-label="Presets">
    <div class="sp-prow" id="sp-pchips">
      {%- for it in presets %}
      <a class="chip sp-preset{{ ' on' if it.active }}{{ ' starter' if it.starter }}" href="{{ it.href }}"
         data-preset="{{ it.id }}" data-name="{{ it.name }}" data-starter="{{ 1 if it.starter else 0 }}"
         data-default="{{ 1 if it.is_default else 0 }}" data-modified="{{ 1 if it.modified else 0 }}"
         {%- if it.active %} aria-current="true"{% endif %}>{% if it.is_default %}★ {% endif %}{{ it.name }}<i class="dot"{% if not (it.active and it.modified) %} hidden{% endif %}> ●</i></a>
      {%- endfor %}
      <button type="button" class="chip sp-save" data-pact="save" data-js hidden>＋ Save</button>
      <noscript><span class="hint">saving presets needs JavaScript</span></noscript>
    </div>
    <div class="sp-prow" id="sp-pmenu" hidden>
      <button type="button" class="chip" data-pact="update"></button>
      <button type="button" class="chip" data-pact="saveas">Save as new</button>
      <button type="button" class="chip" data-pact="cancel">Cancel</button>
    </div>
    <form class="sp-prow" id="sp-pname" hidden>
      <input id="sp-pname-in" maxlength="32" autocomplete="off" aria-label="Preset name" value="{{ save_name }}">
      <button class="chip on">Save</button>
      <button type="button" class="chip" data-pact="cancel">Cancel</button>
    </form>
  </nav>
  <nav class="sp-nav" id="sp-nav" aria-label="Share panels">
    <a href="#stats" data-tab="stats">Stats</a><a href="#post" data-tab="post">Post</a><a href="#look" data-tab="look">Look</a><a href="#photo" data-tab="photo">Photo</a>
  </nav>
</section>

<div class="sp-panels" id="sp-panels">

<section id="stats" class="card sp-panel">
  <h3>On the card, in order <span class="sp-fits">fits <b id="sp-cap">{{ plan.capacity }}</b></span>
    <a class="more" href="/guide/photos#stats" title="How the grid works">📖</a></h3>
  <div class="sp-slots" id="sp-slots" style="--cols:{{ plan.cols }}" data-cols="{{ plan.cols }}">
    {%- for s in P.slots %}
    {%- if s.empty %}
    <a class="slot empty" data-i="{{ loop.index0 }}" aria-disabled="true"><i class="n">{{ s.n }}</i><b class="l"></b><small class="v"></small><em class="w"></em><u class="x">↔</u></a>
    {%- else %}
    <a class="slot {{ s.state }}{{ ' sel' if s.sel }}{{ ' span' if s.span > 1 }}" href="{{ s.href }}" data-i="{{ loop.index0 }}" data-id="{{ s.id }}"
       aria-pressed="{{ 'true' if s.sel else 'false' }}"><i class="n">{{ s.n }}</i><b class="l">{{ s.label }}</b><small class="v">{{ s.value if s.value else '—' }}</small><em class="w">{{ s.why }}</em><u class="x">↔</u></a>
    {%- endif %}
    {%- endfor %}
  </div>
  <p class="hint sp-more" id="sp-more"{% if not P.more %} hidden{% endif %}>+<span>{{ P.more }}</span> more in the link — no card draws more than twelve.</p>
  <div class="sp-tools" id="sp-tools">
    <a class="btn{{ '' if P.tools.up else ' off' }}" data-op="up" {% if P.tools.up %}href="{{ P.tools.up }}"{% else %}aria-disabled="true"{% endif %}>◀ earlier</a>
    <a class="btn{{ '' if P.tools.down else ' off' }}" data-op="down" {% if P.tools.down %}href="{{ P.tools.down }}"{% else %}aria-disabled="true"{% endif %}>later ▶</a>
    <a class="btn{{ '' if P.tools.rm else ' off' }}" data-op="rm" {% if P.tools.rm %}href="{{ P.tools.rm }}"{% else %}aria-disabled="true"{% endif %}>✕ remove</a>
  </div>
  <p class="sp-reset">
    <a class="chip" href="{{ P.to_setting }}" data-op="reset" title="The list in Settings → Stamps &amp; recap">↺ default list</a>
    <a class="chip" href="{{ P.to_none }}" data-op="clear">clear</a>
    <span class="hint" id="sp-toolhint">{{ 'Move or remove it with the buttons above.' if q.sel else 'Tap a slot to move or remove it.' }}</span>
  </p>
  <p class="hint">A stat with nothing to say at this moment is left out rather than printed as a zero, and a long value
    takes two cells instead of being cut short. Dashed slots won't fit on this card; dim ones repeat what the card already
    prints.</p>
  {%- for g in P.cat_groups %}
  <details class="sp-cat"{% if g.open %} open{% endif %}>
    <summary>{{ g.title }} <small>{{ g.entries|length }}</small></summary>
    <div class="sp-catgrid">
      {%- for t in g.entries %}
      <a class="cat{{ ' on' if t.on }}{{ ' off' if not t.href }}" {% if t.href %}href="{{ t.href }}"{% else %}aria-disabled="true"{% endif %}
         data-stat="{{ t.id }}" aria-pressed="{{ 'true' if t.on else 'false' }}"><i class="n">{{ t.n if t.n else '' }}</i><span class="l">{{ t.label }}</span><span class="v">{{ t.value if t.value else '—' }}</span></a>
      {%- endfor %}
    </div>
  </details>
  {%- endfor %}
  <p class="hint" id="sp-full"{% if not P.full %} hidden{% endif %}>Twelve is the most any card draws — remove one to add another.</p>
  <p class="hint">What a card <em>starts</em> with lives in <a href="/settings#stamps">Settings → Stamps &amp; recap</a>;
    a <a href="/guide/photos#presets">preset</a> keeps a whole look.</p>
</section>

<section id="post" class="card sp-panel">
  <h3>Post text <a class="more" href="/guide/photos#post-text" title="How the post text is written">📖</a></h3>
  <div class="chips sp-styles" id="sp-styles">
    {%- for s in styles %}{% set c = ctl({'style': s, 'tpl': ''}, 'post') %}
    <a class="chip{{ ' on' if q.style == s and not q.tpl }}" href="{{ c.href }}" data-set="{{ c.data }}" data-style="{{ s }}">{{ style_labels[s] }}</a>
    {%- endfor %}
    <a class="chip{{ ' on' if q.tpl }}" href="#sp-tplfold" data-style="custom" data-open="sp-tplfold">Custom ✎</a>
  </div>
  <textarea id="sp-text" rows="6" spellcheck="true" aria-label="Post text">{{ post.text }}</textarea>
  <p class="sp-meta">
    <button type="button" class="small" id="sp-regen" hidden>↺ regenerate</button>
    <span class="hint sp-count" id="sp-count" data-js hidden></span>
  </p>
  <h4 class="sp-h4">Hashtags <small class="hint"><span id="sp-tagn">{{ post.tags|length }}</span> on<span id="sp-tagwarn"{% if post.tags|length <= 5 %} hidden{% endif %}> · Instagram takes at most 5</span></small></h4>
  <div class="chips sp-tags" id="sp-tags">
    {%- for t in post.tags %}{% set rest = post.tags|reject('equalto', t)|list %}{% set c = ctl({'tags': rest}, 'post') %}
    <a class="chip tag on" href="{{ c.href }}" data-tag="{{ t }}" aria-pressed="true">#{{ t }} <b>✕</b></a>
    {%- endfor %}
    {%- for t in body.suggested %}{% set c = ctl({'tags': post.tags + [t]}, 'post') %}
    <a class="chip tag" href="{{ c.href }}" data-tag="{{ t }}" aria-pressed="false">+#{{ t }}</a>
    {%- endfor %}
  </div>
  <form class="sp-inline" id="sp-tagadd" data-js hidden>
    <input id="sp-tagin" maxlength="41" autocomplete="off" autocapitalize="off" spellcheck="false"
           placeholder="your own hashtag" aria-label="Add a hashtag">
    <button class="chip">Add</button>
  </form>
  <p class="hint">Suggestions are never on until you tap them. <code>{day}</code>, <code>{days}</code> and <code>{year}</code> in a
    hashtag fill in from the event.</p>
  <ul class="sp-warn" id="sp-warn">{% for w in post.warnings %}<li>{{ w }}</li>{% endfor %}</ul>

  <div class="sp-copy">
    <details><summary>Alt text</summary><p id="sp-alt">{{ post.alt }}</p></details>
    <button type="button" class="small" data-copy="alt" data-js hidden>⧉ Copy alt</button>
  </div>
  <div class="sp-copy">
    <details><summary>Content warning</summary><p id="sp-cwtext">{{ post.cw }}</p>
      <form method="get" action="/share#post" class="sp-inline" id="sp-cwform">
        {%- for k, v in hidden_pairs(('cw',)) %}<input type="hidden" name="{{ k }}" value="{{ v }}">{% endfor %}
        <input name="cw" id="sp-cw" maxlength="80" value="{{ q.cw }}" placeholder="{{ post.cw }}" aria-label="Your own content warning">
        <button class="chip">Set</button>
      </form></details>
    <button type="button" class="small" data-copy="cw" data-js hidden>⧉ Copy CW</button>
  </div>
  <ul class="hint sp-hints">{% for h in platform_hints %}<li>{{ h }}</li>{% endfor %}</ul>

  <details class="sp-tplfold" id="sp-tplfold"{% if q.tpl %} open{% endif %}>
    <summary>Edit the template</summary>
    <form method="get" action="/share#post" id="sp-tplform">
      {%- for k, v in hidden_pairs(('tpl',)) %}<input type="hidden" name="{{ k }}" value="{{ v }}">{% endfor %}
      <textarea name="tpl" id="sp-tpl" rows="6" maxlength="600" spellcheck="false" aria-label="Post template">{{ q.tpl or post.template }}</textarea>
      <div class="chips sp-fields">{% for f in fields %}<button type="button" class="chip" data-field="{{ f }}" data-js hidden>{{ '{' ~ f ~ '}' }}</button>{% endfor %}</div>
      <p class="hint">Fields in braces fill in from the card; any stat id from the catalogue works too. A field with nothing
        to say drops its own <code>·</code> segment, and a line that empties is dropped.</p>
      <p><button class="primary small">Use this template</button>
        {% set c = ctl({'tpl': ''}, 'post') %}<a class="chip" href="{{ c.href }}" data-set="{{ c.data }}">back to the style</a></p>
    </form>
  </details>
</section>

<section id="look" class="card sp-panel">
  <h3>Layout <a class="more" href="/guide/photos#layouts" title="Poster, Dense and Check-in">📖</a></h3>
  <div class="sp-layouts">
    {%- for k, label in layouts.items() %}
    {%- if k != 'checkin' or can_checkin %}
    {%- set over = {'layout': k, 'photo': checkin_pick} if (k == 'checkin' and not q.photo and checkin_pick) else {'layout': k} %}
    {%- set c = ctl(over, 'look') %}
    <a class="sp-lay{{ ' on' if q.layout == k }}" href="{{ c.href }}" data-set="{{ c.data }}"><b>{{ label }}</b><small>{{ layout_hints[k] }}</small></a>
    {%- endif %}
    {%- endfor %}
  </div>
  <p class="hint" id="sp-fall"{% if plan.layout == q.layout %} hidden{% endif %}>Drawn as <b>{{ layouts[plan.layout] }}</b>:
    Check-in needs a <em>right now</em> card with a photo, in story or square.</p>

  <h3>Kind</h3>
  <div class="chips">
    {%- for k, label in kinds.items() %}
    {%- if k != 'milestone' or held %}
    {%- set c = ctl({'kind': k, 'stats': none, 'sel': '', 'photo': 0 if k == 'milestone' else q.photo}, 'look') %}
    <a class="chip{{ ' on' if k == plan.kind }}" href="{{ c.href }}" data-set="{{ c.data }}">{{ label }}</a>
    {%- endif %}
    {%- endfor %}
  </div>
  <p class="hint"><strong>Right now</strong> is the live state. <strong>The last stretch</strong> counts a span and prints its
    dates. <strong>One badge</strong> is a record of when something was earned: every number on it is as it stood then.
    {%- if not held %} It appears here once you have earned a badge.{% endif %}</p>

  {% if plan.kind == 'week' %}
  <h4 class="sp-h4">How long</h4>
  <div class="chips">
    {%- for n in [7, 14, 30, 90] %}{% set c = ctl({'days': n}, 'look') %}
    <a class="chip{{ ' on' if n == q.days }}" href="{{ c.href }}" data-set="{{ c.data }}">{{ n }} days</a>
    {%- endfor %}
  </div>
  {% endif %}

  {% if plan.kind == 'milestone' %}
  <h4 class="sp-h4">Which badge</h4>
  <div class="chips trophies">
    {%- for b in held %}{% set c = ctl({'badge': b.id}, 'look') %}
    <a class="chip trophy{{ ' on' if (plan.badge and b.id == plan.badge.id) }}" href="{{ c.href }}" data-set="{{ c.data }}" title="{{ b.detail }}">
      <b class="rar rar-{{ rarity[b.id] }}">◆</b> {{ b.title }} <small>{{ b.awarded_at|local('%Y-%m-%d') }}</small></a>
    {%- endfor %}
  </div>
  <p class="hint">The card is drawn in the badge's own metal —
    <span class="rar rar-common">◆</span> common, <span class="rar rar-uncommon">◆</span> uncommon,
    <span class="rar rar-rare">◆</span> rare, <span class="rar rar-epic">◆</span> epic,
    <span class="rar rar-legendary">◆</span> legendary.</p>
  {% endif %}

  <h3>Theme</h3>
  <div class="chips" id="sp-themes">
    {%- for t in themes %}{% set c = ctl({'theme': t.name}, 'look') %}
    <a class="chip{{ ' on' if t.name == q.theme }}" href="{{ c.href }}" data-set="{{ c.data }}" data-blurb="{{ t.blurb }}">{{ t.label }}</a>
    {%- endfor %}
  </div>
  <p class="hint" id="sp-blurb">{% for t in themes if t.name == q.theme %}{{ t.blurb }}{% endfor %}</p>

  <h3>Shape</h3>
  <div class="chips">
    {%- for s in shapes %}{% set c = ctl({'shape': s}, 'look') %}
    <a class="chip{{ ' on' if s == q.shape }}" href="{{ c.href }}" data-set="{{ c.data }}">{{ s }}</a>
    {%- endfor %}
  </div>
  <p class="hint"><strong>story</strong> 9:16 · <strong>square</strong> 1:1 · <strong>wide</strong> 1.91:1 for a link preview,
    stats only.</p>

  <div id="sp-sealrow"{% if not (plan.seal or plan.seal_why == 'off') %} hidden{% endif %}>
    <h3>Event stamp <a class="more" href="/guide/photos#the-event-stamp" title="What the stamp says">📖</a></h3>
    <div class="chips">
      {%- set c = ctl({'seal': 1}, 'look') %}<a class="chip{{ ' on' if q.seal }}" href="{{ c.href }}" data-set="{{ c.data }}">on</a>
      {%- set c = ctl({'seal': 0}, 'look') %}<a class="chip{{ ' on' if not q.seal }}" href="{{ c.href }}" data-set="{{ c.data }}">off</a>
    </div>
    <p class="hint">A drawn stamp naming the event and the day — on a photo, the day the shutter fired.</p>
  </div>

  <h3>Badges</h3>
  {% if plan.kind in ('milestone', 'week') %}
  <p class="hint">This card already shows badges — the ones
    {{ 'earned in the window' if plan.kind == 'week' else 'you hold besides the one on the card' }}.</p>
  {% elif can_badges %}
  <div class="chips">
    {%- set c = ctl({'badges': 1}, 'look') %}<a class="chip{{ ' on' if q.badges }}" href="{{ c.href }}" data-set="{{ c.data }}">🏅 show badges</a>
    {%- set c = ctl({'badges': 0}, 'look') %}<a class="chip{{ ' on' if not q.badges }}" href="{{ c.href }}" data-set="{{ c.data }}">show recent events</a>
  </div>
  <p class="hint">Without a photo, the lower half carries your badges or the events that moved the clock most.</p>
  {% else %}
  <p class="hint">No badges yet. Until then the lower half carries the events that moved the clock most.</p>
  {% endif %}

  <details class="sp-manage" id="sp-manage" data-js hidden>
    <summary>Manage presets <small>{{ user_presets|length }}</small></summary>
    <ul class="sp-mlist" id="sp-mlist">
      {%- for it in user_presets %}
      <li data-preset="{{ it.id }}" data-name="{{ it.name }}" data-default="{{ 1 if it.is_default else 0 }}">
        <span class="l">{% if it.is_default %}★ {% endif %}{{ it.name }}</span>
        <button type="button" class="small" data-mact="rename">✎ rename</button>
        <button type="button" class="small" data-mact="default">{{ '☆ unstar' if it.is_default else '★ default' }}</button>
        <button type="button" class="small danger" data-mact="delete">✕</button>
      </li>
      {%- else %}
      <li class="hint">No presets yet — set the card up, then ＋ Save at the top.</li>
      {%- endfor %}
    </ul>
    <p class="hint">The ★ default is what a bare Share page and the dashboard's 📤 open on. A preset keeps the stats, the
      look and the post style — never a photo or a location.</p>
  </details>
</section>

<section id="photo" class="card sp-panel">
  <h3>Photo</h3>
  {% if plan.kind == 'milestone' %}
  <p class="hint">A milestone card takes no photograph, on purpose. Its numbers are already as-of the day the badge was
    earned, and a picture from a third date is one moment more than anybody can keep straight.</p>
  {% elif q.shape == 'wide' %}
  <p class="hint">The wide shape is too short to carry a picture without cropping it to a sliver, so it carries stats only.
    Switch to story or square for a photo.</p>
  {% else %}
  <div class="chips">{% set c = ctl({'photo': 0, 'place': 0}, 'photo') %}<a class="chip{{ ' on' if not q.photo }}" href="{{ c.href }}" data-set="{{ c.data }}">no photo</a></div>
  {% if photos %}
  <div class="thumbs">
    {%- for m in photos %}
    {%- set has_place = m.place_src %}{% set c = ctl({'photo': m.id, 'place': q.place if has_place else 0}, 'photo') %}
    <a class="thumb{{ ' on' if m.id == q.photo }}" href="{{ c.href }}" data-set="{{ c.data }}"
       title="{{ instant(m)|local }}{{ ' · has location' if has_place else '' }}">
      <img src="/media/{{ m.id }}/thumb" alt="" loading="lazy">
      {%- if m.assignment_id %}<span class="tag">training</span>{% endif %}
      {%- if has_place %}<span class="tag pin">◉</span>{% endif %}
      {%- if m.ev %}<span class="tag ev">{{ m.ev.sign }} {{ m.ev.day }}</span>{% endif %}
    </a>
    {%- endfor %}
  </div>
  <p class="hint">Newest first. The card burns the photo's <strong>own</strong> date and time into it — on a Check-in card that
    moment is the whole card's; otherwise the stats around it are from now, and the card says which is which.</p>
  {% else %}
  <p class="hint">No photos yet. Verify a task with a picture, or use 📸 on the dashboard.</p>
  {% endif %}
  {% if q.photo %}
  <h4 class="sp-h4">Location</h4>
  {% if chosen_photo and chosen_photo.place_src %}
  <div class="chips">
    {%- set c = ctl({'place': 1}, 'photo') %}<a class="chip{{ ' on' if q.place }}" href="{{ c.href }}" data-set="{{ c.data }}">◉ include place</a>
    {%- set c = ctl({'place': 0}, 'photo') %}<a class="chip{{ ' on' if not q.place }}" href="{{ c.href }}" data-set="{{ c.data }}">no place</a>
  </div>
  <p class="hint">Already rounded when the photo was saved — it cannot be sharpened back. Change how coarse in
    <a href="/settings">Settings</a>. Never in the post text.</p>
  {% else %}
  <p class="hint">This photo has no location — nothing to include.</p>
  {% endif %}
  {% endif %}
  {% endif %}
</section>

</div>
<p class="hint sp-foot">Nothing is uploaded anywhere — the card is drawn on this box and handed to you.</p>
<div id="latch-toast" class="toast" role="status" aria-live="polite" hidden></div>
{#- What share.js repaints from — the same body /share/text.json answers. `tojson` escapes
    < > & ' so the block cannot close itself; it is data, never executed. -#}
<script type="application/json" id="sp-data">{{ body|tojson }}</script>
</div>
{% endblock %}
{% block scripts %}<script src="/static/share.js"></script>{% endblock %}