@using MP.MONO.UI.Components
@using MP.MONO.Core.DTO
@using MP.MONO.UI.Data

@inject CurrentDataService MMDataService

@if (currProd != null)
{
    <ul class="list-group">
        <li class="list-group-item list-group-item-action">
            <div class="d-flex w-100 justify-content-between" title="order">
                <div><i class="fa-solid fa-cart-arrow-down fa-2x"></i></div>
                <div>
                    <h5><b>@currProd.Order</b></h5>
                </div>
            </div>
            <div class="d-flex w-100 align-items-center" title="done/ordered">
                <div class="flex-fill pe-1">
                    <div class="w-100">
                        <div class="progress" style="height: 0.5rem;">
                            <div class="progress-bar" role="progressbar" style="@percProgress(currProd.CurrQty, currProd.OrderQty)" aria-valuenow="@currProd.CurrQty" aria-valuemin="0" aria-valuemax="@currProd.OrderQty"></div>
                        </div>
                    </div>
                </div>
                <div class="ps-1 small">
                    <b>@currProd.CurrQty</b>/@currProd.OrderQty
                </div>
            </div>
        </li>
        <li class="list-group-item">
            <div class="d-flex w-100 justify-content-between" title="Article">
                <div>
                    <i class="fa-solid fa-receipt fa-2x"></i>
                </div>
                <div>
                    <h5><b>@currProd.ItemCode</b></h5>
                </div>
            </div>
        </li>
        <li class="list-group-item">
            <div class="d-flex w-100 justify-content-between" title="Current Cycle Time">
                <div><i class="fa-solid fa-stopwatch fa-2x"></i></div>
                <div class="h2" title="">
                    <b>@($"{currProd.CycleTime.Hours:00}:{currProd.CycleTime.Minutes:00}:{currProd.CycleTime.Seconds:00}")</b>
                </div>
            </div>
        </li>
        <li class="list-group-item">
            <div class="d-flex w-100 justify-content-between small" title="Program">
                <div><i class="fa-solid fa-terminal"></i></div>
                <div>@currProd.ProgName</div>
            </div>
            @if (!string.IsNullOrEmpty(currProd.Message))
            {
                <div class="d-flex w-100 justify-content-end">
                    <small><i>@currProd.Message</i></small>
                </div>
            }
        </li>
    </ul>

}
else
{
    <ul>
        <li>Current Production</li>
        <li>Work Order detail</li>
        <li>Production Events</li>
    </ul>
    <LoadingDataSmall></LoadingDataSmall>
}