{% if items %}
<div class="flex justify-between items-center mb-2 text-xs">
  <div>Showing {{ offset + 1 }}–{{ (offset + items|length) }} of {{ total }}</div>
  <div class="flex gap-2">
    {% if prev_offset is not none %}
    <button hx-get="/themes/fragment/list_simple?offset={{ prev_offset }}&limit={{ limit }}" hx-target="#theme-results" hx-swap="innerHTML" class="btn btn-ghost text-[11px] px-2 py-0.5">« Prev</button>
    {% else %}<button disabled class="btn btn-ghost opacity-30 text-[11px] px-2 py-0.5">« Prev</button>{% endif %}
    {% if next_offset is not none %}
    <button hx-get="/themes/fragment/list_simple?offset={{ next_offset }}&limit={{ limit }}" hx-target="#theme-results" hx-swap="innerHTML" class="btn btn-ghost text-[11px] px-2 py-0.5">Next »</button>
    {% else %}<button disabled class="btn btn-ghost opacity-30 text-[11px] px-2 py-0.5">Next »</button>{% endif %}
  </div>
</div>
<ul class="list-none p-0 m-0 flex flex-col gap-2.5">
  {% for it in items %}
  <li class="theme-list-card">
    <div class="flex justify-between items-start gap-2">
      <a href="/themes/{{ it.id }}" class="font-semibold text-sm no-underline text-[var(--text)]">{{ it.theme }}</a>
      <div class="flex gap-1">
        {% if show_theme_quality_badges and it.quality_tier %}
          <span class="theme-badge badge-quality-{{ it.quality_tier|lower }}" title="Quality: {{ it.quality_tier }} ({{ (it.quality_score * 100)|round|int }}%)">{{ it.quality_tier[0]|upper }}</span>
        {% endif %}
        {% if show_theme_pool_badges and it.pool_tier %}
          <span class="theme-badge badge-pool-{{ it.pool_tier|lower }}" title="Pool: {{ it.pool_tier }} (~{{ it.pool_size }} cards)">{{ it.pool_tier[0]|upper }}</span>
        {% endif %}
        {% if show_theme_popularity_badges and it.popularity_bucket %}
          <span class="theme-badge {% if it.popularity_bucket=='Very Common' %}badge-pop-vc{% elif it.popularity_bucket=='Common' %}badge-pop-c{% elif it.popularity_bucket=='Uncommon' %}badge-pop-u{% elif it.popularity_bucket=='Niche' %}badge-pop-n{% elif it.popularity_bucket=='Rare' %}badge-pop-r{% endif %}" title="Popularity: {{ it.popularity_bucket }}">{{ it.popularity_bucket }}</span>
        {% endif %}
      </div>
    </div>
    {% if it.short_description %}<div class="text-xs opacity-85 mt-0.5">{{ it.short_description }}</div>{% endif %}
  </li>
  {% endfor %}
</ul>
<div class="flex justify-between items-center mt-3 text-xs">
  <div>Showing {{ offset + 1 }}–{{ (offset + items|length) }} of {{ total }}</div>
  <div class="flex gap-2">
    {% if prev_offset is not none %}
    <button hx-get="/themes/fragment/list_simple?offset={{ prev_offset }}&limit={{ limit }}" hx-target="#theme-results" hx-swap="innerHTML" class="btn btn-ghost text-[11px] px-2 py-0.5">« Prev</button>
    {% else %}<button disabled class="btn btn-ghost opacity-30 text-[11px] px-2 py-0.5">« Prev</button>{% endif %}
    {% if next_offset is not none %}
    <button hx-get="/themes/fragment/list_simple?offset={{ next_offset }}&limit={{ limit }}" hx-target="#theme-results" hx-swap="innerHTML" class="btn btn-ghost text-[11px] px-2 py-0.5">Next »</button>
    {% else %}<button disabled class="btn btn-ghost opacity-30 text-[11px] px-2 py-0.5">Next »</button>{% endif %}
  </div>
</div>
{% else %}
  {% if total == 0 %}
    <div class="empty text-xs">No themes found.</div>
  {% else %}
    <div class="flex flex-col gap-2">
      {% for i in range(8) %}<div class="h-12 rounded-lg skeleton-shimmer"></div>{% endfor %}
    </div>
  {% endif %}
{% endif %}
<style>
@keyframes shimmer {0%{background-position:0 0;}100%{background-position:-200% 0;}}
.skeleton-shimmer { background:linear-gradient(90deg,var(--panel-alt) 25%,var(--hover) 50%,var(--panel-alt) 75%); background-size:200% 100%; animation:shimmer 1.2s ease-in-out infinite; }
.theme-list-card { background:var(--panel); padding:0.6rem 0.75rem; border:1px solid var(--border); border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,0.2); transition:background-color 0.15s ease; }
.theme-list-card:hover { background:var(--hover); }
</style>