<div class="heat_index_weather">

	<?php /*  Location Title  */ ?>
	<div class="weather_title">Weather Conditions for <?php echo $info->location->name; ?>:</div>

    <?php /*  Icon & Current Temp  */ ?>
    <div class="weather_snapshot">
        <div class="weather_icon"><img src="<?php echo $info->weather->info->current_observation->icon_url; ?>" alt="" title="" style="" /></div>
        <div class="weather_temp"><span style="font-weight: bold; color: <?php echo HeatIndexController::getTempColorRGB($info->weather->info->current_observation->temp_f); ?>"><?php echo round($info->weather->info->current_observation->temp_f); ?> &deg;F</span></div>
        <br class="clear" />
        <div class="weather_condition"><?php echo $info->weather->info->current_observation->weather; ?> with Winds <?php echo $info->weather->info->current_observation->wind_string; ?></div>
    </div>

    <?php /*  Hight/Low  */ ?>
    <div class="forecast_snapshot">
    	<div class="hi_lo_label">High</div><span style="font-weight: bold; color: <?php echo HeatIndexController::getTempColorRGB($info->weather->info->forecast->simpleforecast->forecastday[0]->high->fahrenheit); ?>"><?php echo round($info->heat_index->high->t); ?> &deg;F</span><br />
    	<div class="hi_lo_label">Low</div><span style="font-weight: bold; color: <?php echo HeatIndexController::getTempColorRGB($info->weather->info->forecast->simpleforecast->forecastday[0]->low->fahrenheit); ?>"><?php echo round($info->weather->info->forecast->simpleforecast->forecastday[0]->low->fahrenheit); ?> &deg;F</span><br />
    	<?php echo $info->weather->info->forecast->simpleforecast->forecastday[0]->pop; ?>% chance of precip.<br />
    	Sunset <?php echo date('g:i a', strtotime($info->weather->info->sun_phase->sunset->hour . ':' . $info->weather->info->sun_phase->sunset->minute)); ?>
    </div>

    <?php /*  Humidity  */ ?>
    <div class="heat_index_snapshot">
    	<div class="humidity_label">Current Humidity</div><b><?php echo $info->weather->info->current_observation->relative_humidity; ?></b><br />
    	<div class="humidity_label">High Humidity</div><b><?php echo $info->heat_index->high->h; ?>%</b><br />
    	<div class="humidity_label">UV Index <a href="https://www.epa.gov/sunsafety/uv-index-scale-1" target="_blank"><img src="<?php echo asset('/images/icons/information_16px.png'); ?>" alt="" title="" style="vertical-align: middle;" /></a></div><?php echo $info->weather->info->current_observation->UV; ?><br />
    	<div class="humidity_label">Visibility</div><?php echo $info->weather->info->current_observation->visibility_mi; ?> miles
    </div>

    <?php /*  Information  */ ?>
    <div class="weather_time">
    	Station: <?php echo $info->weather->info->current_observation->observation_location->full; ?><br />
    	Observation Time: <?php echo date('g:i a, l, n/j/Y', strtotime($info->weather->info->current_observation->observation_time_rfc822)); ?><br />
    	Page Loaded: <?php echo date('g:i a, l, n/j/Y', time()); ?>
    </div>

   	<br class="clear" /><br />

   	<?php /*  Recommendation  */ ?>
   	<div class="columns">
   		
   		<?php /*  Heat Index (Current & Forecast)  */ ?>
   		<?php foreach (array('current' => 'Current', 'high' => 'Forecasted') as $type => $title): ?>
	   		<div class="half">

	   			<div class="weather_title"><?php echo $title; ?> Conditions: <?php echo $info->heat_index->{$type}->t; ?>&deg; F, <?php echo $info->heat_index->{$type}->h; ?>% hum. - Heat Index of <?php echo $info->heat_index->{$type}->i; ?></div><br />

	            <div class="temperature_bar" style="height: 8px;" data-category="<?php echo $info->heat_index->{$type}->category; ?>" data-color="<?php echo $info->heat_index->{$type}->color; ?>"></div>
	            <div class="bar_marker <?php if ($info->heat_index->{$type}->category == 1): ?> black <?php endif; ?>">normal</div>
	            <div class="bar_marker <?php if ($info->heat_index->{$type}->category == 2): ?> black <?php endif; ?>">notice</div>
	            <div class="bar_marker <?php if ($info->heat_index->{$type}->category == 3): ?> black <?php endif; ?>">caution</div>
	            <div class="bar_marker <?php if ($info->heat_index->{$type}->category == 4): ?> black <?php endif; ?>">warning</div>
	            <div class="bar_marker <?php if ($info->heat_index->{$type}->category == 5): ?> black <?php endif; ?>">danger</div>

	            <div class="weather_index">
	                <div class="heat_index_value">Heat Index</div>
	                <?php echo $info->heat_index->{$type}->i; ?>
	            </div>

	            <?php /*  Category 1: Normal  */ ?>
	            <?php if ($info->heat_index->{$type}->category == 1): ?>
	                <img src="<?php echo asset('images/icons/max_5_hours_48px.png'); ?>" class="recommendation" alt="" title="Maximum of 5 hours of practice per day." />
	                <img src="<?php echo asset('images/icons/drink_water_48px.png'); ?>" class="recommendation" alt="" title="Provide ample amounts of water." />

	                <h3 style="color: <?php echo $info->heat_index->{$type}->color; ?>;">Normal</h3>

	                <ul>
	                    <li>Maximum of 5 hours of practice today.</li>
	                    <li>Provide ample amounts of water.</li>
	                </ul>
	            <?php endif; ?>

	            <?php /*  Category 2: Notice  */ ?>
	            <?php if ($info->heat_index->{$type}->category == 2): ?>
	                <img src="<?php echo asset('images/icons/max_5_hours_48px.png'); ?>" class="recommendation" alt="" title="Maximum of 5 hours of practice per day." />
	                <img src="<?php echo asset('images/icons/drink_water_48px.png'); ?>" class="recommendation" alt="" title="Water should always be available and athletes should be able to take in as must water as they desire." />

	                <h3 style="color:<?php echo $info->heat_index->{$type}->color; ?>;">Notice</h3>

	                <ul>
	                    <li>Maximum of 5 hours of practice today.</li>
	                    <li>Provide ample amounts of water.</li>
	                    <li>Water should always be available and athletes should be able to take in as much water as they desire.</li>
	                    <li>Watch/monitor athletes for necessary action.</li>
	                </ul>
	            <?php endif; ?>

	            <?php /*  Category 3: Caution  */ ?>
	            <?php if ($info->heat_index->{$type}->category == 3): ?>
	                <img src="<?php echo asset('images/icons/max_5_hours_48px.png'); ?>" class="recommendation" alt="" title="Maximum of 5 hours of practice per day." />
	                <img src="<?php echo asset('images/icons/drink_water_48px.png'); ?>" class="recommendation" alt="" title="Water should always be available and athletes should be able to take in as must water as they desire." />
	                <img src="<?php echo asset('images/icons/recovery_48px.png'); ?>" class="recommendation" alt="" title="Practices limited to 3 hours maximum.  Mandatory minimum 3 hour recovery period between practices." />
	                <img src="<?php echo asset('images/icons/delay_48px.png'); ?>" class="recommendation" alt="" title="Consider postponing practice to later in the day." />

	                <h3>Caution</h3>

	                <ul>
	                    <li>Maximum of 5 hours of practice today.</li>
	                    <li>OSAA Recommendation:  Consider postponing practice to later in the day.</li>
	                    <li>Practice length a maximum of 3 hours.</li>
	                    <li>Mandatory 3 hour recovery period between practices.</li>
	                    <li>Contact sports and activities with additional equipment - Helmets and other possible equipment removed if not involved in contact or necessary for safety.</li>
	                    <li>Provide ample amounts of water.</li>
	                    <li>Water should always be available and athletes should be able to take in as much water as they desire.</li>
	                    <li>Watch/monitor athletes for necessary action.</li>
	                </ul>
	            <?php endif; ?>

	            <?php /*  Category 4: Warning  */ ?>
	            <?php if ($info->heat_index->{$type}->category == 4): ?>
	                <img src="<?php echo asset('images/icons/max_5_hours_48px.png'); ?>" class="recommendation" alt="" title="Maximum of 5 hours of practice per day." />
	                <img src="<?php echo asset('images/icons/drink_water_48px.png'); ?>" class="recommendation" alt="" title="Water should always be available and athletes should be able to take in as must water as they desire." />
	                <img src="<?php echo asset('images/icons/recovery_48px.png'); ?>" class="recommendation" alt="" title="Practices limited to 3 hours maximum.  Mandatory minimum 3 hour recovery period between practices." />
	                <img src="<?php echo asset('images/icons/alert_delay_48px.png'); ?>" class="recommendation" alt="" title="Highly recommended to postpone practice to a later time in the day." />

	                <h3 style="color:<?php echo $info->heat_index->{$type}->color; ?>;">Warning</h3>

	                <ul>
	                    <li>Maximum of 5 hours of practice today.</li>
	                    <li>OSAA Recommendation:  Postpone practice to later in the day.</li>
	                    <li>Practice length a maximum of 3 hours.</li>
	                    <li>Mandatory 3 hour recovery period between practices.</li>
	                    <li>Alter uniform by removing items if possible - Allow for changes to dry t-shirts and shorts.</li>
	                    <li>Contact sports and activities with additional equipment - Helmets and other possible equipment removed if not involved in contact or necessary for safety.</li>
	                    <li>Reduce time of planned outside activity as well as indoor activity if air conditioning is unavailable.</li>
	                    <li>Provide ample amounts of water.</li>
	                    <li>Water should always be available and athletes should be able to take in as much water as they desire.</li>
	                    <li>Watch/monitor athletes for necessary action.</li>
	                </ul>
	            <?php endif; ?>

	            <?php /*  Category 5: Danger  */ ?>
	            <?php if ($info->heat_index->{$type}->category == 5): ?>
	                <img src="<?php echo asset('images/icons/no_practice_48px.png'); ?>" class="recommendation" alt="" title="Stop all outside activities." />

	                <h3 style="color:<?php echo $info->heat_index->{$type}->color; ?>;">Danger</h3>

	                <ul>
	                    <li>OSAA Recommendation:  Stop all outside activity in practice and/or play, and stop all inside activity if air conditioning is unavailable.</li>
	                </ul>
	            <?php endif; ?>

	   		</div>
	   	<?php endforeach; ?>

   	</div>
    

</div>