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

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

    /* Pulse Grow */
    @-webkit-keyframes hvr-pulse-grow {
        to {
            -webkit-transform: scale(1.01);
            transform: scale(1.01);
        }
    }

    @keyframes hvr-pulse-grow {
        to {
            -webkit-transform: scale(1.01);
            transform: scale(1.01);
        }
    }

    .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'%}

    {% 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 active">{{ current_category.name }}</a></li>

      </ol>
    </nav>
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                {%include 'shop/blocks/accordion.html'%}
            </div>
            <div class="col-md-8">
                <div class="row">
                    {%for subcategory in current_category.subcategories%}
                    <div class="col-lg-6 col-md-6 col-sm-6 col-sx-6">
                        <a href="{{ url_for('shop.subcategory', sub_id=subcategory.id, page=1) }}">
                        <div class="card hvr-shadow" style="margin-bottom: 10px;">
                            <!-- Card image -->
                            <div style="background-image: url('{{subcategory.get_one_image_url()}}'); background-size: cover; height: 200px;" >
                                <!-- Card content -->
                            <div class="" style="height: 120px;">

                            </div>
                            <div class="card-body text-center" style="background-color: white; padding-top: 5px; padding-bottom: 5px;">
                                <!-- Title -->
                                <h5 class="card-title" style="margin:0;"><a>{{ subcategory.name }}</a></h5>
                                <!-- Text -->
                                <p class="card-text" style="margin:0; font-size: 10px">{{subcategory.get_num_products()}} products</p>
                                <!-- Button -->
                            </div>
                            </div>

                        </div>
                        </a>
                    </div>
                    <!-- Card -->
                    {%endfor%}
                </div>
            </div>
        </div>
    </div>
    {% include get_active_front_theme()+'/sections/footer.html'%}
</body>

</html>
