<div class="card mb-3" style="width: 100%;">
    <div class="card-header text-dark"><h4>{{variation.product.title|lower|title}}</h4></div>
    <div class="row g-1">
        <div class="col-md-6">
            <div id="productImageCarousel" class="carousel slide" data-bs-ride="carousel">
                <div class="carousel-inner">
                    {% for image in variation.images.all|slice:":1" %}
                    <div class="carousel-item active">
                        <img src="{{image.image.url}}" class="d-block w-100 img-fluid rounded-start" alt="{{image.image.name}}">
                    </div>
                    {% endfor %}
                    {% for image in variation.images.all|slice:"1:" %}
                    <div class="carousel-item">
                        <img src="{{image.image.url}}" class="d-block w-100 img-fluid rounded-start" alt="{{image.image.name}}">
                    </div>
                    {% endfor %}
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#productImageCarousel" 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="#productImageCarousel" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card-body">
                <p class="card-text">
                    <table class="table table-sm">
                        <tbody>
                            {% for kv in variation.keyvalues.all %}
                            <tr>
                                <td class="text-center m-1 p-1" style="width: 35%;">{{kv.key.key}}</td>
                                <td class="text-center p-1 m-1" style="width: 65%;">{{kv.value.value}}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    <div>{{currency}} {{variation.price}} / {{variation.unit}}</div>
                    <div id="add2cartForm" class="mb-0 mt-2">
                        <form class="row g-1 align-items-center" onsubmit="add2cart(event, '{{variation.id}}');">
                            <div class="col-12">
                                <label class="visually-hidden" for="variationQtyFormInput{{variation.id}}">Qty</label>
                                <div class="input-group input-group-sm">
                                    <div class="input-group-text">{{variation.unit}}</div>
                                    <input type="text" class="form-control toDisable" id="variationQtyFormInput{{variation.id}}" placeholder="Qty">
                                    <div class="input-group-text"><i class="bi bi-cart-check" id="cartCheckIcon{{variation.id}}"></i></div>
                                    <button type="submit" class="btn btn-outline-dark btn-sm toDisable" id="add2cartBtn{{variation.id}}">
                                        <div class="spinner-border spinner-border-sm text-dark" id="add2cartSpinner{{variation.id}}" hidden role="status"></div>
                                        Add
                                    </button>
                                </div>
                            </div>
                        </form>
                        <div class="errormessage" id="add2cartError{{variation.id}}"></div>
                    </div>
                </p>
                <p class="card-text"><small class="text-muted">
                    {% for category in variation.product.categories.all %}
                        <span><a class="link-danger-dark toDisableAnchorTag" href="{% url 'store:products_by_category' category_slug=category.slug %}">{{category}}</a>&nbsp;</span>
                    {% endfor %}
                </small></p>
            </div>
        </div>
    </div>
    <div class="card-footer text-start bg-white text-dark">{{variation.info}}</div>
</div>