{% extends "shared/layout.html" %}
{% load shared static pagination %}
{% block head %}
  {% with page_title="Tags - Linkding" %}{{ block.super }}{% endwith %}
{% endblock %}
{% block content %}
  <div class="tags-page crud-page">
    <turbo-frame id="tag-main">
    <main aria-labelledby="main-heading">
      <div class="crud-header">
        <h1 id="main-heading">Tags</h1>
        <div class="d-flex gap-2 ml-auto">
          <a href="{% url 'linkding:tags.new' %}"
             data-turbo-frame="tag-modal"
             class="btn">Create Tag</a>
          <a href="{% url 'linkding:tags.merge' %}"
             data-turbo-frame="tag-modal"
             class="btn">Merge Tags</a>
        </div>
      </div>
      {% include 'shared/messages.html' %}
      {# Filters #}
      <div class="crud-filters">
        <ld-form data-form-reset>
          <form method="get" class="mb-2" data-turbo-frame="_top">
            <div class="form-group">
              <label class="form-label text-assistive" for="search">Search tags</label>
              <div class="input-group">
                <input type="text"
                       id="search"
                       name="search"
                       value="{{ search }}"
                       placeholder="Search tags..."
                       class="form-input">
                <button type="submit" class="btn input-group-btn">Search</button>
              </div>
            </div>
            <div class="form-group">
              <label class="form-label text-assistive" for="sort">Sort by</label>
              <div class="input-group">
                <span class="input-group-addon text-secondary">
                  <svg width="20" height="20">
                    <use href="{% static 'icons.svg' %}?v={{ app_version }}#sort"></use>
                  </svg>
                </span>
                <select id="sort" name="sort" class="form-select" data-submit-on-change>
                  <option value="name-asc" {% if sort == "name-asc" %}selected{% endif %}>Name A-Z</option>
                  <option value="name-desc" {% if sort == "name-desc" %}selected{% endif %}>Name Z-A</option>
                  <option value="count-asc" {% if sort == "count-asc" %}selected{% endif %}>Fewest bookmarks</option>
                  <option value="count-desc" {% if sort == "count-desc" %}selected{% endif %}>Most bookmarks</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <label class="form-checkbox">
                <input type="checkbox"
                       name="unused"
                       value="true"
                       {% if unused_only %}checked{% endif %}
                       data-submit-on-change>
                <i class="form-icon"></i> Show only unused tags
              </label>
            </div>
          </form>
        </ld-form>
        {# Tags count #}
        <p class="text-secondary text-small m-0">
          {% if search or unused_only %}
            Showing {{ page.paginator.count }} of {{ total_tags }} tags
          {% else %}
            {{ total_tags }} tags total
          {% endif %}
        </p>
      </div>
      {# Tags List #}
      {% if page.object_list %}
        <form method="post">
          {% csrf_token %}
          <table class="table crud-table">
            <thead>
              <tr>
                <th>Name</th>
                <th style="width: 25%">Bookmarks</th>
                <th class="actions">
                  <span class="text-assistive">Actions</span>
                </th>
              </tr>
            </thead>
            <tbody>
              {% for tag in page.object_list %}
                <tr>
                  <td>{{ tag.name }}</td>
                  <td style="width: 25%">
                    <a class="btn btn-link"
                       href="{% url 'linkding:bookmarks.index' %}?q=%23{{ tag.name|urlencode }}">
                      {{ tag.bookmark_count }}
                    </a>
                  </td>
                  <td class="actions">
                    <a class="btn btn-link"
                       href="{% url 'linkding:tags.edit' tag.id %}?{{ request.GET.urlencode }}"
                       data-turbo-frame="tag-modal">Edit</a>
                    <button type="submit"
                            name="delete_tag"
                            value="{{ tag.id }}"
                            class="btn btn-link text-error"
                            data-confirm>Remove</button>
                  </td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </form>
        {% pagination page %}
      {% else %}
        <div class="empty">
          {% if search or unused_only %}
            <p class="empty-title h5">No tags found</p>
            <p class="empty-subtitle">Try adjusting your search or filters</p>
          {% else %}
            <p class="empty-title h5">You have no tags yet</p>
            <p class="empty-subtitle">Tags will appear here when you add bookmarks with tags</p>
          {% endif %}
        </div>
      {% endif %}
    </main>
    <turbo-frame id="tag-modal"></turbo-frame>
    </turbo-frame>
  </div>
{% endblock %}
