{{ include_javascript('javascripts/vendor/vue/vue.js') }}

{% block assets %}
  {% if params.showmapinlistview %}
    {{ include_css('styles/vendor/leaflet/leaflet.css') }}
    {{ include_javascript('javascripts/vendor/leaflet/leaflet.min.js') }}
    {{ include_javascript('javascripts/vendor/leaflet-providers/leaflet-providers.js') }}
    {% endif %}
{% endblock %}
  
{{ include_javascript('tools/bazar/presentation/javascripts/entries-index-dynamic.js', false, true) }}
{{ include_css('tools/bazar/presentation/styles/entries/index-dynamic.css') }}

{# Extra Fields to retrieve from API call. customizable inside templates #}
{# Adds them to params to it's available in vueJs #}

{# Merge necessary fields and remove duplicates #}

{% set params = params|merge({necessary_fields: (necessary_fields|default([])|reduce((carry, v) => carry|merge({ (v): v }), {})|keys)}) %}

<div class="bazar-list-dynamic-container no-dblclick {{ params.class ? params.class : ''}}" data-params="{{ params|json_encode }}"
     style="opacity: 0" :class="{mounted: mounted}">

  {% set showFiltersSidebar = params.groups or params.sortfields %}
  {% set resultsColSize = params.filtercolsize|number_format == 12 ? 12 : 12 - params.filtercolsize|number_format %}
  {% set resultsColSize = showFiltersSidebar ? resultsColSize : 12 %}

  {% if params.search and not showFiltersSidebar %}
    {{ include("@bazar/entries/index-dynamic/_search_input.twig") }}
  {% endif %}

  <div class="facette-container dynamic row {{ resultsColSize == 12 ? 'facette-container-fullwidth' : ''}}" 
       data-filter-align="{{ showFiltersSidebar ? params.filterposition : '' }}">

    {% if showFiltersSidebar %}
      {{ include("@bazar/entries/index-dynamic/_filters.twig") }}
    {% endif %}

    <div class="results-col col-sm-{{ resultsColSize }}">
      <div class="bazar-list dynamic" ref="entriesContainer">
        {% block display_entries %}
        {% endblock %}
      </div>
      {{ include("@bazar/entries/index-dynamic/_pagination.twig") }}
    </div>

  </div>

  <modal-entry ref="modal"></modal-entry>
</div>
