{% extends "base.html" %}
{% block title %}Inicio — GhostGram{% endblock %}
{% block content %}
<h1>Inicio</h1>
<p style="color:var(--text-dim); margin-top:6px;">Conectado como <strong>{{ user.username }}</strong></p>

<div class="feed" style="margin-top:24px;">
  {% for p in posts %}
  <div class="post-card">
    <div class="post-head">
      <a href="{{ url_for('profile', username=p.username) }}">
        <img class="avatar" src="{{ url_for('static', filename='media/' ~ p.avatar_path) }}" alt="{{ p.username }}">
      </a>
      <div class="who">
        <a href="{{ url_for('profile', username=p.username) }}" class="username">{{ p.display_name }}</a>
        <span class="location">{{ p.location }}</span>
      </div>
      {% if p.is_private %}<span class="private-pill">🔒 Privada</span>{% endif %}
    </div>

    {% if (not p.is_private) or p.username == user.username %}
      <img class="post-photo" src="/u/{{ p.username }}/{{ p.id }}.jpg" alt="post de {{ p.username }}">
      <div class="post-body">
        <div class="post-caption"><span class="username">{{ p.username }}</span>{{ p.caption }}</div>
        <a class="post-link" href="{{ url_for('post_detail', post_id=p.id) }}">Ver comentarios</a>
      </div>
    {% else %}
      <div class="lock-block">
        <span class="icon">🔒</span>
        Esta cuenta es privada. Solo {{ p.display_name }} puede ver esta foto.
        <br>
        <a class="post-link" href="#" data-role="quick-preview" data-post-id="{{ p.id }}">🔍 Vista previa rápida</a>
        <div class="status-line" data-role="preview-result"></div>
      </div>
    {% endif %}
  </div>
  {% endfor %}
</div>

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