{% extends "admin_base.html" %}
{% block title %}Messages | Nexora Admin{% endblock %}
{% block content %}
<div class="admin-head">
  <p class="eyebrow">Inbox</p>
  <h1>Reviews &amp; Complaints</h1>
  <p>About page ke contact form se aaye hue messages.</p>
</div>

<section class="admin-panel">
  {% if contacts %}
  <div class="review-grid">
    {% for contact in contacts %}
    <article class="review-card">
      <div class="review-top">
        <span class="avatar">{{ contact.name[:1] | upper }}</span>
        <div style="min-width:0;">
          <strong style="display:block;">{{ contact.name }}</strong>
          <span style="font-size:12.5px; color:var(--muted); overflow-wrap:anywhere;">{{ contact.email }} · {{
            contact.phone }}</span>
        </div>
      </div>
      <p>{{ contact.message }}</p>
      <div style="display:flex; gap:8px; margin-top:14px; flex-wrap:wrap;">
        <a class="link-out" href="mailto:{{ contact.email }}"><i class="fas fa-reply"></i> Reply</a>
        {% if can('contacts_delete') %}
        <form method="post" action="{{ url_for('delete_contact', contact_id=contact.id) }}"
          data-confirm="Delete this message?">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <button class="danger-link" type="submit"><i class="fas fa-trash"></i> Delete</button>
        </form>
        {% endif %}
      </div>
    </article>
    {% endfor %}
  </div>
  {% else %}
  <div class="empty"><i class="fas fa-inbox"></i>No messages have arrived yet.</div>
  {% endif %}
</section>
{% endblock %}