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

{% block stylesheets %}
	<link href="/assets/selectize-bootstrap-4-style-master/dist/css/selectize.bootstrap4.css" rel="stylesheet">
	<style>
	.text-error {
		color: #dc3545;
		font-size: 80%;
	}

	</style>
{% endblock %}

{% block title %}Conversation avec {{ prof.name }}{% endblock %}

{% block body %}

<div class="container py-4" style="max-width: 720px;">
  <div class="d-flex align-items-center mb-4">
    <a href="{{ path('app_message_index') }}" class="btn btn-outline-secondary me-3">
      <i class="bi bi-arrow-left"></i>
    </a>
    <img src="{{ prof.avatar }}" class="rounded-circle me-3" width="50" height="50" alt="Avatar">
    <h2 class="h5 mb-0">{{ prof.name }}</h2>
  </div>

  {# Zone de messages #}
  <div class="border rounded p-3 mb-3 bg-light" style="height: 400px; overflow-y: auto;">
    {% for msg in messages %}
      <div class="mb-2 {% if msg.isFromTeacher %}text-start{% else %}text-end{% endif %}">
        <div class="d-inline-block p-2 rounded-3
          {% if msg.isFromTeacher %}
            bg-white border
          {% else %}
            bg-primary text-white
          {% endif %}
          ">
          {{ msg.content }}
        </div>
        <div class="text-muted small mt-1">
          {{ msg.createdAt|date('H:i') }}
        </div>
      </div>
    {% else %}
      <div class="text-center text-muted mt-5">
        <p>Aucun message dans cette conversation.</p>
      </div>
    {% endfor %}
  </div>

  {# Formulaire d'envoi #}
  <form method="post" action="{{ path('app_message_send', {id: prof.id}) }}">
    <div class="input-group">
      <input type="text" name="message" class="form-control" placeholder="Écrire un message..." required>
      <button class="btn btn-primary" type="submit">
        <i class="bi bi-send"></i> Envoyer
      </button>
    </div>
  </form>
</div>

{% endblock body %}

{% block javascripts %}



{% endblock %}