  {% import '_types/blog/_card/tag.html' as dotag %}
 
  {# Tag filter bar #}
    <nav class="max-w-3xl mx-auto px-4 pb-4 flex flex-wrap gap-2 text-sm">
      <ul class="divide-y flex flex-col gap-3">
        <li>
          {% set is_on = (selected_tags | length == 0) %}
          {% set href =
            {
            'remove_tag': selected_tags,
            }|qs|host %}
          <a
            class="px-3 py-1 rounded border {% if is_on %}bg-stone-900 text-white border-stone-900{% else %}bg-white text-stone-600 border-stone-300 hover:bg-stone-50{% endif %}"
            href="{{ href }}"
            hx-get="{{ href }}"
            hx-target="#main-panel"
            hx-select="{{hx_select_search}}"
            hx-swap="outerHTML"
            hx-push-url="true"
          >
            Any Tag
          </a>
        </li>

        {% for tag in tags %}
          <li>
            {% set is_on = (selected_tags and (tag.slug in selected_tags)) %}
            {% set qs = {"remove_tag": tag.slug, "page":None}|qs if is_on
                        else {"add_tag": tag.slug, "page":None}|qs %}
            {% set href = qs|host %}
            <a
              class="flex items-center gap-2 px-3 py-1 rounded border {% if is_on %}bg-stone-900 text-white border-stone-900{% else %}bg-white text-stone-600 border-stone-300 hover:bg-stone-50{% endif %}"
              href="{{ href }}"
              hx-get="{{ href }}"
              hx-target="#main-panel"
              hx-select="{{hx_select_search}}"
              hx-swap="outerHTML"
              hx-push-url="true"
            >

              {{dotag.tag(tag)}}
              
              {% if False and tag.description %}
                <span class="flex-1 inline-block bg-stone-100 text-stone-600 px-2 py-1 text-xs font-medium border border-stone-200">
                  {{ tag.description }}
                </span>
              {% else %}
                <span class="flex-1"></span>
              {% endif %}
              <span class="inline-block bg-stone-100 text-stone-600 px-2 py-1 text-xs font-medium border border-stone-200">
                {{ tag.published_post_count }}
              </span>
            </a>
          </li>
        {% endfor %}

      </ul>
    </nav>

