@inherits ViewModelTemplate<OrderListViewModel>
@using Dynamicweb.Rendering
@using Dynamicweb.Ecommerce.Frontend
@using Dynamicweb.Frontend

@{
    var baseUrl = Dynamicweb.Context.Current?.Request.QueryString.Get("baseUrl") ?? null;
    var culture = Dynamicweb.Context.Current?.Request.Headers.Get("x-dw-culture") ?? null;
    var cultureInfo = culture is not null ? new System.Globalization.CultureInfo(culture) : null;
}

@* If no orders are found, show a message *@
@if (!(Model?.Orders?.Any() ?? false))
{
    <div class="vstack text-center fs-7 fw-semibold gap-2">
        
        <div class="d-grid rounded-circle m-auto" style="aspect-ratio:1;background-color:rgba(var(--bs-body-color-rgb), .0275);">
            <span class="icon fs-5 text-muted p-3">
                @ReadFile("/Files/Images/Icons/cube.svg")
            </span>
        </div>
        <div>@Translate("No orders found")</div>
        
    </div>
    return;
}
<div class="list-group list-group-flush">
    @foreach (var order in Model.Orders)
    {
        <a class="list-group-item list-group-item-action px-0 py-3 d-flex flex-wrap align-items-center gap-2 gap-sm-3 text-decoration-none text-body"
            href="@(baseUrl)?OrderId=@(order.Id)"
            tabindex="@(baseUrl is not null ? 0 : -1)"
            aria-disabled="@(baseUrl is not null)"
        >
            <div class="flex-grow-1 min-w-0">
                <div class="fs-7 fw-semibold text-body">#@(order.Id)</div>
                <div class="fs-8 text-muted text-truncate">
                    @* To short date string based on culture *@
                    @(order.CompletedDate?.ToString("d", cultureInfo))
                    <span>· @(order.SumProductQuantities()) @(order.SumProductQuantities() == 1 ? Translate("item") : Translate("items"))</span>
                </div>
            </div>
            <div class="ms-sm-auto fs-7">
                @if (order.TryGetOrderState(out var state))
                {
                    <span class="badge lh-sm badge-neutral-light" style="@(state?.StateColor is not null ? $"background-color: color-mix(in srgb, {state.StateColor?.Hex} 20%, transparent) !important; color: {state.StateColor?.Hex} !important" : null)">
                        @(state?.Name)
                    </span>
                }
            </div>
            <div class="text-price fs-7 fw-semibold text-price ms-auto">@(order.Price.PriceFormatted)</div>
        </a>
    }
</div>