@using System.Runtime.InteropServices.JavaScript
@model YongeStreet.Controllers.CityModel
@{
    ViewData["Title"] = "La Province";
}


<div>
    <h2>@Model.City - @Model.Date.ToString("yyyy-MM-dd")</h2>
</div>

<div class="uk-height-large uk-flex uk-flex-center uk-flex-middle uk-background-cover uk-light" 
     style=""
     id="leaflet-map"
     data-city="@Model.City"
     data-date="@Model.Date.ToString("yyyy-MM-dd")"
     data-initial-zoom="@Model.mapLocation.zoom"
     data-initial-lon="@Model.mapLocation.lon"
     data-initial-lat="@Model.mapLocation.lat">
</div>

<table class="uk-table uk-table-striped">
    <thead>
    <tr>
        <th>Année</th>
        <th>Longeur Du Réseau Routier</th>
        <th>AUgmentation</th>
    </tr>
    </thead>
    <tbody>
    
    @foreach (var stats in Model.CityRoadLengthStats)
    {
        <tr>
            <td>
                @if (stats.Date != Model.Date)
                {
                    @Html.ActionLink(stats.Date.ToString("yyyy-MM-dd"),
                        "City",
                        "Home",
                        new { City = Model.City, Date = stats.Date.ToString("yyyy-MM-dd"), },
                        htmlAttributes: new {@class = "map-link"})
                    
                }
                else
                {
                     @stats.Date.ToString("yyyy-MM-dd")
                }
                
            </td>
            <td>@((stats.MunicipalRoadLength / 1000).ToString("N"))</td>
            <td></td>
        </tr>
    }
    </tbody>
</table>

<script src="~/js/quebec-province-map.js" type="module"></script>