{% load i18n %}
<article class="group">
    <a href="{% url article_type|add:'_detail' slug=article.slug %}" class="block">
        {% if article.cover_image %}
            <img src="{{ article.cover_image.url }}" alt="{{ article.title_zh }}"
                 class="w-full h-48 object-cover rounded mb-3">
        {% endif %}
        <h3 class="text-lg font-semibold text-charcoal group-hover:text-burgundy transition mb-2">
            {{ article|default_if_none:"" }}
            {% if lang and lang|slice:":2" == 'en' and article.title_en %}
                {{ article.title_en }}
            {% else %}
                {{ article.title_zh }}
            {% endif %}
        </h3>
        <p class="text-sm text-charcoal/60 line-clamp-2">
            {% if lang and lang|slice:":2" == 'en' and article.summary_en %}
                {{ article.summary_en }}
            {% else %}
                {{ article.summary_zh }}
            {% endif %}
        </p>
        {% if article.published_at %}
            <p class="text-xs text-charcoal/40 mt-2">{{ article.published_at|date:"Y-m-d" }}</p>
        {% endif %}
    </a>
</article>