{% extends 'parents/_layout.html.twig' %}

{% block title %}Mes enfants{% endblock %}

{% block page_title %}Mes enfants{% endblock %}

{% block body %}
    <style>
        /* class="table-danger"/"table-primary" (Bootstrap) perdent leur padding vertical au contact
           du gy-5 de Metronic sur ce tableau - fond personnalisé, comme messages_boite_reception. */
        .conversation-non-lue > td { background-color: rgba(0, 158, 247, 0.08); }
    </style>

    {% if lignes is empty %}
        <div class="card">
            <div class="card-body pt-6">
                <div class="text-muted">Aucun enfant rattaché à votre compte.</div>
            </div>
        </div>
    {% else %}
        {% for ligne in lignes %}
            <div class="card mb-5">
                <div class="card-header border-0 pt-6">
                    <div class="card-title">
                        <div class="d-flex align-items-center gap-3">
                            <div class="symbol symbol-40px">
                                <div class="symbol-label bg-light-primary text-primary fw-bold">
                                    {{ ligne.enfant.prenom|slice(0, 1) }}{{ ligne.enfant.nom|slice(0, 1) }}
                                </div>
                            </div>
                            <h3 class="m-0">{{ ligne.enfant.prenom }} {{ ligne.enfant.nom }}</h3>
                        </div>
                    </div>
                    <div class="card-toolbar">
                        <a href="{{ path('parents_espace_dashboard', {enfantId: ligne.enfant.id}) }}" class="btn btn-light btn-sm">Tableau de bord</a>
                        <a href="{{ path('parents_messages_nouvelle_conversation_formulaire', {enfantId: ligne.enfant.id}) }}" class="btn btn-light-primary btn-sm">Nouveau message</a>
                    </div>
                </div>
                <div class="card-body pt-0">
                    {% if ligne.conversations is empty %}
                        <div class="text-muted">Aucun message pour le moment.</div>
                    {% else %}
                        <div class="table-responsive">
                            <table class="table align-middle table-row-dashed fs-6 gy-5">
                                <thead>
                                    <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                                        <th>Objet</th>
                                        <th>Dernière activité</th>
                                        <th class="text-end">Action</th>
                                    </tr>
                                </thead>
                                <tbody class="fw-semibold text-gray-600">
                                    {% for resume in ligne.conversations %}
                                        <tr{% if resume.nonLuePourParent() %} class="conversation-non-lue"{% endif %}>
                                            <td>
                                                {{ resume.objet() }}
                                                {% if resume.nonLuePourParent() %}
                                                    <span class="badge badge-light-primary ms-1">Nouvelle réponse</span>
                                                {% elseif resume.nombreNonTraites > 0 %}
                                                    <span class="badge {{ resume.aUrgenceNonTraitee ? 'badge-light-danger' : 'badge-light-warning' }} ms-1">En attente de réponse</span>
                                                {% endif %}
                                            </td>
                                            <td>{{ resume.dernierMessage.dateHeure|date('d/m H:i') }}</td>
                                            <td class="text-end">
                                                <a href="{{ path('parents_messages_fil', {conversationId: resume.conversation.id}) }}" class="btn btn-light btn-sm">Voir la conversation</a>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% endif %}
                </div>
            </div>
        {% endfor %}
    {% endif %}
{% endblock %}