{% extends 'base.html' %}

{% block title %}Chat | Cilvera{% endblock title %}

{% block content %}
<div class="card shadow-sm border-0">
  <div class="card-body">
    <div class="d-flex justify-content-between align-items-center mb-3">
      <h1 class="h5 mb-0">Internal chat timeline</h1>
      <span class="badge text-bg-secondary">{{ page_obj.paginator.count }} messages</span>
    </div>
    <div class="list-group list-group-flush">
      {% for message in messages %}
        <div class="list-group-item px-0">
          <div class="d-flex justify-content-between flex-wrap gap-2">
            <span class="fw-semibold">{{ message.author }}</span>
            <small class="text-secondary">{{ message.created_at }}</small>
          </div>
          <p class="mb-0 mt-2">{{ message.content }}</p>
        </div>
      {% empty %}
        <div class="text-center text-secondary py-4">No messages yet.</div>
      {% endfor %}
    </div>

    {% include 'shared/pagination.html' %}
  </div>
</div>
{% endblock content %}