{%set active_page = 'shop.html'%}
<!-- public facing landing page -->
<!DOCTYPE html>
<html>

<head>
    <style type="text/css">
    .navbar {
        background-color: #5d3f3f !important;
    }

    .hvr-shadow {
        display: inline-block;
        vertical-align: middle;
        -webkit-transform: perspective(1px) translateZ(0);
        transform: perspective(1px) translateZ(0);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-property: box-shadow;
        transition-property: box-shadow;
    }

    .hvr-shadow:hover,
    .hvr-shadow:focus,
    .hvr-shadow:active {
        box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
    }
    </style>
    {% include get_active_front_theme()+'/sections/resources.html'%}
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        {% set min_max = get_min_max_subcateg(subcategory.name) %}
        $( function() {

    $( "#slider-range" ).slider({
      range: true,
      min: {{min_max[0]}},
      max: {{min_max[1]}},
      values: [ {{filter_min_max[0]}}, {{filter_min_max[1]}} ],
      slide: function( event, ui ) {
        $( "#amount" ).val( "{{get_currency_symbol()}}" + ui.values[ 0 ] + " - {{get_currency_symbol()}}" + ui.values[ 1 ] );
      }
    });
    $( "#amount" ).val( "{{get_currency_symbol()}}" + $( "#slider-range" ).slider( "values", 0 ) +
      " - {{get_currency_symbol()}}" + $( "#slider-range" ).slider( "values", 1 ) );

    $( "#filter_btn" ).click(function() {
        //var pageURL = $(location).attr("href");
        // window.location.replace($(location).attr("href")+'?min='+$( "#slider-range" ).slider( "values", 0 )+'&max='+$( "#slider-range" ).slider( "values", 1 ));
        var url_part = $(location).attr("href");

        if(url_part.includes("?")){
            url_part = url_part.split('?')[0];
        };

        var url_to_search = url_part +'?min='+$( "#slider-range" ).slider( "values", 0 )+'&max='+$( "#slider-range" ).slider( "values", 1 );

        window.location.replace(url_to_search);
        //alert(url_to_search);

    });

  } );
  </script>
  {% include 'shop/blocks/common_styles.html'%}
  {% include get_active_front_theme()+'/sections/drawer_head.html'%}
</head>

<body>
    {% include get_active_front_theme()+'/sections/nav.html'%}
    <div class="shop-spacer-1">
    </div>
    <nav aria-label="breadcrumb ">
      <ol class="breadcrumb bg-white">
        <li class="breadcrumb-item"><a href="{{ url_for('www.index') }}">Home</a></li>
        <li class="breadcrumb-item"><a href="{{ url_for('shop.index') }}">Shop</a></li>
        <li class="breadcrumb-item"><a href="{{ url_for('shop.category', category_name=subcategory.category.name) }}">{{ subcategory.category.name }}</a></li>
        <li class="breadcrumb-item active"> {{ subcategory.name }} </li>
      </ol>
    </nav>
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                {%include 'shop/blocks/accordion.html'%}
                <p>
                    <label for="amount">Price range:</label>
                    <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
                </p>
                <div id="slider-range"></div>
                <br>
                <button id="filter_btn" class="btn btn-primary">filter</button>
            </div>
            <div class="col-md-8">
                <div style="height: 100px">
                </div>
                <div class="row">
                    {%for product in products%}
                    <div class="col-lg-3 col-md-3 col-sm-3 col-sx-3">
                        <a href="{{ url_for('shop.product', product_barcode=product.barcode) }}">
                            <div class="card prod hvr-shadow" style="margin-bottom: 10px;">
                                {%set filename_ = ''%}
                                {%if product.resources%}
                                {%set filename_ = product.resources[0].filename%}
                                {%set img_url = url_for('resource.product_image', filename=filename_) %}
                                {%else%}
                                {%set img_url = url_for('resource.product_image', filename='default') %}
                                {%endif%}
                                <!-- Card image -->
                                <div style="background-image: url('{{img_url}}'); background-size: cover; height: 100px;">
                                </div>
                                <!-- Card content -->
                                <div class="card-body text-center">
                                    <!-- Title -->
                                    <h6 class="card-title"><a>{{ product.name }}</a></h6>
                                    <!-- Text -->
                                    <p class="card-text">Rs {{product.selling_price}}</p>
                                    <!-- Button -->
                                </div>
                            </div>
                        </a>
                    </div>
                    <!-- Card -->
                    {%endfor%}
                </div>
                <nav>
                    <ul class="pagination">
                        {% if page != 1 %}
                        <li class="page-item"><a href="{{ url_for('shop.subcategory',
                sub_id=subcategory.id, page=page-1) }}" class="page-link">
                                <<</a> </li> {% endif %} {%for x in range(1, total_pages+1)%} {%if x==page%} <li class="page-item active">
                                    <a href="{{ url_for('shop.subcategory',
                sub_id=subcategory.id, page=loop.index) }}" class="page-link"> {{page}} <span class="sr-only">(current)</span></a>
                        </li>
                        {%else%}
                        <li class="page-item"><a href="{{ url_for('shop.subcategory',
                sub_id=subcategory.id, page=loop.index) }}" class="page-link"> {{x}} </a></li>
                        {%endif%}
                        {%endfor%}
                        {% if page != total_pages %}
                        <li class="page-item"><a href="{{ url_for('shop.subcategory',
                sub_id=subcategory.id, page=page+1) }}" class="page-link">>></a></li>
                        {% endif %}
                    </ul>
                </nav>
            </div>
        </div>
    </div>
    {% include get_active_front_theme()+'/sections/footer.html'%}
</body>

</html>
