{% macro personIcon() %}
<svg
  class="icon"
  xmlns="http://www.w3.org/2000/svg"
  height="24px"
  viewBox="0 0 24 24"
  width="24px"
  fill="currentcolor"
>
  <path d="M0 0h24v24H0z" fill="none" />
  <path
    d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  />
</svg>
{%- endmacro -%} {% macro listBenevole(benevoles, titre='') -%} {% if benevoles|length >0 %}
<div class="agenda-creneau-details--title">{{titre}}</div>
<div class="agenda-creneau-details--content">
  {% for benevole in benevoles %}
  <div class="benevole">
    {{personIcon() }}
    <span>{{ benevole }}</span>
  </div>
  {%- endfor %}
</div>
{%- endif %} {%- endmacro %}

<div>
  <div class="agenda-creneau-header">
    <span class="agenda-creneau-time">{{ slot.horaire }} </span>
    <span class="agenda-creneau-title">{{ slot.name }}</span>
  </div>
  <div class="agenda-creneau-details">
    {%- if slot.description -%}
    <div class="agenda-creneau-details--title">Description</div>
    <div class="agenda-creneau-details--content">{{ slot.description }}</div>
    {%- endif -%}{{ listBenevole(slot.starting_with_you,'Liste des bénévoles avec toi') }} {% if
    slot.responsable!="undefined" %}
    <div class="agenda-creneau-details--title">Le responsable</div>
    <div class="agenda-creneau-details--content">
      <div class="benevole">
        {{personIcon() }}
        <span>{{ slot.responsable }}</span>
      </div>
    </div>
    {%- endif %} {{ listBenevole(slot.benevole_you_replace,'Ceux que tu remplaces') }} {{
    listBenevole(slot.benevole_following_you,'Les personnes qui arrivent après toi') }}
  </div>
</div>