@model WeatherSet
@{
    ViewData["Title"] = "Home Page";
}

<div class="location">
    <div>@Model.Location.Name, @Model.Location.Region</div>
    <small>Last updated on @Model.Current.LastUpdated</small>
</div>

<div class="current-conditions">
    <div class="current-condition-name">@Model.Current.ConditionName</div>
    <div class="current-temperature">@Model.Current.Temperature<span class="degrees">&#176;F</span></div>
</div>

<div class="detailed-conditions">

    @foreach (var forecast in Model.Forecast)
    {
        var displayHours = new Dictionary<int, string>
        { 
            [6] = "Morning", 
            [12] = "Noon",
            [17] = "Evening",
            [22] = "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-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>