{#
/**
 * @file
 * Template for Articles listing page.
 *
 * Available variables:
 * - articles: Array of article items.
 */
#}
<div class="py-16 lg:py-24 bg-gray-50 dark:bg-slate-800 min-h-screen transition-colors">
  <div class="max-w-7xl 3xl:max-w-8xl 4xl:max-w-9xl mx-auto px-4 sm:px-6 lg:px-8 3xl:px-12">
    <!-- Page Header -->
    <div class="text-center mb-12">
      <h1 class="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white mb-4">{{ 'Articles'|t }}</h1>
      <p class="text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">{{ 'Explore our latest stories, insights, and updates.'|t }}</p>
    </div>

    {% if articles|length > 0 %}
      <!-- Articles Grid -->
      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
        {% for article in articles %}
          <article class="bg-white dark:bg-slate-900 rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow group">
            <!-- Image/Video -->
            <a href="{{ article.url }}" class="block relative aspect-video overflow-hidden">
              {% if article.has_video and article.youtube_id %}
                <img src="https://img.youtube.com/vi/{{ article.youtube_id }}/hqdefault.jpg" alt="{{ article.title }}" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
                <div class="absolute inset-0 flex items-center justify-center">
                  <div class="w-16 h-16 bg-white/90 rounded-full flex items-center justify-center shadow-lg group-hover:bg-white transition-colors">
                    <svg class="w-6 h-6 text-gray-900 ml-1" fill="currentColor" viewBox="0 0 24 24">
                      <path d="M8 5v14l11-7z"/>
                    </svg>
                  </div>
                </div>
              {% elseif article.image_uri %}
                {{ responsive_image(article.image_uri, 'article', article.image_alt ?: article.title, 'w-full h-full object-cover transition-transform duration-500 group-hover:scale-105') }}
              {% elseif article.image_url %}
                <img src="{{ article.image_url }}" alt="{{ article.image_alt ?: article.title }}" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
              {% else %}
                <div class="w-full h-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
                  <svg class="w-16 h-16 text-white/50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"/>
                  </svg>
                </div>
              {% endif %}
              <!-- Badge -->
              <div class="absolute top-4 left-4">
                <span class="px-3 py-1 bg-white/90 dark:bg-slate-800/90 text-gray-900 dark:text-white text-xs font-medium rounded-full">
                  {% if article.has_video %}{{ 'Video'|t }}{% else %}{{ 'Article'|t }}{% endif %}
                </span>
              </div>
            </a>

            <!-- Content -->
            <div class="p-6">
              <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-3 line-clamp-2">
                <a href="{{ article.url }}" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
                  {{ article.title }}
                </a>
              </h2>
              {% if article.body %}
                <p class="text-gray-600 dark:text-gray-400 text-sm mb-4 line-clamp-3">
                  {{ article.body|striptags|slice(0, 150) }}{% if article.body|length > 150 %}...{% endif %}
                </p>
              {% endif %}
              <a href="{{ article.url }}" class="inline-flex items-center text-blue-600 dark:text-blue-400 font-medium text-sm hover:text-blue-700 dark:hover:text-blue-300 transition-colors">
                {{ 'Read more'|t }}
                <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
                </svg>
              </a>
            </div>
          </article>
        {% endfor %}
      </div>
    {% else %}
      <div class="text-center py-16">
        <svg class="w-24 h-24 text-gray-300 dark:text-gray-600 mx-auto mb-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"/>
        </svg>
        <p class="text-gray-500 dark:text-gray-400 text-lg">{{ 'No articles available yet.'|t }}</p>
      </div>
    {% endif %}
  </div>
</div>
