{% load wagtailcore_tags wagtailimages_tags placeholder_tags  svg_tags i18n %}

<a class="group cursor-pointer transform transition-all duration-200 hover:scale-105" href="{% pageurl article %}">
   <article>
      <div class="bg-white rounded-sm shadow-md hover:shadow-xl transition-all duration-200 overflow-hidden h-full">
         <div class="relative h-48">
            {% get_placeholder_image as placeholder %}
            {% with display_image=article.image|default:placeholder %}
               {% if display_image %}
                  <figure>
                     {% image display_image fill-500x250 loading="lazy" class="w-full h-full object-cover" alt=display_image.alternative_text|default:"Article featured image" %}
                  </figure>
               {% endif %}
            {% endwith %}
            <div class="absolute top-3 left-3">
               <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                  {{ article.classifiers.first.classifier.name }}
               </span>
            </div>
         </div>
         <div class="p-6">
            <div class="flex items-center space-x-3 text-sm text-gray-500 mb-3">
               <div class="flex items-center">
                  {% svg_icon name="heroicons-calendar-days-outline" classname="w-4 h-4 mr-1" %}
                  {% if article.publication_date %}
                     <time datetime="{{ article.publication_date }}" class="tracking-tight text-secondary text-right">
                        {{ article.publication_date | date:'d M Y' }}
                     </time>
                     {% if article.revision_date %}
                        , updated:
                        <time datetime="{{ article.revision_date }}" class="tracking-tight text-secondary text-right">
                           {{ article.revision_date | date:'d M Y' }}
                        </time>
                     {% endif %}
                  {% endif %}
               </div>
               <div class="flex items-center">
                  {% svg_icon name="heroicons-clock-outline" classname="w-4 h-4 mr-1" %}
                  6 min read
               </div>
            </div>
            <h3 class="text-lg font-bold text-gray-900 mb-2 group-hover:text-green-600 transition-colors line-clamp-2" title="{{ article.title }}">
                {{ article.title }}
            </h3>

            <div class="text-sm text-gray-600 mb-3 line-clamp-3">{{ article.get_intro_fallback|richtext }}</div>

           <div class="flex flex-auto space-x-2 mb-3">
              {% for tag in article.tags.all|slice:":2" %}<span class="badge badge-sm badge-ghost">{{ tag.name }}</span>{% endfor %}
              {% if article.tags.all|length > 2 %}<span class="badge badge-sm badge-ghost">...</span>{% endif %}
           </div>
            <div class="flex items-center justify-between">
               <div class="flex items-center">
                  {% svg_icon name="heroicons-user-circle-solid" classname="w-4 h-4 mr-1" %}
                  <span class="text-sm text-base-content">
                     {% if article.display_authors and article.authors.all %}
                        {% with article.authors.all|first as author %}
                           {{ author.person }}
                           {% if not forloop.last %},{% endif %}
                        {% endwith %}
                     {% endif %}
                  </span>
               </div>
               <button class="inline-flex items-center text-green-700 font-medium group-hover:text-green-600 transition-colors">
                  {% translate "Read" %}
                  {% svg_icon name="heroicons-chevron-right-outline" classname="w-5 h-5 ml-2 text-green-800 group-hover:text-green-600 transition-colors" %}
               </button>
            </div>
         </div>
      </div>
   </article>
</a>
