{% set here = "components/element/" %}
{# -------------- #}
{#  ELEMENT INFO  #}
{# -------------- #}
<li id="element-info-{{ element.id }}"
  class="element-item gogo-section-content"
  data-element-id="{{ element.id }}">

{% set pendingClass = 'pending' if (element.isPending or element.isDeleted) and config.isFeatureAvailable('pending') else '' %}
{% set isHistoryAvailable = config.isFeatureAvailable('elementHistory') and element.contributions and element.contributions.length > 0 %}

{# HEADER #}
<div class="collapsible-header {{pendingClass}}" option-id={{element.colorOptionId}}>
  {% include here ~ 'header.html.njk' %}
</div>

{# INTERACTIVE SECTION #}
{% include here ~ 'interactive-section.html.njk' %}

{# MENU #}
{% include here ~ 'menu.html.njk' %}

{# Tabs selector #}
{% if isHistoryAvailable %}
  <ul class="tabs info-bar-tabs tabs-fixed-width moreDetails">
    <li class="tab "><a class="active" data-href=".body-main-tab-content">{{ 'card' | i18n }}</a></li>
    <li class="tab "><a data-href=".body-admin-tab-content">{{ 'historical' | i18n }}</a></li>
  </ul>
{% endif %}

{# BODY #}

<div class="collapsible-body moreDetails tabs-content">

  {% if element.images.length %}
    <div class="img-container">
      <ul class="images-carousel">
        {% for imageUrl in element.images %}
          <li><img src="{{ imageUrl|add_protocol_if_need }}" class="gogo-img"/></li>
        {% endfor %}
      </ul>
    </div>
  {% endif %}
  <div class="collapsible-body-main-container custom-scroll-bar">
    {% if element.images.length %}
      {# transparent overlay to let the image visible #}
      <div class="img-overlay">
        <span class="img-navigation-btn prev"><span class="icon gogo-icon-chevron-left"></span></span>
        <span class="img-clickable-area"></span>
        <span class="img-navigation-btn next"><span class="icon gogo-icon-chevron-right"></span></span>
      </div>
    {% endif %}
    <div class="collapsible-body-main-content gogo-section-contentBody">
      <div class="body-main-tab-content">

        {# Votes and reports #}
        {% if config.isFeatureAvailable('directModeration') %}
          {% include here ~ "admin/pending-contribution.html.njk" %}
          {% import here ~ "admin/votes-reports.html.njk" as VotesReportsRenderer %}
          {{ VotesReportsRenderer.render('Votes', element.votes, smallWidth) }}
          {{ VotesReportsRenderer.render('Erreurs signalées', element.reports, smallWidth) }}
        {% endif %}

        {# Element description #}
        {{ customBody|safe }}
      </div>

      {# History #}
      {% if isHistoryAvailable %}
        <div class="body-admin-tab-content">
          {% include here ~ "admin/contributions.html.njk" %}
        </div>
      {% endif %}
    </div>
  </div>
</div>

</li>