{% extends 'base.html' %}
{% load static %}

{% block title %}Trending Posts — WildWatch{% endblock %}

{% block content %}

<div style="background:linear-gradient(135deg, #3d2b1f, #6b4c3b); padding:48px 0 32px;">
  <div class="container">
    <h1 style="font-family:var(--font-display); color:var(--cream); font-size:2.2rem; margin-bottom:6px;">
      🔥 Trending Posts
    </h1>
    <p style="color:var(--sand); font-size:0.95rem;">The most liked and discussed photos in our community</p>
  </div>
</div>

<div class="container py-md">
  {% if posts %}
  <div class="posts-grid">
    {% for post in posts %}
    <article class="post-card">
      <div class="post-card-image-wrap">
        <a href="{% url 'post_detail' post.pk %}">
          <img src="{{ post.image.url }}" alt="{{ post.caption|truncatechars:60 }}" loading="lazy">
        </a>
        <span class="post-category-badge {{ post.get_category_color }}">
          {{ post.get_category_icon }} {{ post.get_category_display }}
        </span>
        <div class="trending-badge">🔥 #{{ forloop.counter }}</div>
      </div>
      <div class="post-card-body">
        <div class="post-author-row">
          {% if post.author.profile.profile_photo %}
            <img src="{{ post.author.profile.profile_photo.url }}" class="author-avatar" alt="{{ post.author.username }}">
          {% else %}
            <div class="author-avatar-placeholder">{{ post.author.username|first|upper }}</div>
          {% endif %}
          <div class="author-info">
            <a href="{% url 'profile' post.author.username %}" class="author-name" style="color:var(--text-primary);">{{ post.author.username }}</a>
            <div class="post-time">{{ post.created_at|timesince }} ago</div>
          </div>
        </div>
        <p class="post-caption">{{ post.caption }}</p>
        <div class="post-actions">
          {% if user.is_authenticated %}
          <button class="like-btn {% if post.pk in liked_post_ids %}liked{% endif %}"
                  data-post-id="{{ post.pk }}" data-authenticated="true">
            <span class="like-icon">{% if post.pk in liked_post_ids %}❤️{% else %}🤍{% endif %}</span>
            <span class="like-count">{{ post.like_count }}</span>
          </button>
          {% else %}
          <a href="{% url 'login' %}" class="like-btn">
            <span class="like-icon">🤍</span>
            <span class="like-count">{{ post.like_count }}</span>
          </a>
          {% endif %}
          <button class="comment-btn" data-post-id="{{ post.pk }}">
            <i class="fa-regular fa-comment"></i>
            <span class="comment-count">{{ post.comment_count }}</span>
          </button>
          <a href="{% url 'post_detail' post.pk %}" class="view-btn ms-auto">
            <i class="fa-solid fa-expand"></i>
          </a>
        </div>
      </div>
      <!-- Comment Section -->
      <div class="comment-section" id="comments-{{ post.pk }}">
        <div id="comment-list-{{ post.pk }}">
          {% for comment in post.comments.all|slice:":3" %}
          <div class="comment-item">
            {% if comment.author.profile.profile_photo %}
              <img src="{{ comment.author.profile.profile_photo.url }}" class="author-avatar" style="width:28px;height:28px;flex-shrink:0;" alt="">
            {% else %}
              <div class="author-avatar-placeholder" style="width:28px;height:28px;font-size:0.7rem;flex-shrink:0;">{{ comment.author.username|first|upper }}</div>
            {% endif %}
            <div class="comment-bubble">
              <div class="comment-author">{{ comment.author.username }}</div>
              <div class="comment-text">{{ comment.content }}</div>
              <div class="comment-time">{{ comment.created_at|timesince }} ago</div>
            </div>
          </div>
          {% empty %}
          <p class="no-comments" style="color:var(--text-muted); font-size:0.85rem; text-align:center; padding:8px 0;">No comments yet.</p>
          {% endfor %}
        </div>
        {% if user.is_authenticated %}
        <form class="comment-form comment-form-row" data-post-id="{{ post.pk }}">
          {% csrf_token %}
          <input type="text" class="comment-input" name="content" placeholder="Add a comment..." maxlength="500" autocomplete="off">
          <button type="submit" class="comment-submit-btn"><i class="fa-solid fa-paper-plane"></i></button>
        </form>
        {% endif %}
      </div>
    </article>
    {% endfor %}
  </div>
  {% else %}
  <div class="empty-state">
    <div class="empty-icon">🔥</div>
    <h3 class="empty-title">No trending posts yet</h3>
    <p style="color:var(--text-muted); margin:10px 0 28px; font-size:0.92rem;">Be the first to share a photo and start a trend!</p>
    {% if user.is_authenticated %}
      <a href="{% url 'upload' %}" class="btn-primary"><i class="fa-solid fa-plus"></i> Upload Now</a>
    {% else %}
      <a href="{% url 'register' %}" class="btn-primary">Join WildWatch</a>
    {% endif %}
  </div>
  {% endif %}
</div>
{% endblock %}