{% extends "base.html" %}
{% block title %}{{ v.name }} · Kennel Card · {{ app_name }}{% endblock %}
{% block body %}
<h1>🔗 {{ v.name }} <small class="hint"><a href="/kennel-card">← Kennel Card</a></small></h1>

<section class="card" id="link">
  <h2>Its link</h2>
  {%- if url %}
  <p><code>{{ url }}</code></p>
  <div class="kc-qr" style="max-width:180px;background:#fff;border-radius:8px">{{ qr|safe }}</div>
  {%- else %}
  <p>It will live at <code>/k/{{ v.token }}/</code> on wherever you host the site.
    <a href="/kennel-card#where">Set where</a> to see its full link and a QR code.</p>
  {%- endif %}
  <div class="row">
    <a class="btn primary" href="/kennel-card/view/{{ v.id }}/preview/" target="_blank" rel="noopener">Preview it as a stranger sees it ↗</a>
    <form method="post" action="/kennel-card/view/{{ v.id }}/rotate" class="inline"
          onsubmit="return confirm('Make a new link? Anybody with the old one loses it once you publish again.')">
      <input type="hidden" name="_t" value="{{ form_token('kennelcard.view.rotate') }}"><button>New link</button></form>
    <form method="post" action="/kennel-card/view/{{ v.id }}/delete" class="inline"
          onsubmit="return confirm('Delete this view? Its link stops working once you publish again.')">
      <input type="hidden" name="_t" value="{{ form_token('kennelcard.view.delete') }}"><button class="danger">Delete view</button></form>
  </div>
</section>

<form method="post" action="/kennel-card/view/{{ v.id }}" class="stack">
<input type="hidden" name="_t" value="{{ form_token('kennelcard.view') }}">

<section class="card" id="blocks">
  <h2>What this view shows</h2>
  <label>Name (only you see it) <input name="name" value="{{ v.name }}" maxlength="60" required></label>
  {%- for key, (icon, title, says) in blocks.items() %}
  {%- if key not in ("toybox", "wishlist") or kit_on %}
  <label class="check"><input type="checkbox" name="block" value="{{ key }}" {{ 'checked' if key in v.blocks_l }}>
    {{ icon }} <b>{{ title }}</b> <small class="hint">{{ says }}</small></label>
  {%- endif %}
  {%- endfor %}
  {%- if not tag.name %}<p class="hint">Your Tag has no name yet — <a href="/kennel-card#tag">give it one</a>.</p>{% endif %}
</section>

<section class="card" id="leash">
  <h2>🦮 Links on this view</h2>
  {%- for ln in links %}
  <label class="check"><input type="checkbox" name="pick" value="link:{{ ln.id }}" {{ 'checked' if ('link:' ~ ln.id) in picked }}>
    {{ ln.glyph }} {{ ln.shown }} <small class="hint">{{ ln.url }}</small></label>
  {%- else %}<p class="hint">No links yet — <a href="/kennel-card#leash">add some</a>.</p>{%- endfor %}
</section>

{%- if kit_on %}
{%- for sec, heading, empty in [("toybox", "🦴 Toy box", "No toys or gear in your kit yet."), ("wishlist", "✨ Wishlist", "Nothing on your wishlist — mark a kit item ✨ wishlist and it shows up here.")] %}
<section class="card" id="{{ sec }}">
  <h2>{{ heading }} <small class="hint">tick the item, then any of its photos</small></h2>
  {%- for it in cand[sec] %}
  {%- set f = faces.get(it.uid) %}
  <div class="kc-pick">
    <label class="check"><input type="checkbox" name="pick" value="kit:{{ it.uid }}" {{ 'checked' if ('kit:' ~ it.uid) in picked }}>
      {{ it.cat_icon }} <b>{{ it.name }}</b> <small class="hint">{{ it.cat_title }}{% if it.status == 'retired' %} · retired{% endif %}</small></label>
    <a class="small" href="/kennel-card/item/{{ it.uid }}">{{ 'edit what strangers read' if f else 'write what strangers read' }}</a>
    {%- if f %}<small class="hint">{% if f.blurb %}✍ blurb{% endif %}{% if f.shop_url %} · 🛒 shop{% if f.referral %} (referral){% endif %}{% endif %}{% if f.show_specs %} · 📏 specs{% endif %}{% if f.show_price %} · 💲 price{% endif %}{% if f.favourite %} · ⭐{% endif %}</small>{% endif %}
    {%- if it.photos %}
    <div class="row wrap">
      {%- for m in it.photos %}
      <label class="check"><input type="checkbox" name="pick" value="photo:{{ m.uid }}" {{ 'checked' if ('photo:' ~ m.uid) in picked }}>
        <img src="/media/{{ m.id }}/thumb" alt="photo of {{ it.name }}" width="64" height="64" loading="lazy"></label>
      {%- endfor %}
    </div>
    {%- endif %}
  </div>
  {%- else %}<p class="hint">{{ empty }}</p>{%- endfor %}
</section>
{%- endfor %}
{%- endif %}

<p><button class="primary">Save this view</button>
  <small class="hint">Saving changes this box only. Download the site again to publish it.</small></p>
</form>
{% endblock %}