{% set typeLabel = activite.type == 'APPEL' ? 'Appel' : (activite.type == 'REUNION' ? 'Réunion' : 'Rendez-vous') %}
{% set typeClass = activite.type == 'APPEL' ? 'bg-info-subtle text-info' : (activite.type == 'REUNION' ? 'bg-success-subtle text-success' : 'bg-warning-subtle text-warning') %}

<div class="card border">
  <div class="card-body">
    <div class="d-flex align-items-start justify-content-between gap-3">
      <div>
        <div class="d-flex align-items-center gap-2 mb-2">
          <span class="badge {{ typeClass }}">{{ typeLabel }}</span>
          <span class="text-muted small">
            {{ activite.date ? activite.date|date('d/m/Y', 'Europe/Paris') : '' }}
            •
            {{ activite.heure ? activite.heure|date('H:i', 'Europe/Paris') : '' }}
          </span>
        </div>
        {% if activite.lieu %}
          <div class="text-muted small mb-2"><i class="ti ti-map-pin me-1"></i>{{ activite.lieu }}</div>
        {% endif %}
        <div class="d-flex flex-wrap gap-2">
          {% for participant in activite.participants %}
            <span class="badge bg-light text-dark border">{{ participant.prenom }} {{ participant.nom }}</span>
          {% else %}
            <span class="text-muted small">Aucun participant</span>
          {% endfor %}
        </div>
      </div>
      <a href="{{ path('activite_show', { id: activite.idtoken }) }}" class="btn btn-sm btn-outline-primary" data-turbo-frame="modal-frame">
        Voir
      </a>
    </div>
    {% if activite.compteRendu %}
      <div class="mt-3 text-muted small">{{ activite.compteRendu|slice(0, 180) }}{% if activite.compteRendu|length > 180 %}…{% endif %}</div>
    {% endif %}
  </div>
</div>