{% if events %}
{% for event in events %}
{% with event_url=event.link|default:event.feed_website_url|default:'#' %}
<article class="flex items-start gap-4 p-3 border border-stone-200 rounded-xl hover:bg-stone-50/50 transition-colors">
    <a href="{{ event_url }}" target="_blank" rel="noopener noreferrer"
       class="block w-[140px] h-[96px] rounded-lg overflow-hidden bg-stone-100 flex-shrink-0">
        {% if event.image_url %}
        <img src="{{ event.image_url }}" alt="" loading="lazy" class="w-full h-full object-cover">
        {% else %}
        <div class="w-full h-full flex items-center justify-center">
            <svg class="w-6 h-6 text-stone-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg>
        </div>
        {% endif %}
    </a>
    <div class="flex-1 min-w-0">
        <a href="{{ event_url }}" target="_blank" rel="noopener noreferrer"
           class="block text-lg sm:text-xl leading-snug font-semibold text-stone-800 hover:text-stone-900">
            {{ event.title }}
        </a>
        <div class="mt-1 flex items-center gap-1.5 text-sm text-stone-500">
            {% if event.feed_favicon_url %}
            <img src="{{ event.feed_favicon_url }}" alt="" loading="lazy" class="w-4 h-4 rounded object-contain"
                 x-data @error="$el.style.display='none'; $el.nextElementSibling.classList.remove('hidden');">
            {% endif %}
            <svg class="w-4 h-4 text-stone-400 {% if event.feed_favicon_url %}hidden{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg>
            <span>{{ event.feed_name }}</span>
        </div>
        {% if event.summary %}
        <p class="mt-1 text-sm text-stone-600">
            {{ event.summary|truncatechars:220 }}
            {% if event_url != '#' %}
            <a href="{{ event_url }}" target="_blank" rel="noopener noreferrer" class="text-stone-700 hover:text-stone-900">
                View Entire Post
            </a>
            {% endif %}
        </p>
        {% endif %}
        <div class="mt-2 text-sm text-stone-500">
            {% if event.published_at %}
            {{ event.published_at|timesince }} ago
            {% else %}
            Recently
            {% endif %}
        </div>
    </div>
</article>
{% endwith %}
{% endfor %}
{% elif show_empty %}
<div class="py-10 text-center text-stone-500">
    No events found for this feed filter.
</div>
{% endif %}

{% if has_more %}
<div hx-get="{% url 'composer:feed_list' workspace_id=workspace.id %}?append=1&offset={{ next_offset }}&feed_id={{ selected_feed_id }}"
     hx-target="this"
     hx-swap="outerHTML"
     hx-trigger="intersect once"
     class="py-5 flex items-center justify-center">
    <div class="animate-spin w-5 h-5 border-2 border-stone-300 border-t-orange-500 rounded-full"></div>
</div>
{% endif %}