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

{% block title %}{{ post.author.username }}'s Post — WildWatch{% endblock %}

{% block content %}
<div class="container py-md" style="max-width:900px;">
  <div style="margin-bottom:24px;">
    <a href="{% url 'feed' %}" style="color:var(--text-muted); font-size:0.88rem; text-decoration:none;">
      <i class="fa-solid fa-arrow-left me-2"></i>Back to Feed
    </a>
  </div>

  <div class="row g-4">
    <!-- Image Column -->
    <div class="col-lg-7">
      <div style="border-radius:var(--radius-xl); overflow:hidden; background:var(--bg-secondary);">
        <img src="{{ post.image.url }}" alt="{{ post.caption|truncatechars:60 }}" style="width:100%; display:block;">
      </div>
    </div>

    <!-- Details Column -->
    <div class="col-lg-5">
      <div style="background:var(--bg-card); border-radius:var(--radius-xl); padding:28px; border:1px solid var(--border-light); height:100%; display:flex; flex-direction:column; gap:18px;">

        <!-- Author -->
        <div class="post-author-row">
          {% if post.author.profile.profile_photo %}
            <img src="{{ post.author.profile.profile_photo.url }}" class="author-avatar" style="width:46px;height:46px;" alt="{{ post.author.username }}">
          {% else %}
            <div class="author-avatar-placeholder" style="width:46px;height:46px;font-size:1rem;">{{ post.author.username|first|upper }}</div>
          {% endif %}
          <div class="author-info">
            <a href="{% url 'profile' post.author.username %}" class="author-name" style="font-size:1rem;">{{ post.author.username }}</a>
            <div class="post-time">{{ post.created_at|date:"M d, Y, g:i a" }}</div>
          </div>
          {% if user == post.author %}
          <div class="ms-auto">
            <a href="{% url 'delete_post' post.pk %}" class="btn" style="color:#ef5350; font-size:0.85rem; padding:6px 12px; border:1px solid rgba(239,83,80,0.3); border-radius:var(--radius-sm);"
               onclick="return confirm('Are you sure you want to delete this post?');">
              <i class="fa-solid fa-trash me-1"></i>Delete
            </a>
          </div>
          {% endif %}
        </div>

        <!-- Category -->
        <div>
          <span class="post-category-badge {{ post.get_category_color }}" style="position:static; display:inline-flex;">
            {{ post.get_category_icon }} {{ post.get_category_display }}
          </span>
        </div>

        <!-- Caption -->
        <p style="color:var(--text-secondary); line-height:1.7; font-size:0.95rem;">{{ post.caption }}</p>

        <!-- Actions -->
        <div class="post-actions">
          {% if user.is_authenticated %}
          <button class="like-btn {% if is_liked %}liked{% endif %}"
                  data-post-id="{{ post.pk }}"
                  data-authenticated="true"
                  style="font-size:0.9rem; padding:9px 18px;">
            <span class="like-icon">{% if is_liked %}❤️{% else %}🤍{% endif %}</span>
            <span class="like-count">{{ post.like_count }}</span> likes
          </button>
          {% else %}
          <a href="{% url 'login' %}" class="like-btn">
            <span class="like-icon">🤍</span>
            {{ post.like_count }} likes
          </a>
          {% endif %}
          <span style="color:var(--text-muted); font-size:0.85rem; margin-left:8px;">
            <i class="fa-regular fa-comment"></i> {{ post.comment_count }}
          </span>
        </div>

        <!-- Comments -->
        <div style="flex:1; overflow-y:auto; max-height:320px;">
          <h6 style="font-size:0.85rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:14px;">
            Comments ({{ post.comment_count }})
          </h6>
          <div id="comment-list-{{ post.pk }}">
            {% for comment in comments %}
            <div class="comment-item mb-2">
              {% if comment.author.profile.profile_photo %}
                <img src="{{ comment.author.profile.profile_photo.url }}" class="author-avatar" style="width:30px;height:30px;flex-shrink:0;" alt="">
              {% else %}
                <div class="author-avatar-placeholder" style="width:30px;height:30px;font-size:0.72rem;flex-shrink:0;">{{ comment.author.username|first|upper }}</div>
              {% endif %}
              <div class="comment-bubble">
                <div class="comment-author">
                  <a href="{% url 'profile' comment.author.username %}" style="color:var(--moss);">{{ comment.author.username }}</a>
                </div>
                <div class="comment-text">{{ comment.content }}</div>
                <div class="comment-time">{{ comment.created_at|date:"M d, Y" }}</div>
              </div>
            </div>
            {% empty %}
            <p class="no-comments" style="color:var(--text-muted); font-size:0.85rem; text-align:center; padding:16px 0;">No comments yet. Start the conversation!</p>
            {% endfor %}
          </div>
        </div>

        <!-- Comment Form -->
        {% 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="Write a comment..." maxlength="500" autocomplete="off">
          <button type="submit" class="comment-submit-btn">
            <i class="fa-solid fa-paper-plane"></i>
          </button>
        </form>
        {% else %}
        <p style="text-align:center; color:var(--text-muted); font-size:0.88rem;">
          <a href="{% url 'login' %}">Log in</a> to leave a comment
        </p>
        {% endif %}

      </div>
    </div>
  </div>
</div>
{% endblock %}