{% 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 %}Mes Messages{% endblock %}

{% block body %}

<div class="container py-4">
  <div class="d-flex align-items-center mb-4">
    <button class="btn btn-outline-secondary me-3" onclick="location.reload();">
      <i class="bi bi-arrow-clockwise"></i>
    </button>
    <h1 class="h3 mb-0">Messagerie</h1>
  </div>

  {% if notifications is empty %}
    <div class="text-center my-5">
      <img src="/images/notification.png" class="rounded-circle mb-3" style="width:80px;">
      <h4>La liste de messages est vide</h4>
      <p>Contacte un professeur depuis la page <a href="">Exploration</a>.</p>
      <a href="" class="btn btn-outline-primary rounded-pill mt-3">Explorer maintenant</a>
    </div>
  {% else %}
    <div class="list-group">
      {% for notif in notifications %}
        <a href="{{ path('app_message_show', {id: notif.id}) }}"
           class="list-group-item list-group-item-action d-flex align-items-center {% if not notif.isOpened %}bg-light{% endif %}">
          <img src="{{ notif.avatar }}" class="rounded-circle me-3" alt="avatar" width="50" height="50">
          <div class="flex-fill">
            <div class="d-flex justify-content-between">
              <h5 class="mb-1">{{ notif.title }}</h5>
              <small class="text-muted">{{ notif.createdAt|date('H:i d/m') }}</small>
            </div>
            <p class="mb-1 text-muted">{{ notif.lastMessage|slice(0, 80) ~ '...' }}</p>
          </div>
          {% if not notif.isOpened %}
            <span class="badge bg-primary rounded-pill ms-3">Nouveau</span>
          {% endif %}
        </a>
      {% endfor %}
    </div>
  {% endif %}
</div>

{% endblock body %}

{% block javascripts %}



{% endblock %}