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

{% block assets %}
  {{ include_css('tools/bazar/presentation/styles/card.css') }}
{% endblock %}

{% block display_entries %}
  {% set nbcol = params.nbcol %}
  {% set isModal = (params.entrydisplay == 'modal' or params.entrydisplay is empty or params.entrydisplay not in ['modal','direct','newtab']) %}
  {% set isLink = isModal or (params.entrydisplay == 'direct') %}

  {# Restrict number of columns for horizontal card #}
  {% if nbcol > 2 and params.displayfields.visual and params.style == "horizontal" %}
    {% set nbcol =  2 %}
    {{ include('@templates/alert-message.twig',{type:'info',message:_t('BAZ_CARD_NBCOL_TOO_HIGH')}) }}
  {% endif %}

  {% set imWidth = (nbcol == 4) ? 500 : (nbcol == 5 ? 400 : 700 ) %}
  {% set imHeight = params.style == "square" ? imWidth : (params.style == "horizontal" ? imWidth*23//27 : imWidth*2//3 ) %}
  {# Generate appropriate CSRF tokens for both image processing modes #}
  {% set fitToken = csrfToken("POST api/images/cache/#{imWidth}/#{imHeight}/fit") %}
  {% set cropToken = csrfToken("POST api/images/cache/#{imWidth}/#{imHeight}/crop") %}


  <div class="bazar-cards-container" v-if="ready"
       :class="[{ready: ready}, `style-${params.style || 'vertical'}`, `nbcol-{{nbcol}}`]"
       :style="{'grid-template-columns': `repeat({{nbcol}}, minmax(0, 1fr))`}">

    {% block no_result %}
    <div v-if="entriesToDisplay.length == 0" class="alert alert-info">
        {{ _t('BAZ_NO_RESULT') }}
    </div>
    {% endblock %}

    {% block iter_start %}
    {% if isLink %}<a{% else %}<div{% endif %} v-for="entry in entriesToDisplay" :key="entry.id_fiche"
        class="bazar-entry bazar-card{{ isModal ? ' modalbox' : ''}}"
        {% if not isLink %}@click="openEntry(entry)"{% endif %}
        :class="{'with-image': Object.keys(entry).includes('visual')}"
        {% 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 %}
        >
    {% endblock %}

      {# VISUAL AREA #}
      {% block area_visual %}
      <template v-if="Object.keys(entry).includes('visual')">
        <template v-if="entry.visual">
         {% if params.imgstyle == "contain" %}
            <img
              loading="lazy" 
              alt=""
              class="area visual-area"
              :style="{'object-fit': 'contain'}"
              :src="urlImage(entry,'visual',{{ imWidth }},{{ imHeight }},'fit')"
              @error="urlImageResizedOnError(entry,'visual',{{ imWidth }},{{ imHeight }},'fit',{{ fitToken|json_encode }})">
          {% else %}
            <img
              loading="lazy" 
              alt=""
              class="area visual-area"
              :style="{'object-fit': 'cover'}"
              :src="urlImage(entry,'visual',{{ imWidth }},{{ imHeight }},'crop')"
              @error="urlImageResizedOnError(entry,'visual',{{ imWidth }},{{ imHeight }},'crop',{{ cropToken|json_encode }})">
          {% endif %}

        </template>
        <div v-else class="area area visual-area placeholder"></div>
      </template>
      {% endblock %}

      <div class="content">
        {# TITLE AREA #}
        {% block area_title %}
        <h4  class="area title-area" v-if="entry.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" class="title"></entry-field>
        </h4>
        {% endblock %}

        {# SUBTITLE AREA #}
        {% block area_subtitle %}
          <entry-field :entry="entry" prop="subtitle" class="area subtitle-area line-clamp" :style="{'webkit-line-clamp': params.nblines}"></entry-field>
        {% endblock %}

        {# TEXT AREA #}
        {% block area_text %}
          <entry-field :entry="entry" prop="text" class="area text-area"></entry-field>
        {% endblock %}

        {# FOOTER AREA #}
        {% block area_footer %}
          <entry-field :entry="entry" prop="footer" class="area footer-area"></entry-field>
        {% endblock %}

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

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

    <spinner-loader v-if="isLoading" class="overlay"></spinner-loader>
  </div>
  <spinner-loader v-else height="500"></spinner-loader>

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