{# ========================================================================= #}
{# :: Imports #}
{# ========================================================================= #}
{% import "molecules/list/list-macros.njk" as list %}
{% import "molecules/actions/actions-macros.njk" as actions %}

{# ========================================================================= #}
{# :: Default #}
{# ========================================================================= #}
{% macro default(classes) %}
  <footer class="o-footer u-mobile-hide {{classes}}">
    <div class="l-container l-container-1x-s">
      <div class="o-footer__nav">
        {{list.withLinks("", ["Recycleren", "Inzamelen", "Verkopen & produceren", "E-mobility", "Over batterijen"])}}

        {{list.withLinks("", [
          { classes: "icon-link", text: "MyBebat" },
          { classes: "icon-link", text: "Reneos" },
          { classes: "icon-link", text: "My Batbase" },
          { classes: "icon-link", text: "Villa Pila" },
          { classes: "icon-link", text: "Sortbat" }
        ])}}

        {{list.withLinks("", ["Over Bebat", "Blog", "FAQ", "Contacteer ons"])}}
      </div>

      {{actions.default("o-footer__social", "", ["icon-instagram", "icon-twitter", "icon-facebook", "icon-linkedin", "icon-youtube"])}}

      <div class="o-footer__disclaimer">
        <p>© 2018 Bebat vzw</p>
        {{list.disclaimer("", [{text: "Privacy", url: "/"}, {text: "Cookie policy", url: "/"}, {text: "Disclaimer", url: "/"}])}}
      </div>
    </div>
  </footer>

  {# MOBILE #}

  <footer class="o-footer o-footer--mobile u-mobile-show">

    <div class="o-collapses">
      <div class="m-collapse js-m-collapse o-footer__collapse" data-is-root="true">

        <div class="m-collapse__header">
          <h6>Mijn batterijen</h6>
        </div>

        <div class="m-collapse__content">
          <div class="m-collapse__content__container">
            {{list.withLinks("", ["Recycleren", "Inzamelen", "Verkopen & produceren", "E-mobility", "Over batterijen"])}}
          </div>
        </div>

      </div>

      <div class="m-collapse js-m-collapse o-footer__collapse" data-is-root="true">

        <div class="m-collapse__header">
          <h6>Tools</h6>
        </div>

        <div class="m-collapse__content">
          <div class="m-collapse__content__container">
            {{list.withLinks("", [
              { classes: "icon-link", text: "MyBebat" },
              { classes: "icon-link", text: "Reneos" },
              { classes: "icon-link", text: "My Batbase" },
              { classes: "icon-link", text: "Villa Pila" },
              { classes: "icon-link", text: "Sortbat" }
            ])}}
          </div>
        </div>
      </div>

      <div class="m-collapse js-m-collapse o-footer__collapse" data-is-root="true">

        <div class="m-collapse__header">
          <h6>Over Bebat</h6>
        </div>

        <div class="m-collapse__content">
          <div class="m-collapse__content__container">
            {{list.withLinks("", ["Over Bebat", "Blog", "FAQ", "Contacteer ons"])}}
          </div>
        </div>
      </div>

      <div class="m-collapse js-m-collapse o-footer__collapse" data-is-root="true">

        <div class="m-collapse__header">
          <h6 class="icon-question">Hulp nodig?</h6>
        </div>

        <div class="m-collapse__content">
          <div class="m-collapse__content__container">
            {{list.withLinks("", [
              { classes: "icon-question", text: "Bekijk de FAQ" },
              { classes: "icon-mail", text: "info@bebat.be" },
              { classes: "icon-telephone", text: "0800 97 54 21" },
              { classes: "icon-chat-single", text: "Chat met één van onze collega's" }
            ])}}
          </div>
        </div>
      </div>
    </div>


    {{actions.default("o-footer__social m-actions--center", "", ["icon-instagram", "icon-twitter", "icon-facebook", "icon-linkedin", "icon-youtube"])}}

    <div class="o-footer__disclaimer">
      <p>© 2018 Bebat vzw</p>
      {{list.disclaimer("", [{text: "Privacy", url: "/"}, {text: "Cookie policy", url: "/"}, {text: "Disclaimer", url: "/"}])}}
    </div>
  </footer>
{% endmacro %}