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

{% block body %}
<div class="mb-6">
    <h3 class="text-xl font-bold text-gray-900 dark:text-white">{% trans %}Messages{% endtrans %}</h3>
    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{% trans %}All Messages{% endtrans %}</p>
</div>

<div class="space-y-3">
    {% for msg in messages %}
    <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-5 transition-theme" data-testid="card-message-{{ msg.id }}">
        <div class="flex items-start justify-between gap-4">
            <div class="space-y-2 flex-1 min-w-0">
                <div class="flex items-center gap-2">
                    <span class="text-xs font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wider">{% trans %}Name:{% endtrans %}</span>
                    <span class="text-sm text-gray-700 dark:text-gray-300">{{ msg.name }}</span>
                </div>
                <div class="flex items-center gap-2">
                    <span class="text-xs font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wider">{% trans %}Email:{% endtrans %}</span>
                    <span class="text-sm text-gray-700 dark:text-gray-300">{{ msg.email }}</span>
                </div>
                <div class="mt-2 pt-2 border-t border-gray-100 dark:border-gray-800">
                    <p class="text-sm text-gray-600 dark:text-gray-400">{{ msg.message }}</p>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
    {% if not messages or messages | length == 0 %}
    <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-8 text-center transition-theme">
        <i class="fa fa-envelope text-4xl text-gray-300 dark:text-gray-600 mb-3"></i>
        <p class="text-sm text-gray-500 dark:text-gray-400">{% trans %}No messages yet.{% endtrans %}</p>
    </div>
    {% endif %}
</div>
{% endblock %}