{# Date (optional) #}
{% if config.infobar.displayDateField %}
  <div class='header-date gogo-bg-soft-color-as' option-id={{mainOptionToDisplay.colorOptionId}}>
    <span class="date-component date-day-short">{{ element.dateToDisplay|date('ddd') }}</span>
    <span class="date-component date-day">{{ element.dateToDisplay|date('dddd') }}</span>
    <span class="date-component date-number">{{ element.dateToDisplay.date() }}</span>
    <span class="date-component date-month-short">{{ element.dateToDisplay|date('MMM') }}</span>
    <span class="date-component date-month">{{ element.dateToDisplay|date('MMMM') }}</span>
    <span class="date-component date-year">{{ element.dateToDisplay|date('YYYY') }}</span>
  </div>
{% endif %}

<div class="header-content">

  {# Header Title #}
  <div class='collapsible-header-title row'>

    <span class="name">

      {# Icon #}
      <span class="element-main-icon icon {{ element.mainIcon }} gogo-color-as {{pendingClass}} hideOnLargeScreen" 
            option-id={{element.mainIconColorOptionId}}></span>

      {# Close Button #}
      <span class="icon gogo-icon-close gogo-color-link" id="btn-close-bandeau-detail"></span>

      {# Name #}
      <h1 class="element-title">{{ element.name|safe }}</h1>
      {% if element.isDeleted %}</br><u>{{ 'rejected.or.deleted.element' | i18n }}</u>{% endif %}

      {# Distance #}
      {% if showDistance %}
        <span class="distance gogo-color-soft">~ {{ element.distance }} km</span>
      {% endif %}

      {# Short address (for list mode) #}
      {% set address = element.originalAddress %}
      {% if address %}
        <span class="location gogo-color-soft">
          {# <span class="fa fa-map-marker-alt icon-address"></span> #}
          {% if address.postalCode %}<span class="postalCode">{{ address.postalCode }}</span>{% endif %}
          {% if address.addressLocality %}<span class="city"> {{ address.addressLocality }}</span>{% endif %}
        </span>
      {% endif %}

    </span>

  </div>

  {# Header More #}
  <div class='collapsible-header-more row'>

    <div class="custom-header">{{ customHeader|safe }}</div>

    {# Categories litteral #}
    <span class="inline-option-values gogo-color-soft col s8 hideOnLargeScreen">

      {% set lastIconToDisplay = '' %}
      {% for optionValue in currOptionsValues %}
        {% set option = optionValue.option %}
        <span class="inline-option-value {{ 'main-option' if optionValue.option.isMainOption else '' }}" main-category-owner-name="{{ option.getMainCategoryOwner().name }}">
          {% set isDisabled =   '' if optionValue.isFilledByFilters else 'disabled' %}
          {% set icon = option.icon %}
          {% set parentIcon = option.getOwner().getOwner().icon if option.getOwner() else '' %}
          {% set iconToDisplay = parentIcon if parentIcon and not option.useIconForMarker else icon %}

          {% set sameIcon = iconToDisplay == lastIconToDisplay %}
          {% if iconToDisplay and not sameIcon %}
            <span class="icon {{ isDisabled }} {{ iconToDisplay }} gogo-bg-color-as gogo-color-as" option-id='{{ option.id }}' ></span>
          {% endif %}
          {% set lastIconToDisplay = iconToDisplay %}

          <span class="option-value {{ isDisabled }} {{ 'same-icon-as-last-item' if sameIcon else '' }} gogo-color-as" option-id='{{ option.id }}'>{{ option.nameShort }}</span>
        </span>
      {% endfor %}

      {% if not currOptionsValues|length %}
        <span class="option-value">{{ mainOptionToDisplay.option.name }}</span>
      {% endif %}

    </span>

    {# Toggle Details Buttons #}
    <a><span class="col s4 right-align expand-label hideOnLargeScreen gogo-bg-soft-color-as transform-big" option-id={{mainOptionToDisplay.colorOptionId}}></span></a>

  </div>

</div>