   {% import '_types/blog/_card/author.html' as doauthor %}

  {# Author 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_authors | length == 0) %}
          {% set href =
            {
            'remove_author': selected_authors,
            }|qs
          |host %}
          <a
            class="px-3 py-1 rounded {% 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 author
          </a>
        </li>

        {% for author in authors %}
          <li>
            {% set is_on = (selected_authors and (author.slug in selected_authors)) %}
            {% set qs = {"remove_author": author.slug, "page":None}|qs if is_on
                        else {"add_author": author.slug, "page":None}|qs %}
            {% set href = qs|host %}
            <a
              class="flex items-center gap-2 px-3 py-1 rounded {% 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"
            >

              {{doauthor.author(author)}}
              {% if False and author.bio %}
                <span class="inline-block flex-1 bg-stone-100 text-stone-600 px-2 py-1 text-xs font-medium border border-stone-200">
                  {% if author.bio|length > 50 %}
                    {{ author.bio[:50] ~ "…" }}
                  {% else %}
                    {{ author.bio }}
                  {% endif %}
                </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">
                {{ author.published_post_count }}
              </span>
            </a>
          </li>
        {% endfor %}
      </ul>
    </nav>

