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


{% block title %} | Conversations {% endblock %}

{% block body %}
    <div class="cart padding-top padding-bottom" style="margin-top:100px">
        <div class="container" data-aos="fade-up">
            <div class="cart__wrapper">
                <div class="row g-5 justify-content-center">
                    
                    <div class="col-xl-4 col-lg-8 col-md-10">
                        <div class="cart__bottom" data-aos="fade-left" data-aos-duration="800" data-aos-delay="100">
                            <div class="cart__bottom-shipingbox">
                                <div class="cart-overview">
                                    <h4>Discussion — {{ conversation.enfant.prenom }}</h4>
                                    <p>Parent : {{ conversation.parent.nom ?? conversation.parent.email }}</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-12">
                        <div class="messages">
  {% for m in messages %}
    <div class="msg {{ m.author.id == app.user.id ? 'me' : 'them' }}">
      <div class="meta">
        <strong>{{ m.author.id == app.user.id ? 'Moi' : 'Parent' }}</strong>
        — {{ m.createdAt|date('d/m/Y H:i') }}
        {% if m.type == 'IMPORTANT' %}
          <span class="badge badge-danger">Instruction</span>
        {% endif %}
      </div>
      <div class="body">{{ m.body|nl2br }}</div>
    </div>
  {% endfor %}
</div>

<hr>

<h2>Répondre</h2>
{{ form_start(form) }}
  {{ form_row(form.body) }}
  <button type="submit">Envoyer</button>
{{ form_end(form) }}

{% if pages > 1 %}
  <nav style="margin-top: 1rem;">
    {% for p in 1..pages %}
      <a href="{{ path('staff_conversation_show', {id: conversation.id, page: p}) }}"
         class="{{ p == page ? 'active' : '' }}">
        {{ p }}
      </a>
    {% endfor %}
  </nav>
{% endif %}
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
{% endblock %}