<div class="element-list-header">

  {% include 'components/buttons/show-directory-menu-button.html.njk' %}

  <span class="show-as-map-button gogo-h-primary">
    <span class="icon btn-back gogo-icon-material-design-icons-1"></span>
    <span class="button-text">{{ 'back.to.map' | i18n }}</span>
  </span>

  <div class="location-range">
    <span class="range-title">{{ 'search.radius' | i18n }}</span>
    <span class="range-start">0</span>
    <div id="location-slider"></div>
    <span class="range-end">500</span>
  </div>

  <div class="title-text" style="display:none">
    {{ results | i18n }}
    <span class="element-list-title-number-results"></span>
    <span class="element-list-title-search-radius"></span>
    <span class="element-list-title-text"></span>
  </div>

  <div class='shadow-bottom' id="list-title-shadow-bottom"></div>
</div>

<div class="elements-container custom-scroll-bar">
  <ul class="collapsible popout" data-collapsible="accordion"></ul>
  <div class="bottom-gradient hide-on-med-and-up"></div>
  <div class="spinner-loader"><center>{{ spinnerLoader.create('directory-list-spinner-loader') }}</center></div>
  <div class="no-result-message" style="display:none">
    <b>{{ 'no.result.found' | i18n }}</b></br>
    <i>{{ 'laozi.quotation' | i18n }}</i> </br>
    <span style="font-size:.9em">{{ 'laozi' | i18n }}</span></br>
    <img data-src="https://media.giphy.com/media/ozXTrqRgqFcly/giphy.gif" />
  </div>
</div>