{% 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.initials }}
                </span>
            </div>
        {% endif %}
        <div class="card-body">
            <h5 class="card-title">{{ product.name }}</h5>
            <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' 'inputmode' 'numeric' %}
                <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>
