{% extends "base.html" %}
{% block title %}Publicación de @{{ owner.username }} — GhostGram{% endblock %}
{% block content %}

{% if puede_ver %}
<div class="post-card" style="max-width:520px; margin:0 auto;">
  <div class="post-head">
    <a href="{{ url_for('profile', username=owner.username) }}">
      <img class="avatar" src="{{ url_for('static', filename='media/' ~ owner.avatar_path) }}" alt="{{ owner.username }}">
    </a>
    <div class="who">
      <a href="{{ url_for('profile', username=owner.username) }}" class="username">{{ owner.display_name }}</a>
      <span class="location">{{ post.location }}</span>
    </div>
  </div>
  <img class="post-photo" src="/u/{{ owner.username }}/{{ post.id }}.jpg" alt="post {{ post.id }}">
  <div class="post-body">
    <div class="post-caption"><span class="username">{{ owner.username }}</span>{{ post.caption }}</div>

    <h3 class="section-title" style="margin:24px 0 10px;">Comentarios</h3>
    <div class="comments-list">
      {% if not comments %}
        <p style="color:var(--text-dim);">Todavía no hay comentarios.</p>
      {% endif %}
      {% for c in comments %}
      <div class="comment-box">
        <span class="username">{{ c.username }}</span><span>{{ c.body|safe }}</span>
        <div class="meta">{{ c.created_at }}</div>
      </div>
      {% endfor %}
    </div>

    <form class="comment-form" id="comment-form" data-post-id="{{ post.id }}">
      <input type="text" id="comment-input" placeholder="Escribe un comentario…" required>
      <button type="submit" class="btn btn-small">Comentar</button>
    </form>
    <div class="status-line" id="comment-status"></div>
  </div>
</div>
{% else %}
<div class="lock-block">
  <span class="icon">🔒</span>
  Esta cuenta es privada. Solo {{ owner.display_name }} puede ver esta publicación.
</div>
{% endif %}

<script src="{{ url_for('static', filename='app.js') }}"></script>
{% endblock %}