{% load crispy_forms_field %}
<div class="col">
    <div class="card h-100 {% if value %}bg-success text-white{% endif %}" data-product-id="{{ product.pk }}">
        {% 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">
                <input type="number" step="1" inputmode="numeric" min="0"
                       name="unpriced_product-{{ product.pk }}" class="numberinput form-control" required="" id="unpriced_id_product-{{ product.pk }}"
                       value="{{ value|default:0 }}"
                >
                <span class="input-group-text" id="basic-addon1">cts</span>
            </div>
        </div>
    </div>
</div>
