@model IEnumerable<long>

<style>
    .progress {
        border-radius: 0 !important;
    }

    .player-stat-icon {
        height: 1.5rem;
        width: 1.5rem;
        background-size: 1.5rem 1.5rem;
    }
</style>
<div class="row p-0 ml-auto mr-auto mb-4">
    <div class="col-12 col-xl-10 p-0 ml-auto mr-auto p-0 pl-lg-3 pr-lg-3 ">
        <ul class="nav nav-tabs border-top border-bottom nav-fill" role="tablist">
            @foreach (SharedLibraryCore.Dtos.ServerInfo server in ViewBag.Servers)
            {
                <li class="nav-item">
                    <a asp-controller="Radar" asp-action="Index" asp-route-serverId="@server.ID" class="nav-link @(server.ID == ViewBag.ActiveServerId ? "active": "")" aria-selected="@(server.ID == ViewBag.ActiveServerId ? "true": "false")"><color-code value="@server.Name"></color-code></a>
                </li>
            }
        </ul>
    </div>
</div>

<div class="row p-0 ml-auto mr-auto col-12 col-xl-10">
    <div class="p-0 pl-lg-3 pr-lg-3 m-0 col-lg-3 col-12 text-lg-right text-center player-data-left" style="opacity: 0;">
    </div>
    <div class="pl-0 pr-0 pl-lg-3 pr-lg-3 col-lg-6 col-12 pb-4">
        <div id="map_name" class="h4 text-center pb-2 pt-2 mb-0 bg-primary">&mdash;</div>
        <div id="map_list" style="background-size:cover; padding-bottom: 100% !important;">
            <canvas id="map_canvas" style="position:absolute;"></canvas>
        </div>
    </div>

    <div class="p-0 pl-lg-3 pr-lg-3 m-0 col-lg-3 col-12 text-lg-left text-center player-data-right" style="opacity: 0;">
    </div>
</div>

<!-- images used by canvas -->
<img class="hide" id="hud_death" src="~/images/radar/death.png" />

@section scripts {
    <environment include="Development">
        <script type="text/javascript" src="~/js/liveradar.js" defer="defer"></script>
    </environment>
    
    <script type="text/javascript">
        const radarDataUrl = '@Url.Action("Data", "Radar", new { serverId = ViewBag.ActiveServerId })';
        const mapDataUrl = '@Url.Action("Map", "Radar", new { serverId = ViewBag.ActiveServerId })';
    </script>
}