{% extends "@bazar/entries/index-dynamic-templates/card.twig" %}

{% block assets %}
  {{ include_css('tools/bazar/presentation/styles/card.css') }}
  {{ include_css('tools/bazar/presentation/styles/timeline.css') }}
  {{ include_javascript('tools/bazar/presentation/javascripts/components/TimelineYear.js', false, true) }}
{% endblock %}

{% set necessary_fields = ['bf_date_debut_evenement'] %}
{% set params = params|merge({'style': 'square'}) %}
{% block iter_start %}
<div class="timeline">
    <div v-for="(entry, index) in entriesToDisplay" class="timeline-element">
        <Timeline-Year :entry="entry" :entries="entriesToDisplay" :indexentry="index">
        </Timeline-Year>
        {% if isLink %}<a{% else %}<div{% endif %} :key="entry.id_fiche"
            class="bazar-entry timeline-container bazar-card{{ isModal ? ' modalbox' : ''}}"
            {% if not isLink %}@click="openEntry(entry)"{% endif %}
            :class="{'with-image': Object.keys(entry).includes('visual')}"
            :style="[entry.color ? {'--entry-color': entry.color}: {'--entry-color': 'var(--neutral-color)'}]"
            {% if isModal %}
            data-size="modal-lg" data-header="false" data-iframe="1"
            {% endif %}
            {% if isLink %}
            :href="`${entry.url + (({{ isModal ? 'true' : 'false' }} || $root.isInIframe()) ? '/iframe' : '')}`"
            :title="entry.title"
        {% endif %}
        >

        <div class="timeline-content" :style="{'border-color': entry.color}">
{% endblock %}

{% block iter_end %}
        </div>
    {% if isLink %}</a>{% else %}</div>{% endif %}
   </div>
</div>
{% endblock %}
