{# templates/articles/article_list.html #}
{% extends 'base.html' %}
{% block title %}Artículos{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
  <div class="max-w-4xl mx-auto">
    <div class="mb-8">
      <h1 class="text-4xl font-bold mb-2">Artículos de Desarrollo</h1>
      <p style="color: var(--muted-foreground);">
        Explora contenido sobre Django, React y desarrollo web moderno
      </p>
    </div>

    <div class="relative mb-8">
      <span class="absolute left-3 top-1/2 -translate-y-1/2" style="color: var(--muted-foreground);">
        <!-- search icon -->
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35m1.85-5.15a7 7 0 11-14 0 7 7 0 0114 0z"/>
        </svg>
      </span>
      <input
        id="articleSearch"
        type="search"
        placeholder="Buscar artículos..."
        class="input pl-10"
        oninput="filterArticles(this.value)"
      />
    </div>

    <div id="articlesWrap" class="space-y-6">
      {% for article in articles %}
        <article class="card hover:shadow-lg transition-shadow" data-title="{{ article.title|lower }}" data-summary="{{ article.summary|lower }}">
          <div class="card-h">
            <div class="flex items-center justify-between mb-2">
              <span class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold"
                    style="background: var(--primary); color: var(--primary-foreground);">
                Publicado
              </span>
              <div class="flex items-center gap-1 text-sm" style="color: var(--muted-foreground);">
                <!-- calendar icon -->
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                </svg>
                <span>{{ article.published_at|date:"d M Y" }}</span>
              </div>
            </div>

            <h2 class="text-xl font-bold">
              <a class="hover:opacity-90 transition"
                 href="{% url 'article_detail' article.slug %}"
                 style="color: var(--foreground);">
                {{ article.title }}
              </a>
            </h2>

            <p class="mt-2 text-sm" style="color: var(--muted-foreground);">
              {{ article.summary }}
            </p>
          </div>

          <div class="card-c">
            <div class="text-sm" style="color: var(--muted-foreground);">
              Por <span class="font-semibold" style="color: var(--foreground);">{{ article.author.username }}</span>
            </div>
          </div>

          <div class="card-f flex items-center justify-between text-sm" style="color: var(--muted-foreground);">
            <div class="flex items-center gap-4">
              <span class="inline-flex items-center gap-1">
                <!-- thumbs up -->
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 9V5a3 3 0 00-3-3l-4 9v11h11.28a2 2 0 002-1.7l1.38-9A2 2 0 0018.68 9H14z"/>
                </svg>
                <span>{{ article.likes_count|default:0 }}</span>
              </span>

              <span class="inline-flex items-center gap-1">
                <!-- thumbs down -->
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 15v4a3 3 0 003 3l4-9V2H6.72a2 2 0 00-2 1.7L3.34 12a2 2 0 001.98 3H10z"/>
                </svg>
                <span>{{ article.dislikes_count|default:0 }}</span>
              </span>

              <span class="inline-flex items-center gap-1">
                <!-- message -->
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h8m-8 4h5m9 1a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h15a2 2 0 012 2v10z"/>
                </svg>
                <span>{{ article.comments_count|default:0 }}</span>
              </span>
            </div>

            <a href="{% url 'article_detail' article.slug %}" class="font-semibold hover:underline" style="color: var(--primary);">
              Leer más →
            </a>
          </div>
        </article>
      {% empty %}
        <div class="text-center py-12">
          <p style="color: var(--muted-foreground);">No se encontraron artículos</p>
        </div>
      {% endfor %}
    </div>
  </div>
</div>

<script>
  function filterArticles(q){
    const query = (q || '').toLowerCase().trim();
    const wrap = document.getElementById('articlesWrap');
    if(!wrap) return;
    const cards = wrap.querySelectorAll('[data-title]');
    let visible = 0;
    cards.forEach(card => {
      const t = card.getAttribute('data-title') || '';
      const s = card.getAttribute('data-summary') || '';
      const ok = !query || t.includes(query) || s.includes(query);
      card.style.display = ok ? '' : 'none';
      if(ok) visible++;
    });
  }
</script>
{% endblock %}