WeatherDashboard/WeatherDashboard.Web/Views/Home/Index.cshtml

@model WeatherSet
@{
    ViewData["Title"] = $"{Model.Location.Name}, {Model.Location.Region} Weather";

    var updateAge = (DateTime.Now - Model.Current.LastUpdated.Value).Minutes;
}

<div class="location">
    <small>Last updated @updateAge minutes ago</small>
</div>

<div class="row current-conditions">
    <div class="col current-temperature">
        @Model.Current.Temperature<span class="degrees">&#176;F</span>
    </div>
    <div class="col current-details">
        <div>@Model.Current.ConditionName</div>
        <div>Feels Like @Model.Current.FeelsLike</div>
        <div>Humidity @Model.Current.Humidity</div>
        <div>Winds @Model.Current.WindDirection / @Model.Current.WindSpeed</div>
    </div>
</div>

<div class="forecast-details">

    @foreach (var forecast in Model.Forecast)
    {
        var displayHours = new Dictionary<int, string>
        {
            [7] = "Morning",
            [14] = "Afternoon",
            [19] = "Evening",
            [23] = "Night"
        };

        var hourForecasts = forecast.HourForecasts
            .Join(displayHours, f => f.Time.Value.Hour, d => d.Key, (f, d) => new
            {
                TimeOfDay = d.Value,
                Forecast = f
            })
            .ToList();

        <div class="row day-name">
            <div class="col">@forecast.Date.FriendlyDate()</div>
        </div>

        <div class="row day-summary">
            <div class="col col-6">@forecast.Summary.ConditionName </div>
            <div class="col col-6">@forecast.Summary.HighTemp / @forecast.Summary.LowTemp</div>
        </div>

        @foreach (var hourForecast in hourForecasts)
        {
            <div class="row day-detail">
                <div class="col">@hourForecast.TimeOfDay</div>
                <div class="col">@hourForecast.Forecast.ConditionName / @hourForecast.Forecast.Temperature</div>
            </div>
        }
    }

</div>