{% extends "@bazar/entries/index-dynamic.twig" %}
{% block display_entries %}
    {% set imWidth = 300 %}
    {% set imHeight = 300 %}
    {% 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>
                    <entry-field :entry="entry" prop="title" fallback-prop="bf_titre" class="title"></entry-field>
                </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 %}
