{% extends 'base.html' %}

{% block title %}Bookmarks — 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;">🔖 Saved Posts</h1>
    <p style="color:var(--sage); font-size:0.9rem;">{{ posts|length }} bookmarked post{{ posts|length|pluralize }}</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="bookmark-btn bookmarked" data-post-id="{{ post.pk }}" title="Remove bookmark">
            🔖
          </button>
          <a href="{% url 'post_detail' post.pk %}" class="view-btn ms-auto"><i class="fa-solid fa-expand"></i></a>
        </div>
      </div>
    </article>
    {% endfor %}
  </div>
  {% else %}
  <div class="empty-state">
    <div class="empty-icon">🔖</div>
    <h3 class="empty-title">No bookmarks yet</h3>
    <p style="color:var(--text-muted); margin:10px 0 28px;">Save posts to view them later by clicking the bookmark button.</p>
    <a href="{% url 'feed' %}" class="btn-primary"><i class="fa-solid fa-images"></i> Browse Feed</a>
  </div>
  {% endif %}
</div>
{% endblock %}