{% set tabs = [
  {'code': null, 'label': 'Tous', 'icon': '⭐', 'count': summary.TOTAL|default(0)},
  {'code': 'LIKE', 'label': '', 'icon': '👍', 'count': summary.LIKE|default(0)},
  {'code': 'LOVE', 'label': '', 'icon': '❤️', 'count': summary.LOVE|default(0)},
  {'code': 'LAUGH', 'label': '', 'icon': '😂', 'count': summary.LAUGH|default(0)},
  {'code': 'WOW', 'label': '', 'icon': '😮', 'count': summary.WOW|default(0)},
  {'code': 'SAD', 'label': '', 'icon': '😢', 'count': summary.SAD|default(0)},
  {'code': 'ANGRY', 'label': '', 'icon': '😡', 'count': summary.ANGRY|default(0)}
] %}

<div class="d-flex align-items-center gap-3 border-bottom pb-2 mb-3 flex-wrap">
  {% for tab in tabs %}
    <a href="{{ path('post_react_modal', {post: post.id, type: tab.code, page: 1}) }}"
       class="reaction-tab text-decoration-none d-flex align-items-center gap-2 {{ (type==tab.code) ? 'is-active' : '' }}"
       data-turbo-frame="modal-frame">
      <span class="reaction-pill reaction-dot me-n2">{{ tab.icon }}</span>
      {% if tab.label %}
        <span class="fw-semibold">{{ tab.label }}</span>
      {% endif %}
      <span class="fw-semibold">{{ tab.count }}</span>
    </a>
  {% endfor %}
</div>

<div class="list-group list-group-flush">
  {% for r in rows %}
    <div class="list-group-item border-0 border-bottom d-flex align-items-center gap-3 py-3">
      <div class="position-relative">
        {% if r.user.image %}
          <img src="{{ asset('uploads/profiles/user/' ~ r.user.image) }}" class="rounded-circle" width="48" height="48" alt="{{ r.user.prenom }}">
        {% else %}
          <div class="rounded-circle bg-light d-flex align-items-center justify-content-center" style="width:48px;height:48px;">
            <span class="fw-semibold">{{ r.user.prenom|slice(0,1)|upper }}{{ r.user.nom|slice(0,1)|upper }}</span>
          </div>
        {% endif %}
        <span class="reaction-badge">
          {% if r.type == 'LIKE' %}👍{% elseif r.type=='LOVE' %}❤️{% elseif r.type=='LAUGH' %}😂{% elseif r.type=='WOW' %}😮{% elseif r.type=='SAD' %}😢{% else %}😡{% endif %}
        </span>
      </div>
      <div class="flex-grow-1">
        <div class="fw-semibold">{{ r.user.prenom }} {{ r.user.nom }}</div>
        <div class="text-muted small">{{ r.createdAt|date('d/m/Y') }}</div>
      </div>
    </div>
  {% else %}
    <div class="text-center text-muted py-4">Aucune réaction</div>
  {% endfor %}
</div>

{% if hasMore %}
  <div class="d-grid mt-3">
    <a href="{{ path('post_react_modal', {post: post.id, type: type, page: page + 1}) }}"
       class="btn btn-outline-secondary"
       data-turbo-frame="modal-frame">
      Charger plus
    </a>
  </div>
{% endif %}