{% load store_extras %}
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-3 text-center">
    {% for product in products %}
    <div class="col">
        <div class="card h-100 border-dark">
            <div class="card-header bg-dark text-white">
                {% if product.discount %}
                    <span class="badge bg-dark text-white position-relative fs-6 w-75">
                        {{currency}}
                        <span class="text-decoration-line-through">{{product.price}}</span>
                        {{product.price|calculate_discount:product.discount.percent}}
                        / {{product.unit}}
                        <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
                            {{product.discount.percent}}% off
                        </span>
                    </span>
                {% else %}
                    <span class="badge bg-dark text-white fs-6 w-75">
                        {{currency}} {{product.price}} / {{product.unit}}
                    </span>
                {% endif %}
            </div>
            <div id="producImageCarousel{{product.id}}" class="carousel slide" data-bs-ride="carousel">
                <div class="carousel-inner">
                    {% for image in product.images.all|slice:":1" %}
                    <div class="carousel-item active">
                        <img src="{{image.image.url}}" class="d-block w-100" alt="{{image.name}}">
                    </div>
                    {% endfor %}
                    {% for image in product.images.all|slice:"1:" %}
                    <div class="carousel-item">
                        <img src="{{image.image.url}}" class="d-block w-100" alt="{{image.name}}">
                    </div>
                    {% endfor %}
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#producImageCarousel{{product.id}}" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#producImageCarousel{{product.id}}" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
            </div>
            <div class="card-body">
                <h6 class="card-title">
                    <a href="{% url 'store:product' product_slug=product.product.slug variation_id=product.id %}"><span class="badge productBadge fs-6 w-100">{{product.product.title|lower|title}}</span></a>
                </h6>
                <p class="card-text">
                    {% if product.keyvalues.all %}
                    <div class="accordion" id="accordion{{product.id}}">
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="heading{{product.id}}">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{product.id}}" aria-expanded="false" aria-controls="collapse{{product.id}}">
                                    Specifications
                                </button>
                            </h2>
                            <div id="collapse{{product.id}}" class="accordion-collapse collapse table-responsive" aria-labelledby="heading{{product.id}}" data-bs-parent="#accordion{{product.id}}">
                                <table class="accordion-body table table-hover table-borderless table-sm align-middle text-center">
                                    <tbody>
                                        {% for kv in product.keyvalues.all %}
                                            <tr>
                                                <td style="width: 35%;" class="text-center">{{kv.key.key|lower|title}}</td>
                                                <td style="width: 65%;" class="text-center">{{kv.value.value|lower|title}}</td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    {% endif %}
                    <div class="text-start">
                        {% if product.info|length > 200 %}
                            {{product.info|truncatechars:200}}
                            <a class="link-danger-dark" data-bs-toggle="offcanvas" href="#productInfoOffcanvas{{product.id}}" aria-controls="productInfoOffcanvas{{product.id}}">
                                more
                            </a>
                            <div class="offcanvas offcanvas-end" tabindex="-1" id="productInfoOffcanvas{{product.id}}" aria-labelledby="productInfoOffcanvas{{product.id}}Label">
                                <div class="offcanvas-header bg-dark text-white">
                                    <h5 class="offcanvas-title" id="productInfoOffcanvas{{product.id}}Label">{{product.product.title|lower|title}}</h5>
                                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                                </div>
                                <div class="offcanvas-body text-start">{{product.info}}</div>
                            </div>
                        {% else %}
                            {{product.info}}
                        {% endif %}
                    </div>
                </p>
            </div>
            <div class="card-footer">
                <form onsubmit="add2cart(event, '{{product.id}}');">
                    <div class="input-group input-group-sm w-100">
                        <span class="input-group-text bg-dark text-white border-dark">{{product.unit}}</span>
                        <input type="text" class="form-control border-dark" placeholder="qty" id="addToCartInput{{product.id}}">
                        <span class="input-group-text bg-white text-dark border-dark" id="cartIcon{{product.id}}"><i class="bi bi-cart"></i></span>
                        <button type="submit" class="btn btn-outline-dark" id="cartSubmitBtn{{product.id}}">Add</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {% endfor %}
</div>