<!-- templates/articles/article_detail.html -->
{% extends "base.html" %}
{% block title %}{{ article.title }}{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
  <div class="max-w-4xl mx-auto">

    <a href="{% url 'article_list' %}" class="inline-flex items-center gap-2 text-sm mb-6 hover:opacity-90"
       style="color: var(--muted-foreground);">
      <!-- arrow left -->
      <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="M15 19l-7-7 7-7"/>
      </svg>
      Volver a artículos
    </a>

    <article class="card">
      <div class="card-h">
        <div class="flex items-center gap-2 mb-4">
          <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>

        <h1 class="text-4xl font-bold mb-4">{{ article.title }}</h1>

        <div class="flex flex-wrap items-center gap-4 text-sm" style="color: var(--muted-foreground);">
          <div class="flex items-center gap-2">
            <!-- user -->
            <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="M15 7a3 3 0 11-6 0 3 3 0 016 0z"/>
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 21a8 8 0 10-16 0"/>
            </svg>
            <span>Por <span class="font-semibold" style="color: var(--foreground);">{{ article.author.username }}</span></span>
          </div>

          <div class="flex items-center gap-2">
            <!-- calendar -->
            <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>

        {% if article.summary %}
          <p class="text-lg mt-4" style="color: var(--muted-foreground);">{{ article.summary }}</p>
        {% endif %}
      </div>

      <div class="sep"></div>

      <div class="card-c">
        <div class="py-6 flex items-center gap-2">
          <h3 class="text-lg font-bold mr-2">Reacciones</h3>
          {% if user.is_authenticated %}
            <a class="btn btn-outline" href="{% url 'react_article' article.slug 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>
              Like
            </a>
            <a class="btn btn-outline" href="{% url 'react_article' article.slug -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>
              Dislike
            </a>
          {% else %}
            <span class="text-sm" style="color: var(--muted-foreground);">Inicia sesión para reaccionar.</span>
          {% endif %}
        </div>

        <div class="prose">
          {{ article.content_html|safe }}
        </div>

        <div class="sep my-8"></div>

        <section>
          <h2 class="text-2xl font-bold mb-6">Comentarios ({{ comments|length }})</h2>

          {% if user.is_authenticated %}
            <form method="post" action="{% url 'add_comment' article.slug %}" class="mb-8">
              {% csrf_token %}

              {% for field in form %}
                <div class="field mb-3">
                  <label class="label" for="{{ field.id_for_label }}">{{ field.label }}</label>
                  {{ field }}
                  {% if field.errors %}
                    <p class="text-sm" style="color: var(--destructive);">{{ field.errors|striptags }}</p>
                  {% endif %}
                </div>
              {% endfor %}

              <button type="submit" class="btn btn-primary">Publicar comentario</button>

              <script>
                (function(){
                  const root = document.currentScript?.closest('form');
                  if(!root) return;
                  root.querySelectorAll('textarea, input[type="text"], input[type="email"], input[type="password"], select')
                    .forEach(el => el.classList.add('input'));
                })();
              </script>
            </form>
          {% else %}
            <div class="mb-8 p-4 border rounded-lg" style="border-color: var(--border); background: rgba(0,0,0,.02);">
              <p class="text-sm mb-3" style="color: var(--muted-foreground);">Debes iniciar sesión para comentar</p>
              <div class="flex gap-2">
                <a class="btn btn-primary" href="{% url 'login' %}">Iniciar Sesión</a>
                <a class="btn btn-outline" href="{% url 'register' %}">Registrarse</a>
              </div>
            </div>
          {% endif %}

          <div class="space-y-4">
            {% for comment in comments %}
              <div class="flex gap-3 p-4 border rounded-lg hover:bg-gray-50 transition-colors"
                   style="border-color: var(--border);">
                <div class="w-10 h-10 rounded-full overflow-hidden border flex items-center justify-center"
                     style="border-color: var(--border); background: var(--muted); color: var(--muted-foreground);">
                  {% if comment.user.profile.avatar %}
                    <img src="{{ comment.user.profile.avatar.url }}" class="w-full h-full object-cover" alt="Avatar">
                  {% else %}
                    <span class="font-semibold">{{ comment.user.username|slice:":1"|upper }}</span>
                  {% endif %}
                </div>
                <div class="flex-1">
                  <div class="flex items-center gap-2 mb-1">
                    <span class="font-semibold">{{ comment.user.username }}</span>
                    <span class="text-xs" style="color: var(--muted-foreground);">
                      {{ comment.created_at|date:"d M Y H:i" }}
                    </span>
                  </div>
                  <p class="text-sm">{{ comment.body }}</p>
                </div>
              </div>
            {% empty %}
              <p class="text-center py-8" style="color: var(--muted-foreground);">
                No hay comentarios todavía. ¡Sé el primero en comentar!
              </p>
            {% endfor %}
          </div>
        </section>
      </div>
    </article>
  </div>
</div>
{% endblock %}