{% extends "base.html" %}
{% import "_macros.html" as m %}
{% block title %}Tags — rosbackup-ng{% endblock %}
{% block page_title %}Tags{% endblock %}
{% block content %}
<div class="card">
  <p class="muted">Rename a tag to update it across every device at once; delete to strip it from
    all of them. New tags are created on the device form.</p>
  {% if tags %}
  <div class="filters">
    <select data-list-filter=".tag-grid .tag-tile[data-filter-name]" aria-label="Filter by tag">
      <option value="">All tags ({{ tags|length }})</option>
      {% for t in tags %}<option value="{{ t.name }}">{{ t.name }}</option>{% endfor %}
    </select>
  </div>
  <div class="tag-grid">
    {% for t in tags %}
    <div class="tag-tile" data-filter-name="{{ t.name }}">
      <form method="post" action="/ui/tags/{{ t.name|urlencode }}/rename" class="tag-rename">
        <input type="hidden" name="csrf_token" value="{{ request.state.session.csrf_token }}">
        <input type="text" name="new_name" value="{{ t.name }}" aria-label="Rename tag {{ t.name }}"
               autocomplete="off" title="Edit to rename, press Enter to save">
      </form>
      {% set gs = tag_groups.get(t.name, []) %}
      {% if gs %}<span class="tag-groups">{% for g in gs[:2] %}<a class="chip group" href="/targets?group={{ g|urlencode }}" title="Group {{ g }}">{{ g }}</a>{% endfor %}{% if gs|length > 2 %}<span class="chip more" title="{{ gs[2:]|join(', ') }}">+{{ gs|length - 2 }}</span>{% endif %}</span>{% endif %}
      <a class="tag-count" href="/targets?tag={{ t.name|urlencode }}" title="{{ t.count }} device(s)">{{ t.count }}</a>
      {{ m.icon_delete('/ui/tags/' ~ (t.name|urlencode) ~ '/delete', 'Delete tag “' ~ t.name ~ '” from all devices?', 'Delete') }}
    </div>
    {% endfor %}
  </div>
  {% else %}
  <p class="muted">No tags yet — add tags to a device to see them here.</p>
  {% endif %}
</div>
{% endblock %}