@inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Ecommerce.Frontend.OrderLineViewModel>
@using Dynamicweb.Ecommerce.Frontend
@using System.Globalization

@functions {
	string? DoubleToString(double? value)
	{
		if (value.HasValue)
		{
			return Math.Round(value.Value, 2).ToString(CultureInfo.InvariantCulture);
		}
		return null;
	}
}

@{
    var orderline = Model;
    var product = orderline?.GetProduct();
    var orderlineId = orderline?.Id;
    var quantity = orderline?.Quantity;
    double? stepQty = product?.PurchaseQuantityStep > 0 ? product.PurchaseQuantityStep : 1;
    double? minQty = product?.PurchaseMinimumQuantity > 0 ? product.PurchaseMinimumQuantity : 1;
    double? maxQty = null;

    if (product?.ProductType == Dynamicweb.Ecommerce.Products.ProductType.Stock && !product.NeverOutOfstock)
    {
        maxQty = product.StockLevel;
    }

    string submitAction = "const form = this.form || this.closest('form'); if (form?.hasAttribute('hx-post')) { form.requestSubmit(); return; } swift.Cart.Update(event);";
    string stepDownAction = "const input = this.parentNode.querySelector('[data-qty]'); input.stepDown(); const form = this.form || this.closest('form'); if (form?.hasAttribute('hx-post')) { form.requestSubmit(); return; } swift.Cart.Update(event);";
    string stepUpAction = "const input = this.parentNode.querySelector('[data-qty]'); input.stepUp(); const form = this.form || this.closest('form'); if (form?.hasAttribute('hx-post')) { form.requestSubmit(); return; } swift.Cart.Update(event);";
}

<div class="d-flex align-items-center justify-content-between position-relative" style="width:fit-content;">

    <input id="QuantityOrderLine@(orderlineId)" name="QuantityOrderLine@(orderlineId)" value="@DoubleToString(quantity)" step="@DoubleToString(stepQty)" min="@DoubleToString(minQty)" max="@DoubleToString(maxQty)" class="form-control border-0 rounded-0 px-1 flex-grow-0 text-center" type="number" inputmode="numeric" data-qty onchange="@submitAction">
    <span class="visually-hidden">@Translate("Type a number, or use the decrease or increase button to change the quantity")</span>

    <button type="button" data-qty-step="decrease" aria-label="@Translate("The button to decrease the quantity")" class="d-flex btn btn-outline-secondary p-2 m-1 border-0 order-first" data-dw-button="outline-secondary" onclick="@stepDownAction" tabindex="-1">
        <svg class="pe-none" focusable="false" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
            <path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M19 13H5v-2h14v2z"></path>
        </svg>
    </button>

    <button type="button" data-qty-step="increase" aria-label="@Translate("The button to increase the quantity")" class="d-flex btn btn-outline-secondary p-2 m-1 border-0 order-last" data-dw-button="outline-secondary" onclick="@stepUpAction" tabindex="-1">
        <svg class="pe-none" focusable="false" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
            <path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M11 12.9961v6h2v-6h6v-2h-6v-6h-2v6H5v2h6z"></path>
        </svg>
    </button>

    <span class="position-absolute pe-none" data-dw-button style="border: 1px solid rgba(var(--bs-body-color-rgb),.1); inset: 0; border-radius: var(--dw-btn-border-radius);"></span>

</div>
