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

{% block display_entries %}
  {% set imWidth = 170 %}
  {% set imHeight = 170 %}
  {% set firstTokenCrop = csrfToken("POST api/images/cache/#{imWidth}/#{imHeight}/crop") %}
  <div class="panel-group no-dblclick" style="opacity: 0;" :class="{ready: ready}" v-if="ready">
    
    {% block no_result %}
    <div v-if="entriesToDisplay.length == 0" class="alert alert-info">
        {{ _t('BAZ_NO_RESULT') }}
    </div>
    {% endblock %}

    <Panel v-for="entry in entriesToDisplay" :key="entry.id_fiche" class="bazar-entry" 
           @opened="getEntryRender(entry)">
      <template #header>
        <div class="panel-heading-container" :class="{'with-image': entry.visual}">
          {# VISUAL AREA #}
          {% block area_visual %}
          <div class="visual-area" v-if="entry.visual">
            <img
              loading="lazy"
              :src="urlImage(entry,'visual',{{ imWidth }},{{ imHeight }},'crop')"
              @error="urlImageResizedOnError(entry,'visual',{{ imWidth }},{{ imHeight }},'crop',{{ firstTokenCrop|json_encode }})">
            </img>
          </div>
          {% endblock %}
          
          {# TITLE AREA #}
          {% block area_title %}
          <h4 div class="title-area panel-title">
            <span v-show="entry.color" class="pellet" :style="{'background-color': entry.color}"></span>
            <i v-show="entry.icon" :class="entry.icon"></i>
            <span class="title" v-html="entry.title || entry.bf_titre"></span>
          </h4>
          {% endblock %}

          {# FLOATING AREA #}
          {% block area_floating %}
          <entry-field :entry="entry" prop="floating" class="floating-area"></entry-field>
          {% endblock %}

          {# SUBTITLE AREA #}
          {% block area_subtitle %}
          <entry-field :entry="entry" prop="subtitle" class="subtitle-area"></entry-field>
          {% endblock %}
        </div>
      </template>
      <template #body>
        {% block entry_body %}
        <div v-if="entry.html_render" v-html="entry.html_render"></div>
        <spinner-loader v-else height="300"></spinner-loader>
        {% endblock %}
      </template>
    </Panel>
    <spinner-loader v-if="isLoading" class="overlay"></spinner-loader>
  </div>
  <spinner-loader v-else height="500"></spinner-loader>

  {% block extra %}
  {% endblock %}
{% endblock %}