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

{{#content "body"}}
<main class="container">
  <h1>Store Locator</h1>

  <button class="btn btn-primary btn_store-near-me">
    <span class="btn__text">Find a store near me</span>
  </button>

  <div class="row-holder">
    <div class="map-container">
      <div class="map store-locator-popup__map">
        {{> google-map}}
      </div>
    </div>
  </div>

  {{> find-a-store data-action="scroll-to-list"}}

  <div class="cards-store-holder">
    <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-cards.min.js"></script>