{% load crispy_forms_field %}
<div class="col">
    <div class="card h-100 {% if field.value %}bg-success text-white{% endif %}">
        {% if product.image %}
            <img src="{{ product.image.url }}" class="card-img">
        {% else %}
            <div class="card-img product-img-placeholder"
                 style="background-color: hsl({{ product.color_hue }}, 60%, 80%)">
                <span>
                    {{ product.name|slice:"1" }}
                </span>
            </div>
        {% endif %}
        <div class="card-body">
            <h4 class="card-title">{{ product.name }}</h4>
            <div class="input-group">
                <button class="btn btn-danger" type="button" onclick="decrementValue('{{ field.id_for_label }}')"><i class="fa-solid fa-minus"></i></button>
                {% crispy_field field 'class' 'form-control' %}
                <button class="btn btn-success {% if field.value %}border-white{% endif %}" type="button" onclick="incrementValue('{{ field.id_for_label }}')"><i class="fa-solid fa-plus"></i></button>
            </div>
        </div>
    </div>
</div>