{% extends 'frontend/layouts/index.html.twig' %}
{% block stylesheets %}
    <style>
        .card-product .img-wrap {
            border-radius: 3px 3px 0 0;
            overflow: hidden;
            position: relative;
            height: auto;
            text-align: center;
        }
        .card-product .img-wrap img {
            height: 400px;
            width: 100%;
            object-fit: cover;
        }
        .card-product .info-wrap {
            overflow: hidden;
            padding: 15px;
            border-top: 1px solid #eee;
        }
        .card-product .bottom-wrap {
            padding: 15px;
            border-top: 1px solid grey;
        }

        .card-product .price-old {
            color: #999;
            margin-left: 10px;
        }
        .price-wrap.h5{
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .product_font {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            margin: auto;
            bottom: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 35px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            font-weight: bold;
        }
        body, html {
            background-color: #000;
            color: #fff;
            margin: 0;
            padding: 0;
            height: 100%;
            overflow-y: auto; /* Ensure that the body can scroll */
        }

        /* For medium screens (between 600px and 900px wide) */
        @media (min-width: 601px) and (max-width: 900px) {
            .card-product .img-wrap img {
                height: 250px;
            }
        }
    </style>
{% endblock %}
{% block publiccontent %}
    <div class="container">
        <br>  <h1 class="text-center">All Products Are Here !!!</h1>
        <div class="row">
            <div class="col-auto">
                <div class="dropdown">
                    <button class="btn btn-outline-primary dropdown-toggle" type="button" id="categoryDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                      Filter by Category
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="categoryDropdown">
                        <li><a class="dropdown-item" href="{{ path('app_front_shop') }}">All Category</a></li>
                        {% for category in categories %}
                            <li><a class="dropdown-item" href="{{ path('app_front_shop') }}?category={{ category.slug }}">{{ category.name|capitalize }}</a></li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
            {#<div class="col-auto">
                <a class="btn btn-danger">Clear Filter</a>
            </div>#}
        </div>
        <hr>
        <div class="row">
            {% for product in products %}
                <div class="col-md-4">
                    <figure class="card card-product">
                        <div class="img-wrap">
                           <img alt="product_background" src="
                                {% if product.images and file_exists_public(product.images[0]) %}
                                    {{ asset('uploads/productImages/' ~ product.images[0]) }}
                                {% else %}
                                    {{ asset('assets/images/product_background.png')}}
                                {% endif %}
                            ">
                            {% if product.isDisplayProductName %}
                                <div class="product_font">{{ product.name }}</div>
                            {% endif %}
                        </div>
                        <div class="bottom-wrap">
                            <h4 class="title">{{ product.name }}</h4>
                            <h6 class="category">{{ product.category.name|capitalize }}</h6>
                            <div class="price-wrap h5">
                                <span class="price-new">Regular Price : €{{ product.regularprice|number_format(2,',','.') }}</span>
                                <a href="{{ product.producturl }}" class="btn btn-sm btn-primary float-right" >Buy Now</a>
                            </div> <!-- price-wrap.// -->
                        </div> <!-- bottom-wrap.// -->
                    </figure>
                </div> <!-- col // -->
            {% endfor %}
        </div> <!-- row.// -->
    </div>
{% endblock %}