{% extends "admin/layout.html" %}

{% block title %}Pesan Masuk | Admin Albab Store{% endblock %}
{% block topbar_title %}Pesan Masuk{% endblock %}

{% block content %}

<div class="admin-card">
    <div class="admin-card-head">
        <h2>Pesan dari Pengunjung ({{ messages|length }})</h2>
    </div>

    {% if messages %}
    <div class="table-wrap">
        <table class="admin-table">
            <thead>
                <tr>
                    <th>Nama</th>
                    <th>WhatsApp</th>
                    <th>Email</th>
                    <th>Pesan</th>
                    <th>Tanggal</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
                {% for msg in messages %}
                <tr>
                    <td><strong>{{ msg.name }}</strong></td>
                    <td>
                        {{ msg.phone }}
                        <a class="btn btn-sm btn-outline"
                           href="{{ whatsapp_link(msg.phone, 'Halo ' ~ msg.name ~ ', terima kasih sudah menghubungi Albab Store.') }}"
                           target="_blank">Balas</a>
                    </td>
                    <td>{{ msg.email or '—' }}</td>
                    <td class="table-msg">{{ msg.message }}</td>
                    <td>{{ msg.created_at[:16] }}</td>
                    <td class="table-actions">
                        <form method="POST" action="{{ url_for('admin_message_delete', message_id=msg.id) }}"
                              class="js-confirm" data-message="Hapus pesan dari {{ msg.name }}?">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            <button class="btn btn-danger btn-sm">Hapus</button>
                        </form>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <p class="empty-state">Belum ada pesan masuk.</p>
    {% endif %}
</div>

{% endblock %}