{# ========================================================================= #}
{# :: Imports #}
{# ========================================================================= #}
{% import "atoms/checkbox/checkbox-macros.njk" as checkbox %}
{% import "atoms/loader/loader-macros.njk" as loader %}
{% import "molecules/map-result/map-result-macros.njk" as mapResult %}


{# ========================================================================= #}
{# :: Default #}
{# ========================================================================= #}
{% macro default(classes) %}

<section class="o-map l-grid l-container l-container--large {{classes}}">
  <div class="m-filter m-collapse js-m-collapse o-map__filter">
      <div class="m-collapse__header m-filter__header">
          <h6>Type inzamelpunt</h6>
      </div>
      <div class="m-collapse__content m-filter__content">
          <div class="m-collapse__content__container m-filter__content__container">
            {{checkbox.default("", {
              text: "Bedrijven",
              name: "checkbox-styleguide-example"
            })}}
            {{checkbox.default("", {
              text: "Recyclageparken",
              name: "checkbox-styleguide-example"
            })}}
            {{checkbox.default("", {
              text: "Winkels en supermarkten",
              name: "checkbox-styleguide-example"
            })}}
          </div>
      </div>
  </div>
  <div class="o-map__results l-grid__col-5-12">
    <header class="o-map__results__header">
      <h4>Resultaten (133)</h4>
    </header>
    <div class="o-map__results-container">
      <ul class="m-list m-list--no-type o-map__results__list">
        {% for i in range(0, 10) %}
          <li>
            {{mapResult.default("", {
              label: "Bedrijven",
              location: "Nmbs/sncb Gent Station Sint Pieters B St W11",
              address: "Koningin Maria Hendrikaplein 2 </br> 9000 Gent"
            })}}
          </li>
        {% endfor %}
      </ul>
    </div>
  </div>

  <div class="l-grid__col-7-12 o-map__map">
    <img src="/assets/images/mock/map.jpg" alt="map" title="map" />
  </div>
</section>

{% endmacro %}

{# ========================================================================= #}
{# :: Loading #}
{# ========================================================================= #}
{% macro loading(classes) %}

<section class="o-map l-grid l-container l-container--large {{classes}}">
  <div class="m-filter m-collapse js-m-collapse o-map__filter">
      <div class="m-collapse__header m-filter__header">
          <h6>Type inzamelpunt</h6>
      </div>
      <div class="m-collapse__content m-filter__content">
          <div class="m-collapse__content__container m-filter__content__container">
            {{checkbox.default("", {
              text: "Bedrijven",
              name: "checkbox-styleguide-example"
            })}}
            {{checkbox.default("", {
              text: "Recyclageparken",
              name: "checkbox-styleguide-example"
            })}}
            {{checkbox.default("", {
              text: "Winkels en supermarkten",
              name: "checkbox-styleguide-example"
            })}}
          </div>
      </div>
  </div>
  <div class="o-map__results l-grid__col-5-12">
    <header class="o-map__results__header">
      <h4>Resultaten (133)</h4>
    </header>

    <div class="o-map__results-container">
      {{loader.default("o-map__loader", {})}}
    </div>
  </div>

  <div class="l-grid__col-7-12 o-map__map">
    <img src="/assets/images/mock/map.jpg" alt="map" title="map" />
  </div>
</section>

{% endmacro %}

{# ========================================================================= #}
{# :: No results #}
{# ========================================================================= #}
{% macro noResults(classes) %}

<section class="o-map l-grid l-container l-container--large {{classes}}">
  <div class="m-filter m-collapse js-m-collapse o-map__filter">
      <div class="m-collapse__header m-filter__header">
          <h6>Type inzamelpunt</h6>
      </div>
      <div class="m-collapse__content m-filter__content">
          <div class="m-collapse__content__container m-filter__content__container">
            {{checkbox.default("", {
              text: "Bedrijven",
              name: "checkbox-styleguide-example"
            })}}
            {{checkbox.default("", {
              text: "Recyclageparken",
              name: "checkbox-styleguide-example"
            })}}
            {{checkbox.default("", {
              text: "Winkels en supermarkten",
              name: "checkbox-styleguide-example"
            })}}
          </div>
      </div>
  </div>
  <div class="o-map__results l-grid__col-5-12">
    <header class="o-map__results__header">
      <h4>Resultaten (0)</h4>
    </header>

    <div class="o-map__results-container">
      <p class="o-map__results-info">Vul een straat naam, postcode of stad in om een resultaat te krijgen</p>
    </div>
  </div>

  <div class="l-grid__col-7-12 o-map__map">
    <img src="/assets/images/mock/map.jpg" alt="map" title="map" />
  </div>
</section>

{% endmacro %}