<div class="space-y-6 pb-10" data-library-ssr-fallback>
  <section class="gobii-card-base px-6 py-6 sm:px-8">
    <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
      <div class="space-y-2">
        <p class="text-xs font-semibold uppercase tracking-[0.14em] text-indigo-700">Discover</p>
        <h1 class="text-2xl font-semibold tracking-tight text-slate-900 sm:text-3xl">
          {% if selected_category %}{{ selected_category }} AI agent templates{% else %}Most popular shared Gobii agents{% endif %}
        </h1>
        <p class="max-w-3xl text-sm text-slate-600 sm:text-base">
          {% if selected_category %}Browse publicly shared {{ selected_category }} agents from across Gobii.{% else %}Browse publicly shared agents from across Gobii.{% endif %}
        </p>
        {% if not user.is_authenticated %}
          <p class="text-sm font-medium text-indigo-700">Sign in to like templates.</p>
        {% endif %}
      </div>
      <div class="flex flex-wrap items-center gap-2">
        <div class="inline-flex items-center gap-2 rounded-full border border-indigo-100 bg-indigo-50 px-4 py-2 text-sm font-semibold text-indigo-800">
          {{ payload.libraryTotalAgents }} shared agents
        </div>
        <div class="inline-flex items-center gap-2 rounded-full border border-rose-100 bg-rose-50 px-4 py-2 text-sm font-semibold text-rose-700">
          {{ payload.libraryTotalLikes }} likes
        </div>
      </div>
    </div>
  </section>

  <section class="grid gap-6 md:grid-cols-[16rem_minmax(0,1fr)]">
    <aside class="hidden md:block">
      <div class="gobii-card-base sticky top-24 space-y-4 p-4">
        <div>
          <p class="mb-2 text-xs font-semibold uppercase tracking-[0.12em] text-indigo-700">Most Popular</p>
          <div class="flex w-full items-center justify-between rounded-lg border border-indigo-600 bg-indigo-600 px-3 py-2 text-sm font-semibold text-white">
            <span>Most Popular</span>
            <span class="rounded-full bg-indigo-500 px-2 py-0.5 text-xs text-white">{{ payload.libraryTotalAgents }}</span>
          </div>
        </div>

        {% if payload.topCategories %}
          <div>
            <p class="mb-3 text-xs font-semibold uppercase tracking-[0.12em] text-indigo-700">Categories</p>
            <div class="space-y-2">
              {% for category in payload.topCategories %}
                <div class="flex w-full items-center justify-between rounded-lg border border-indigo-100 bg-white px-3 py-2 text-sm font-semibold text-slate-700">
                  <span>{{ category.name }}</span>
                  <span class="rounded-full bg-indigo-50 px-2 py-0.5 text-xs text-indigo-700">{{ category.count }}</span>
                </div>
              {% endfor %}
            </div>
          </div>
        {% endif %}
      </div>
    </aside>

    <div class="space-y-4">
      {% if payload.agents %}
        <div class="space-y-3">
          {% for agent in payload.agents %}
            <article class="group relative overflow-hidden rounded-lg border border-slate-200 bg-white px-5 py-4 transition hover:border-indigo-200 hover:bg-indigo-50/30 focus-within:border-indigo-400 focus-within:ring-2 focus-within:ring-indigo-500/20">
              <div class="pointer-events-none relative z-10 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
                <div class="min-w-0 flex-1 space-y-3">
                  <div class="flex flex-wrap items-center gap-2 text-xs font-semibold text-indigo-700">
                    <span class="inline-flex items-center gap-2 rounded-full bg-indigo-50 px-2.5 py-1">
                      <span class="size-2 rounded-full bg-indigo-400" aria-hidden="true"></span>
                      {{ agent.category }}
                    </span>
                    <span class="text-slate-500">@{{ agent.publicProfileHandle }}</span>
                  </div>

                  <div class="space-y-1">
                    <h2 class="text-base font-semibold text-slate-900 transition group-hover:text-indigo-700 sm:text-lg">
                      <a href="{{ agent.templateUrl }}" class="pointer-events-auto rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/30">
                        {{ agent.name }}
                      </a>
                    </h2>
                    {% if agent.tagline %}
                      <p class="text-sm font-medium text-slate-700">{{ agent.tagline }}</p>
                    {% endif %}
                  </div>
                </div>

                <div class="flex items-center justify-between gap-3 sm:flex-col sm:items-end sm:self-stretch">
                  <span class="pointer-events-none inline-flex items-center gap-1 rounded-full border border-rose-100 bg-rose-50 px-2.5 py-1 text-xs font-semibold text-rose-700">
                    <span>{{ agent.likeCount }}</span>
                  </span>
                  <span class="pointer-events-none inline-flex items-center gap-1 text-sm font-medium text-indigo-600 transition group-hover:text-indigo-700">
                    View details
                    <span aria-hidden="true">-&gt;</span>
                  </span>
                </div>
              </div>
            </article>
          {% endfor %}
        </div>
      {% else %}
        <div class="gobii-card-base p-8 text-center">
          <p class="text-sm font-semibold text-slate-800">No shared agents found right now.</p>
          <p class="mt-1 text-sm text-slate-600">Check back soon for newly shared agents.</p>
        </div>
      {% endif %}
    </div>
  </section>
</div>
