{% load filters %}
  {% include 'header.html' %}
      <!-- slider -->
      <div class="slider">
    {% load static %}
          <div class="slide">
            <!-- <img src="images/_3.jpg" alt="Norestar Stainless Steel Fluke/Danforth Style Boat Anchor"> -->
            <div class="img" style="background-image: url({% static 'images/_3.jpg' %});"></div>
            <div class="desc">
              <p>Lewmar Galvanised Delta Anchor, 16 kg/35 lb.</p>
              <a href="/anchor/B000N9XDZC/Lewmar-Galvanised-Delta-Anchor--16-kg-35-lb./" class="learnmore link" data-id="B000N9XDZC" data-name="Lewmar Galvanised Delta Anchor, 16 kg/35 lb.">Learn More</a>
            </div>
         </div>
         <div class="slide">
           <!--  <img src="images/_4.jpg" alt="Anchor Galvanized Slip Ring, 8-Pound"> -->
           <div class="img" style="background-image: url({% static 'images/_4.jpg' %});"></div>
            <div class="desc">
              <p>Anchor Galvanized Slip Ring, 8-Pound</p>
              <a href="/anchor/B004LRB99E/Anchor-Galvanized-Slip-Ring/" class="learnmore link" data-id="B004LRB99E" data-name="Anchor Galvanized Slip Ring, 8-Pound">Learn More</a>
            </div>
         </div>
         <div class="slide">
<!--             <img src="images/_2.jpg" alt="S-1600 Standard Anchor"> -->
            <div class="img" style="background-image: url({% static 'images/_2.jpg' %});"></div>
            <div class="desc">
              <p>S-1600 Standard Anchor</p>
              <a href="/anchor/B001448P1C/S-1600-Standard-Anchor/" class="learnmore link" data-id="B001448P1C" data-name="S-1600 Standard Anchor">Learn More</a>
            </div>
         </div>

      </div>
      <!-- end of silder -->
      <!-- feauture -->
      <div class="feautures">
          <h2>Feautured Collections</h2>
          <p style="color: #fff;margin-top: 20px;letter-spacing: 1px;margin-bottom: 0;">Discover The Best Boat Anchors Collections</p>
          <div class="categories">
             <div class="container">
              <div class="row">
                <div class="col-xs-12  col-sm-6 col-sm-offset-1 col-md-4 col-md-offset-2">
                  <div class="category">
                    <a href="/boat-anchors/Coated/">
                      <h3>Coated</h3>
                      <span>View Anchors <i class="fa fa-arrow-right"></i></span>
                      <img src="{% static 'images/2.jpg' %}" alt="Coated Boat Anchors">
                    </a>
                  </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 ">
                  <div class="category">
                    <a href="/boat-anchors/Fluke/">
                      <h3>Fluke</h3>
                      <span>View Anchors <i class="fa fa-arrow-right"></i></span>
                      <img src="{% static 'images/3.jpg' %}" alt="Fluke Boat Anchors">
                    </a>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-xs-12 col-sm-6 col-sm-offset-1 col-md-4 col-md-offset-2">
                  <div class="category">
                    <a href="/boat-anchors/Stainless Steel/">
                      <h3>Stainless Steel</h3>
                      <span>View Anchors <i class="fa fa-arrow-right"></i></span>
                      <img src="{% static 'images/_1.jpg' %}" class="un" alt="Stainless Steel Baot Anchors">
                    </a>
                  </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 ">
                  <div class="category">
                    <a href="/boat-anchors/Aluminium/">
                      <h3>Aluminium</h3>
                      <span>View Anchors <i class="fa fa-arrow-right"></i></span>
                      <img src="{% static 'images/4.jpg' %}"  alt="Aluminium Boat Anchors">
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
      </div>

      <!-- end feauture -->

      <!-- popular -->
      <div class="popular">
        <h3>Popular Boat Anchors</h3>
        <p style="color: #fff;margin-top: 20px;letter-spacing: 1px;margin-bottom: 0;">Discover Our Popular Boat Anchors</p>
        <div class="products">
          <div class="row">
             {% for product in anchors %}
             <div class="product" data-brand="{{ product.brand }}" data-price="{{ product.price }}" data-weight="{{ product.weight }}">
               <a href="/anchor/{{product.amazon_id}}/{{product.name|link_formating}}/" title="{{ product.name }} - {{ product.brand }} boat anchor" class="link" data-id="{{ product.amazon_id}}" data-name="{{ product.name }}">
                   <span class="price">{{ product.price }}</span>
                   <div class="img" style="background-image:url({{ product.image }});">
                     <img src="{{ product.image }}" alt="{{ product.name }} - {{ product.brand }} boat anchor" title="{{ product.name }} - {{ product.brand }} boat anchor">
                   </div>
                   <div class="desc">
                     <p>{{ product.name }}</p>
                   </div>
                   <a href="/anchor/{{product.amazon_id}}/{{product.name|link_formating}}/" title="{{ product.name }} - {{ product.brand }} boat anchor" class="learnmore link" data-id="{{ product.amazon_id}}" data-name="{{ product.name }}">Learn More</a>
               </a>
             </div>
             {% endfor %}
          </div>
          <div class="row">
            <a class="moreproducts" href="/boat-anchors/all"> View all Boat Anchors </a>
          </div>
        </div>
      </div>
      <!-- end popular -->
   </div>
  {% include 'footer.html' %}