@page "{id}"
@model ManagementPage.Pages.DevicePageModel
@{
    ViewData["Title"] = "DevicePage";
}

<div>
    <h2>@Model.device.Name</h2>
    <h4>Current Conditions</h4>
    <div>
        Temp: @Model.data.FirstOrDefault()?.Temperature.ToString("N1")°C
    </div>
    <div>
        Humidity: @Model.data.FirstOrDefault()?.Humidity.ToString("N1")%
    </div>
</div>
<div >
    <canvas id="tempChart" width="800" height="400"></canvas>
</div>

<script src="~/lib/chart.js/dist/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.js" integrity="sha256-8AdWdyRXkrETyAGla9NmgkYVlqw4MOHR6sJJmtFGAYQ=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0/dist/chartjs-adapter-moment.min.js" integrity="sha256-sFB24K2xU2EOgWAtb3ySAGjhMqcUvUJGmwjDcTQa04k=" crossorigin="anonymous"></script>
<script src="~/js/temperature_chart.js" asp-append-version="true"></script>
<script>
    var ctx = document.getElementById('tempChart');
    var temp = @Json.Serialize(Model.temperature);
    var humidity = @Json.Serialize(Model.humidity);
    var chart = CreateChart(ctx, temp, humidity);
</script>