---
---

<!doctype html>
<html lang="en-US">

{% include head.html %}

<body>

  {% include header.html %}

  <div class="service">

    <div id="page-banner">
      <div class="row">
        <div class="small-12 small-centered columns">
          <img src="/images/services/{{ page.slug }}.png" alt="">
          <h1>Coops that offer <span>{{ page.name }}</span></h1>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="small-12 columns">

        <div class="view float-center">
          <ul class="tabs" data-tabs id="coops-view-tabs">
            <li class="tabs-title is-active"><a href="#grid" aria-selected="true">Grid</a></li>
            <li class="separator">|</li>
            <li class="tabs-title"><a href="#map">Map</a></li>
          </ul>
        </div>

        <div class="tabs-content" data-tabs-content="coops-view-tabs">
          <!-- START Grid View Content -->
          <div class="tabs-panel is-active" id="grid">
            <div class="row small-up-2 medium-up-4 large-up-6 small-collapse">
              {% for coop in site.coops %}
                {% if coop.services contains page.slug %}
                  <div class="column">
                    <a href="{{ coop.url | relative_url }}" class="coop-thumb">
                      <img src="/images/coops/{{ coop.slug }}.png" alt="">
                    </a>
                  </div>
                {% endif %}
              {% endfor %}
            </div>
          </div>
          <!-- END Grid View Content -->

          <!-- START Map View Content -->
          <div class="tabs-panel" id="map">
            <div class="row small-up-2 medium-up-4 large-up-6 small-collapse">
              <div id="map-services"></div>
              <script type="text/javascript">
                var mapEntries = [
                  {% for coop in site.coops %}
                    {% if coop.services contains page.slug %}
                      {
                        lat: {{ coop.latitude }},
                        lng: {{ coop.longitude }},
                        markerText: '<b><a href=\"{{ coop.url | relative_url }}\">{{ coop.name }}</a></b><br><br>{{ coop.address | split: "," | join: "<br>" }}'
                      },
                    {% endif %}
                  {% endfor %}
                ];

                $(document).ready(function() {
                    window.app.createMapMultiMarker('map-services', 54.7, -4.2, 6, mapEntries);
                });

                // TODO fix bug with tiles not displaying properly until window resized

              </script>
            </div>
          </div>
          <!-- END Map View Content -->
        </div>
      </div>
    </div>
  </div>

  {% include footer.html %}

  {% include javascripts.html %}
</body>

</html>
