{% extends 'base.html.twig' %}

{% block title %}Contact {{ parent() }} {% endblock %}

{% block body %}
<div class="container mx-auto">
    <h1 class="text-center text-5xl lg:text-2xl mt-10 font-bold my-10">Contact index</h1>

    <table class="table border-2 border-gray-200 text-center px-10 w-full lg:mx-auto lg:w-5/6">
        <thead class="bg-slate-950 text-white ">
            <tr class="border justify-center">
                <th class="border text-4xl lg:text-base py-6">Sujet</th>
                <th class="border text-4xl lg:text-base py-6">Créé le</th>
                <th class="border text-4xl lg:text-base py-6">Résolu</th>
                <th class="border text-4xl lg:text-base py-6">Actions</th>
            </tr>
        </thead>
        <tbody>
        {% for contact in contacts %}
            <tr class="border justify-center">
                <td class="border text-4xl lg:text-base p-4">{{ contact.subject }}</td>
                <td class="border text-4xl lg:text-base p-4" >{{ contact.createdAt ? contact.createdAt|date('d/m/Y') : '' }}</td>
                <td class="border text-4xl lg:text-base p-4">{{ contact.resolved ? 'Yes' : 'No' }}</td>
                <td class="border text-4xl lg:text-base p-4">
                    <a href="{{ path('app_contact_show', {'id': contact.id}) }}" class="font-semibold text-3xl lg:text-lg btn bg-blue-300 py-2 lg:py-4 px-4 m-2 rounded shadow-sm">Voir</a>
                </td>
            </tr>
        {% else %}
            <tr>
                <td colspan="9">Aucun enregistrement trouvé</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>

<button class="btn bg-teal-700 text-3xl lg:text-lg py-4 text-white px-4 rounded shadow-sm ml-24 mt-6 mb-4">
    <i class="fa-solid fa-plus"></i> <a href="{{ path('app_contact_new') }}">Créer une nouvelle demande</a>
</button>
</div>
{% endblock %}