{{#extend "base" pageClass="store-locator" title="Store locator list" pageStoreLocator=true}}
{{#content "head" mode="append" pageStoreLocator=true}}{{/content}}

{{#content "body"}}
<main class="container">
  <div class="store-locator-wrapper">
    <div class="store-locator__content">
      <h1>Store Locator</h1>
      {{> find-a-store data-action="scroll-to-list"}}
    </div>

    <div class="row-holder">
      <div class="map-container">
        <div class="map store-locator-popup__map">
          <div class="map__google-map" id="map" style="background: url('https://placehold.co/1200x700?text=Map') no-repeat center/cover"></div>
        </div>
      </div>
    </div>
  </div>

  <div class="cards-store-holder" id="stores-list">
    <div class="cards-store-wrapper">
      <div class="row" id="store-cards">
        {{#each locators}}
        <div class="cards-store-list">
          {{> card-store-locator
          opening-times=true
          schedule-title=true
          locator-list=true
          }}
        </div>
        {{/each}}
      </div>
      <div class="cards-store-list__actions">
        <button class="btn btn-primary btn_full store-locator__load-button store-locator__load-button_more">
          <span class="btn__text">Load more</span>
        </button>
      </div>
    </div>
  </div>
</main>
{{/content}}
{{/extend}}
<script defer src="./js/store-locator.min.js"></script>
<script defer src="./js/store-locator-cards.min.js"></script>