{% extends 'base.html' %}

{% block title %}
  Official ArmaLaser | Laser Sights for Guns
{% endblock %}

{% block metadescription %}
  ArmaLaser offers the most technologically advanced red and green lasers for the world's most popular pistols.
{% endblock %}


{% block css %}
<link rel="stylesheet" href="/assets/css/jquery-ui.min.css">
<style>
#top {
    display: none;
    height: 100px;
}
.ui-dialog-titlebar { display: none; }
.carousel ol.carousel-indicators .active {
    background: #FE0000;
    border: 1px solid #FE0000;
}
.carousel .carousel-indicators li {
    background: #fff;
}
</style>
{% endblock %}


{% block outsidecontainer %}
{% endblock %}


{% block content %}
<div id="movie-bg">
    <div class="container-fluid">
        <div class="row">
            <!-- ====  Tax Weekend Sale  ===== -->
            {% if now > '2019-04-11 23:59:59' and now < '2019-04-15 23:59:00' %}
                {% include 'Home/sale.component.html' %}
            {% else %}
                {% include 'Home/carousel.component.html' %}
            {% endif %}
        </div>
    </div>
</div>

<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<div class="container">
    <div class="row">
        <div id="top"></div>
        <h1 class="home-title text-center">
            Explore Lasers &amp; Laser-Fit
            <sup style="top:12px; right:10px; font-size:9px; font-weight:bold;">
                TM
            </sup>
                Holsters by Pistol Brand
        </h1>
    </div>
</div>


<div class="container p2">
    <div class="row text-center">
        <div class="col-md-10 col-md-offset-1">
            <div id="brand-icons-wrapper">

                {% for brand in logos %}
                  <a href="/{{ ( brand.name|trim('®') )|lower }}">
                  <!-- <a href="/home/brand-products?brand={{ brand.pistol_brand_name }}"> -->
                    <div class="brand-icon-box">
                      <span class="helper"></span>
                      <!-- <p>{{brand.pistol_brand_name }}</p> -->
                      <picture>
                          <source srcset="/assets/images/pistol-logos/{{ brand.pistol_brand_logo }}"
                              alt="ArmaLaser products for {{ brand.pistol_brand_name }}" media="(min-width:1200px)">
                          <source srcset="/assets/images/pistol-logos/{{ brand.pistol_brand_logo_med }}"
                              alt="ArmaLaser products for {{ brand.pistol_brand_name }}" media="(min-width:760px)">
                          <img src="/assets/images/pistol-logos/{{ brand.pistol_brand_logo_small }}"
                              alt="ArmaLaser products for {{ brand.pistol_brand_name }}">
                      </picture>
                    </div>
                  </a>
                {% endfor %}

            </div>

        </div><!-- // .col-md-12  -->
    </div><!-- // .row -->

    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div>
                <p style="color:#b2b2b2; padding-left:15px;">
                  *ArmaLaser, Inc is not affiliated with the above firearms
                  manufacturers, firearms manufacturer subsidiaries, or firearms
                  manufacturer parent companies.
                </p>
            </div>
        </div>
    </div>
</div>
{% endblock %}


{% block bottomjs %}
<script src="/assets/js/jquery-ui.min.js"></script>

<!-- Tax Weekend 2019 -->
{% if now > '2019-04-11 23:59:59' and now < '2019-04-15 23:59:59' %}
<script src=/assets/js/countdowntimer.js></script>
{% endif %}

<!-- President's Day 2019 -->
{% if now > '2019-02-14 13:59:59' and now < '2019-02-18 23:59:59' %}
<script src=/assets/js/countdowntimer.js></script>
{% endif %}

<!-- Memorial Day 2018 -->
{% if now > '2018-05-24 23:59:59' and now < '2018-05-28 23:59:59' %}
<script src=/assets/js/countdowntimer.js></script>
{% endif %}

<!-- Presidents Day 2018 -->
{% if now > '2018-02-15 23:59:59' and now < '2018-02-19 23:59:59' %}
<script src=/assets/js/countdowntimer.js></script>
{% endif %}

<!-- Christmas 2017 -->
{% if now > '2017-12-25 23:59:59' and now < '2018-01-01 23:59:59' %}
<script src=/assets/js/countdowntimer.js></script>
{% endif %}

<!-- Thanksgiving 2017 -->
{% if now > '2017-11-30 23:59:59' and now < '2017-12-24 23:59:59' %}
<script src=/assets/js/countdowntimer.js></script>
{% endif %}

<script>
$(document).ready(function () {

    // console.log('URL: ', getUrl());

    function getUrl() {
        return window.location.href;
    }

    $("#christmas-banner").click(function(){
        $("#top").css('display', 'block');
    });

    // use javascript for date data (VS code doesn't like TWIG code here)
    {% if now > '2017-11-23 09:00:00' and now < '2017-11-27 23:59:59' %}

      // create new Date object
      var date = new Date();

    //   console.log(`date.getDate(): ${date.getDate()}`);

      if(date.getDate() >= 22 && date.getDate() <= 27) {
         $("#black-friday").dialog({
            modal: true,
            resizable: false,
            draggable: false,
            minWidth: 960,
            show: 100,
            hide: {
               effect: 'explode',
               delay: 4000,
               duration: 1000,
               easing: 'easeInQuad'
            },
            position: {
               at: 'center, top'
            }
         });

         // close div
           $("#black-friday").dialog('close');
         }

         if(date.getDate() > 28) {
         $("#black-friday").hide();
      }

    {% endif %}

});
</script>
{% endblock %}