@page "/"

<PageTitle>MP Mono UI</PageTitle>

<div class="card">
    <div class="card-header">
        <div class="d-flex justify-content-between">
            <h1 class="col-10">@AppName</h1>

            @*<div class="col-3">
            <div class="px-0 mx-1 py-1 text-center rounded">
            <NavLink href="Alarms" class="text-decoration-none" title="ALARMS Detail Page">
            <AlarmsOverview compMode="true"></AlarmsOverview>
            </NavLink>
            </div>
            </div>*@
            <NavLink href="Alarms" class="text-decoration-none col-2" title="ALARMS Detail Page">
                <AlarmsOverview compMode="true"></AlarmsOverview>
            </NavLink>
        </div>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-3">
                <NavLink href="Production" class="text-decoration-none" title="PRODUCTION Detail Page">
                    <div class="card text-dark mb-3" style="box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;">
                        <h5 class="card-header text-center fw-bold"><i class="fa-solid fa-gears"></i> PRODUCTION</h5>
                        <div class="card-body bg-light text-dark p-1">
                            <MachStatsOverview></MachStatsOverview>
                            <hr />
                            <ProdOverview></ProdOverview>
                        </div>
                    </div>
                </NavLink>
            </div>
            <div class="col-3">
                <NavLink href="Parameters" class="text-decoration-none" title="PARAMETERS Detail Page">
                    <div class="card text-dark mb-3" style="box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;">
                        <h5 class="card-header text-center fw-bold"><i class="fa-solid fa-list-ul"></i> PARAMETERS</h5>
                        <div class="card-body bg-light text-dark p-1">
                            <ParamOverview ShowReduced="true"></ParamOverview>
                        </div>
                    </div>
                </NavLink>
            </div>
            <div class="col-3">
                <NavLink href="Maintenance" class="text-decoration-none" title="MAINTENANCE Detail Page">
                    <div class="card text-dark mb-3" style="box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;">
                        <h5 class="card-header text-center fw-bold"><i class="fa-solid fa-screwdriver-wrench"></i> MAINTENANCE</h5>
                        <div class="card-body bg-light text-dark p-1">
                            <MaintTaskPending compMode="true"></MaintTaskPending>
                        </div>
                    </div>
                </NavLink>
            </div>

            <div class="col-3">
                @*<div class="px-0 mx-1 py-1 text-center rounded">

                </div>*@
                <NavLink href="Tools" class="text-decoration-none" title="TOOLS Detail Page">
                    <div class="card text-dark mb-3" style="box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;">
                        <h5 class="card-header text-center fw-bold"><i class="fa-solid fa-toolbox"></i> TOOLS</h5>
                        <div class="card-body bg-light text-dark p-1">
                            <ToolsOverview ShowReduced="true"></ToolsOverview>
                        </div>
                    </div>
                </NavLink>
            </div>
        </div>
    </div>
</div>