{% extends "base.html" %}
{% block content %}

  <!-- Top tag row -->
  {% if tags_all %}
  <div class="mb-4 overflow-x-auto">
    <div class="flex items-center gap-2 min-w-max">
      {% for t in tags_all %}
        {% set name = t.name if t.name is defined else t['name'] %}
        {% set cnt  = t.cnt  if t.cnt  is defined else t['cnt'] %}
        <a
          href="/readitlater/?tag={{ name|e }}"
          class="text-xs rounded-full px-2 py-1 border
                 {% if filter_tags and name in filter_tags %}
                   bg-blue-600 text-white border-blue-600
                 {% else %}
                   bg-slate-100 text-slate-800 border-slate-200 hover:bg-slate-200
                 {% endif %}">
          #{{ name }} <span class="opacity-70">({{ cnt }})</span>
        </a>
      {% endfor %}
      {% if filter_tags %}
        <a href="/readitlater/" class="text-xs px-2 py-1 rounded-full border bg-white hover:bg-slate-50">Clear</a>
      {% endif %}
    </div>
  </div>
  {% endif %}

  {% if q %}
    <h1 class="text-xl font-semibold mb-4">Search results for “{{ q }}”</h1>
  {% elif filter_tags %}
    <h1 class="text-xl font-semibold mb-2">Tagged</h1>
    <div class="mb-4 flex gap-2">
      {% for t in filter_tags %}
        <a href="/readitlater/?tag={{ t|e }}" class="text-xs bg-slate-100 border border-slate-200 rounded-full px-2 py-1">#{{ t }}</a>
      {% endfor %}
    </div>
  {% else %}
    <h1 class="text-xl font-semibold mb-4">Latest</h1>
  {% endif %}

  <ul class="space-y-3">
    {% for r in rows %}
      <li class="bg-white p-4 rounded shadow-sm">
        <div class="flex items-start gap-3">
          {% if r.thumb_url %}
            <img
              src="{{ r.thumb_url }}"
              alt=""
              loading="lazy"
              class="w-16 h-16 rounded object-cover flex-shrink-0 border border-slate-200"
              referrerpolicy="no-referrer"
            />
          {% else %}
            <div class="w-16 h-16 rounded bg-slate-100 border border-slate-200 flex items-center justify-center text-slate-400 text-xs flex-shrink-0">
              No&nbsp;img
            </div>
          {% endif %}

          <div class="min-w-0 flex-1">
            <a class="font-medium text-blue-700" href="/readitlater/item/{{ r.id }}">
              {{ r.title or "Untitled" }}
            </a>
            {% if r.url %}
              <div class="text-sm text-slate-500 truncate">{{ r.url }}</div>
            {% endif %}
            <div class="text-xs text-slate-400 mt-1">{{ r.added_at|format_est }}</div>

            {% set tags_for_item = tagmap.get(r.id, []) %}
            {% if tags_for_item %}
              <div class="mt-2 flex flex-wrap gap-2">
                {% for t in tags_for_item %}
                  <a href="/readitlater/?tag={{ t|e }}"
                     class="text-xs bg-slate-100 border border-slate-200 rounded-full px-2 py-1 hover:bg-slate-200">
                    #{{ t }}
                  </a>
                {% endfor %}
              </div>
            {% endif %}
          </div>

          <form
            hx-post="/readitlater/item/{{ r.id }}/delete"
            hx-confirm="Delete this item?"
            class="ml-3">
            <button
              type="submit"
              aria-label="Delete"
              title="Delete"
              class="text-white bg-red-600 hover:bg-red-700 focus:ring-2 focus:ring-red-300 rounded-full w-7 h-7 flex items-center justify-center">
              ✕
            </button>
          </form>
        </div>
      </li>
    {% else %}
      <li class="text-slate-500">No items yet. Use the browser extension to save a page.</li>
    {% endfor %}
  </ul>
{% endblock %}