{% extends 'base.html' %}

{% block title %}Following Feed — WildWatch{% endblock %}

{% block content %}
<div style="background:linear-gradient(135deg,var(--forest-deep),var(--forest-mid)); padding:36px 0 24px;">
  <div class="container">
    <h1 style="font-family:var(--font-display); color:var(--cream); font-size:1.8rem; margin-bottom:4px;">👥 Following Feed</h1>
    <p style="color:var(--sage); font-size:0.9rem;">Posts from people you follow</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>
      <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="">
          {% 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">
          <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>
          <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>
          <button class="bookmark-btn {% if post.pk in bookmarked_ids %}bookmarked{% endif %}" data-post-id="{{ post.pk }}" title="Bookmark">
            {% if post.pk in bookmarked_ids %}🔖{% else %}🏷️{% endif %}
          </button>
          <a href="{% url 'post_detail' post.pk %}" class="view-btn ms-auto"><i class="fa-solid fa-expand"></i></a>
        </div>
      </div>
      <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">
            <div class="author-avatar-placeholder" style="width:28px;height:28px;font-size:0.7rem;flex-shrink:0;">{{ comment.author.username|first|upper }}</div>
            <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>
        <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>
      </div>
    </article>
    {% endfor %}
  </div>
  {% else %}
  <div class="empty-state">
    <div class="empty-icon">👥</div>
    <h3 class="empty-title">Your following feed is empty</h3>
    <p style="color:var(--text-muted); margin:10px 0 28px;">Follow other members to see their posts here.</p>
    <a href="{% url 'feed' %}" class="btn-primary"><i class="fa-solid fa-images"></i> Discover People</a>
  </div>
  {% endif %}
</div>
{% endblock %}