@model LANCommander.Models.DashboardViewModel
@using ByteSizeLib
@{
    ViewData["Title"] = "Home Page";
}

<div class="container-xl">
    <div class="page-header">
        <div class="row align-items-center">
            <div class="col">
                <div class="page-pretitle">Overview</div>
                <h2 class="page-title">Dashboard</h2>
            </div>
        </div>
    </div>
</div>

<div class="page-body">
    <div class="container-xl">
        <div class="row row-cards">
            <div class="col-sm-4">
                <div class="card">
                    <div class="card-body p-2 text-center">
                        <div class="h1 m-0">1</div>
                        <div class="text-muted">Games</div>
                    </div>
                </div>
            </div>
            <div class="col-sm-8">
                <div class="card">
                    <div class="card-body">
                        <p class="mb-3">Storage Used: <strong>@(Model.TotalOtherSize + Model.TotalUploadDirectorySize) of @Model.TotalStorageSize</strong></p>
                        <div class="progress progress-separated mb-3">
                            <div class="progress-bar bg-primary" role="progressbar" style="width: @Math.Round((Model.TotalUploadDirectorySize.Bytes / Model.TotalStorageSize.Bytes) * 100)%;"></div>
                            <div class="progress-bar bg-info" role="progressbar" style="width: @Math.Round((Model.TotalOtherSize.Bytes / Model.TotalStorageSize.Bytes) * 100)%;"></div>
                            <div class="progress-bar bg-success" role="progressbar" style="width: @Math.Round((Model.TotalAvailableFreeSpace.Bytes / Model.TotalStorageSize.Bytes) * 100)%;"></div>
                        </div>
                        <div class="row">
                            <div class="col-auto d-flex align-items-center pe-2">
                                <span class="legend me-2 bg-primary"></span>
                                <span>Uploads</span>
                                <span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-muted">@Model.TotalUploadDirectorySize</span>
                            </div>
                            <div class="col-auto d-flex align-items-center pe-2">
                                <span class="legend me-2 bg-info"></span>
                                <span>Other</span>
                                <span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-muted">@Model.TotalOtherSize</span>
                            </div>
                            <div class="col-auto d-flex align-items-center pe-2">
                                <span class="legend me-2 bg-success"></span>
                                <span>Free</span>
                                <span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-muted">@Model.TotalAvailableFreeSpace</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>