{% extends "base.html" %}
{% block title %}Mensajes — GhostGram{% endblock %}
{% block content %}
<h1>Mensajes directos</h1>

<div class="msg-list" style="margin-top:24px;">
  {% if not mensajes %}
    <p style="color:var(--text-dim);">Todavía no tienes mensajes.</p>
  {% endif %}
  {% for m in mensajes %}
  <div class="msg-row">
    <strong>{{ m.sender_username }}</strong> → <strong>{{ m.recipient_username }}</strong>: {{ m.body }}
    <div class="meta">{{ m.created_at }}</div>
  </div>
  {% endfor %}
</div>

<div class="auth-card" style="max-width:480px; margin:0;">
  <h2>Enviar mensaje</h2>
  <form id="mensaje-form">
    <div class="field">
      <label>Para (usuario)</label>
      <select name="to" id="mensaje-to">
        {% for u in users %}
        <option value="{{ u.username }}">{{ u.username }}{% if u.is_private %} 🔒{% endif %}</option>
        {% endfor %}
      </select>
    </div>
    <div class="field">
      <label>Mensaje</label>
      <textarea id="mensaje-body" required></textarea>
    </div>
    <button type="submit" class="btn" style="width:100%">Enviar</button>
  </form>
  <div class="status-line" id="mensaje-status"></div>
</div>

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