{% comment %}
The refreshable half of the tags page. The list page renders this inline; every
mutation's toast_response carries a `tagsChanged` HX-Trigger, and this container
answers it by re-fetching itself from `contacts:tag_rows` — a view that renders
this template alone. Fetching the full page and picking one div out of it with
hx-select also works, and costs a whole shell render (sidebar, workspace
switcher, every context-processor query) per keystroke-sized edit.

The root element's id, hx-get, hx-trigger and hx-swap="outerHTML" are that seam
and must stay on it: this file is what replaces itself, so moving any of the four
onto a child breaks every refresh silently — the toast still fires and the list
simply never updates.

Three forms per row became one named action and a "…". Renaming is what people
come here for. Merging is the repair for two tags that mean the same thing — a
data-quality problem the case-insensitive unique index cannot catch, because
"VIP" and "Priority" are distinct strings and one idea — and it belongs behind
the menu with the other twice-a-year action.
{% endcomment %}
<div id="tag-rows"
     hx-get="{% url 'contacts:tag_rows' workspace_id=request.workspace.id %}"
     hx-trigger="tagsChanged from:body"
     hx-swap="outerHTML">
  {% if tags %}
  <div class="card overflow-hidden">
    {% for tag in tags %}
    <div class="list-row flex-wrap" x-data="{ ...bbRowMenu(), renaming: false, merging: false }">
      <span class="list-row-icon">{% include "partials/_nav_icon.html" with name="tag" icon_size=19 %}</span>

      <div class="flex-1 min-w-0">
        <div class="list-row-title truncate">{{ tag.name }}</div>
        <div class="list-row-meta">On {{ tag.contact_count }} contact{{ tag.contact_count|pluralize }}</div>
      </div>

      <button type="button" class="btn-pill-secondary btn-pill-sm flex-shrink-0" @click="renaming = true; merging = false; $nextTick(() => $refs.name.focus())">Rename</button>

      <button type="button" class="btn-icon-round flex-shrink-0" @click="openMenu($event)" aria-haspopup="menu" :aria-expanded="menuOpen ? 'true' : 'false'" aria-label="More actions for {{ tag.name }}">
        <svg width="17" height="17" fill="currentColor" stroke="none" viewBox="0 0 24 24" aria-hidden="true"><circle cx="5" cy="12" r="1.7"/><circle cx="12" cy="12" r="1.7"/><circle cx="19" cy="12" r="1.7"/></svg>
      </button>

      <div x-show="menuOpen" x-cloak @click.away="menuOpen = false" :style="`top:${menuTop}px; left:${menuLeft}px;`" class="row-menu-panel fixed z-50 w-[200px]" role="menu">
        <button type="button" class="row-menu-item" role="menuitem" @click="merging = true; renaming = false; menuOpen = false">Merge into another tag…</button>
        <div class="row-menu-sep"></div>
        <button type="button" class="row-menu-item row-menu-item-danger" role="menuitem" hx-post="{% url 'contacts:tag_delete' workspace_id=request.workspace.id tag_id=tag.id %}" hx-confirm="Delete “{{ tag.name }}”? It will be removed from {{ tag.contact_count }} contact{{ tag.contact_count|pluralize }}." @click="menuOpen = false">Delete</button>
      </div>

      {% comment %}
        Full-width and ordered last, so an open editor drops onto its own line
        under the row rather than colliding with the action buttons.
      {% endcomment %}
      <form x-show="renaming" x-cloak class="w-full order-last flex flex-wrap items-center gap-2 pt-3" hx-post="{% url 'contacts:tag_rename' workspace_id=request.workspace.id tag_id=tag.id %}" @htmx:after-request="if (bbChanged($event, 'tagsChanged')) renaming = false">
        <label class="sr-only" for="tag-name-{{ tag.id }}">Name</label>
        <input class="form-input-styled" id="tag-name-{{ tag.id }}" x-ref="name" type="text" name="name" value="{{ tag.name }}" maxlength="100" required style="width: 16rem;">
        <button type="submit" class="btn-pill-secondary btn-pill-sm">Save</button>
        <button type="button" class="btn-pill-secondary btn-pill-sm" @click="renaming = false">Cancel</button>
      </form>

      <form x-show="merging" x-cloak class="w-full order-last flex flex-wrap items-center gap-2 pt-3" hx-post="{% url 'contacts:tag_merge' workspace_id=request.workspace.id tag_id=tag.id %}" hx-confirm="Merge “{{ tag.name }}” into the chosen tag? “{{ tag.name }}” is deleted and its {{ tag.contact_count }} contact{{ tag.contact_count|pluralize }} keep the other one." @htmx:after-request="if (bbChanged($event, 'tagsChanged')) merging = false">
        <label class="sr-only" for="tag-merge-{{ tag.id }}">Merge {{ tag.name }} into</label>
        <select class="form-input-styled bb-select" id="tag-merge-{{ tag.id }}" name="target_id" required style="width: 16rem;">
          <option value="">Choose a tag…</option>
          {% for other in tags %}{% if other.id != tag.id %}<option value="{{ other.id }}">{{ other.name }}</option>{% endif %}{% endfor %}
        </select>
        <button type="submit" class="btn-pill-secondary btn-pill-sm">Merge</button>
        <button type="button" class="btn-pill-secondary btn-pill-sm" @click="merging = false">Cancel</button>
      </form>
    </div>
    {% endfor %}
  </div>
  {% else %}
  {% comment %}
    .btn-pill-secondary, not primary: the header already holds this screen's one
    primary action. It opens the same modal as the header's, by id.
  {% endcomment %}
  <div class="empty-state">
    <p class="empty-state-title">No tags yet</p>
    <p class="empty-state-body">
      A tag is how a flow says "this person asked about pricing", so a filter can find them again
      later.
    </p>
    <button type="button" class="btn-pill-secondary mt-4" @click="$modal('new-tag')">New tag</button>
  </div>
  {% endif %}
</div>