{% set sum = summary_for_post(post) %}
{% set total = (sum.LIKE|default(0) + sum.LOVE|default(0) + sum.LAUGH|default(0) + sum.WOW|default(0) + sum.SAD|default(0) + sum.ANGRY|default(0)) %}

<div class="d-flex flex-column gap-2 my-3" data-controller="reactions" data-action="click@window->reactions#closePicker">
  <div class="d-flex align-items-center gap-3">
    <a class="btn btn-link p-0 text-decoration-none d-flex align-items-center gap-2" href="{{ path('post_react_modal', { post: post.id }) }}" data-turbo-frame="modal-frame">
      <span class="d-flex align-items-center gap-1">
        {% for t in ['LIKE','LOVE','LAUGH','WOW','SAD','ANGRY'] %}
          {% if sum[t]|default(0) > 0 %}
            <span class="reaction-dot me-n2 round-32">
              {% if t == 'LIKE' %}👍{% elseif t=='LOVE' %}❤️{% elseif t=='LAUGH' %}😂{% elseif t=='WOW' %}😮{% elseif t=='SAD' %}😢{% else %}😡{% endif %}
            </span>
          {% endif %}
        {% endfor %}
      </span>
      <span class="text-dark fw-semibold" data-react-total>{{ total }}</span>
    </a>
    <div class="text-muted">·</div>
    <button class="ms-4 round-32 rounded-circle btn btn-primary p-0 hstack justify-content-center" title="J'aime">
      <i class="ti ti-message"></i> 
    </button>
    <span class="text-dark" id="comments-count-{{ post.idtoken }}" data-comments-count>{{ post.commentsCount }}</span>
  </div>

  <div class="d-flex align-items-center justify-content-between gap-2 flex-wrap">
    <div class="reaction-trigger">
      <form method="post"
            action="{{ path('post_react_toggle', {post: post.id}) }}"
            class="d-inline"
            data-react-type="LIKE"
            data-action="submit->reactions#toggle">
        <input type="hidden" name="token" value="{{ post.idtoken }}">
        <input type="hidden" name="type" value="LIKE">
        <button class="btn btn-light border px-3 py-2" type="button" data-action="reactions#togglePicker">
          👍 J’aime
        </button>
      </form>

      <div class="reaction-picker">
        {% for t in ['LIKE','LOVE','LAUGH','WOW','SAD','ANGRY'] %}
          <form method="post"
                action="{{ path('post_react_toggle', {post: post.id}) }}"
                class="d-inline"
                data-react-type="{{ t }}"
                data-action="submit->reactions#toggle">
            <input type="hidden" name="token" value="{{ post.idtoken }}">
            <input type="hidden" name="type" value="{{ t }}">
            <button class="btn btn-light border reaction-item" title="{{ t|lower|capitalize }}">
              {% if t == 'LIKE' %}👍{% elseif t=='LOVE' %}❤️{% elseif t=='LAUGH' %}😂{% elseif t=='WOW' %}😮{% elseif t=='SAD' %}😢{% else %}😡{% endif %}
            </button>
          </form>
        {% endfor %}
      </div>
    </div>

    {% if user is defined and user == post.auteur %}
      <a
        class="delete ms-4 round-32 rounded-circle btn btn-danger p-0 hstack justify-content-center"
        href="{{ path('post_delete_modal', { post: post.idtoken }) }}"
        data-turbo-frame="modal-frame"
        title="Supprimer le post"
      >
        <i class="ti ti-trash"></i>
      </a>
    {% endif %}
  </div>
</div>