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


<div class="d-flex justify-content-between w-100 align-items-center">
    @if (currStatus != null)
    {
        <div class="px-2 text-center">
            <div class="px-0 mx-0 text-center rounded bg-primary text-light">
                <div><b>@currStatus.Name</b> - @currStatus.SerNumber</div>
                <div class="bg-dark opacity-50 text-light" style="font-size: 0.7em; width: 16em;"><b>@currStatus.Manufacturer</b> - @currStatus.Model</div>
            </div>
        </div>
        <div class="px-2">
            <div class="d-flex justify-content-between">
                <div class="px-0 mx-1 text-center rounded @statusCss">
                    <div><b>@statusDesc</b></div>
                    <div class="bg-dark opacity-50 text-light" style="font-size: 0.7em; width: 16em;">Machine Status</div>
                    @*<div class="bg-light opacity-50 text-dark" style="font-size: 0.7em; width: 16em;">Machine Status</div>*@
                </div>
                <div class="px-0 mx-1 text-center rounded @modeCss">
                    <div><b>@modeDesc</b></div>
                    <div class="bg-dark opacity-50 text-light" style="font-size: 0.7em; width: 16em;">Machine Mode</div>
                </div>
            </div>
        </div>
    }
    else
    {
        <div class="px-2">
            <LoadingData DisplaySize="LoadingData.CtrlSize.Small"></LoadingData>
        </div>
    }
    <div class="px-2">
        <div class="px-0 mx-0 text-center rounded bg-secondary text-light">
            <LoginDisplay></LoginDisplay>
            <div class="bg-dark opacity-50 text-light" style="font-size: 0.7em; width: 16em;">logged user</div>
        </div>
    </div>
</div>