{% load crispy_forms_field %}
<div class="col">
    <div class="card h-100 bg-success text-white" 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.name|slice:"1" }}
                </span>
            </div>
        {% endif %}
        <div class="card-body">
            <h4 class="card-title">{{ product.name }}</h4>
            <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>