#errorCatcher Echo
##
## Specifying an encoding of UTF-8 is usually safe, but if your text is 
## actually in Latin-1, then you should replace the string "UTF-8" with "latin-1"
## If you do this, you should also change the 'Content-Type' metadata below.
#encoding UTF-8
##
#set global $page = "home"

    #include "header.html.tmpl"
      
    <script type="text/javascript">
        var finalRotation;
        #if $Extras.has_key("mqtt_websockets_enabled") and $Extras.mqtt_websockets_enabled == '1'
        var mqttMsg;
        var mqttclient = "website" + Math.floor(Math.random() * 999999999);
        #end if
        var moment_locale = "$system_locale_js";
        moment.locale(moment_locale);
        
        var homepage_graphgroup = "$Extras.highcharts_homepage_graphgroup";

        function autoRefreshPage() {
            location.reload();
        }
        
        ajaxweewx().then(function(weewx_data) { // This call will make sure json/weewx_data.json is loaded before anything else
            update_weewx_data(weewx_data); // Initial call to update (date, daily high, low, etc)
            belchertown_debug(weewx_data); // Make weewx_data.json available in debugging console
            #if $Extras.has_key("forecast_enabled") and $Extras.forecast_enabled == '1'
            // Load forecast
            ajaxforecast(); // Initial call to load forecast data like 8 day outlook, weather icon and observation text
            #end if
        
            #if $Extras.has_key("mqtt_websockets_enabled") and $Extras.mqtt_websockets_enabled == '0' and $Extras.has_key("webpage_autorefresh") and $Extras.webpage_autorefresh != '0'
            // Reload the page on an interval for updated data. This is for non-mqtt websocket websites
            setTimeout(autoRefreshPage, $Extras.webpage_autorefresh);
            #end if
        
            jQuery(document).ready(function() {
                #if $Extras.has_key("aqi_enabled") and $Extras.aqi_enabled == '1'
                get_aqi_color( "$aqi" );
                #end if

                #if $Extras.has_key("beaufort_category") and $Extras.beaufort_category == '1'
                // weewx >= 4.2 can convert to Beaufort directly, but to improve backwards compatibility, convert windSpeed to
                // knots and then use Javascript function to convert to Beaufort
                jQuery(".beaufort").html( beaufort_cat( kts_to_beaufort( "$current.windSpeed.knot.toString(addLabel=False)" ) ) );
                #end if

                get_outTemp_color( "$unit.unit_type.outTemp", "$current.outTemp.formatted" );
            
                rotateThis( "$current.windDir.formatted" );

                // Update the Last Updated timestamp with moment.js,
                updated = tzAdjustedMoment( $current.dateTime.raw ).format("$obs.label.time_last_updated");
                updated_text = "$obs.label.header_last_updated " + updated;
                jQuery(".updated").html( updated_text );
            
                #if $Extras.has_key('earthquake_enabled') and $Extras.earthquake_enabled == '1'            
                if ( moment.unix( "$earthquake_time" ).isValid() ) {
                    // Check that the time is the time (number) and not the "no earthquake available" wording
                    jQuery(".earthquake-time").html( tzAdjustedMoment( "$earthquake_time" ).format( "$obs.label.time_earthquake" ) );
                } else {
                    jQuery(".earthquake-time").html( "$earthquake_time" );
                }
                #end if
            
                #if $Extras.has_key('highcharts_enabled') and $Extras.highcharts_enabled == '1'
                var graphgroups_raw = $charts; // All charts and IDs
                var thisPageGraphs = graphgroups_raw[homepage_graphgroup]; // Filter all charts down to the ones we want for this page
                // Loop through the graph groups for this page and add the graph divs to the page
                try {
                    thisPageGraphs.forEach( graphID => {
                        jQuery(".graph-outer").append('<div class="col-sm-6"><div id="' + graphID + '" style="width:100%;height:100%;margin-top:20px;"></div></div>');
                    });
                    showChart(homepage_graphgroup);
                } catch(err) {
                    console.log("ERROR: Cannot add graphs from [" + homepage_graphgroup + "] graph group: " + err.message);
                }
                #end if
            
                #if $Extras.has_key("mqtt_websockets_enabled") and $Extras.mqtt_websockets_enabled == '1'
                if ( getURLvar("offline") && ( getURLvar("offline") == "true" || getURLvar("offline") == "1" ) ) {
                    belchertown_debug("MQTT: offline url var detected. Skipping MQTT connect.");
                } else {
                    connect(); // Begin mqtt after weewx initial load
                    // If the Restart button is clicked, reconnect to mqtt and update weewx and forecast data
                    jQuery(document).on('click', '.restart-interval', function() { 
                        ajaxweewx().then(function(weewx_data) { // This call will make sure json/weewx_data.json is loaded before anything else
                            update_weewx_data(weewx_data); // Initial call to update (date, daily high, low, etc)
                            belchertown_debug(weewx_data); // Make weewx_data.json available in debugging console

                            #if $Extras.has_key("forecast_enabled") and $Extras.forecast_enabled == '1'
                            ajaxforecast(); // Update forecast data
                            #end if
                            ajaximages(); // Update radar and home page hook "img src" if present
                            connect(); // Restart mqtt after weewx data's re-loaded
                            #if $Extras.has_key('highcharts_enabled') and $Extras.highcharts_enabled == '1'
                            showChart(homepage_graphgroup);
                            #end if
                        }).catch(function(e){
                            console.log(e);
                        });
                    });
                }
            
                #if $Extras.has_key("reload_hook_images") and $Extras.reload_hook_images == '1'
                // Update any images in the radar section or hooks
        
                #if $Extras.has_key("reload_images_radar") and $Extras.reload_images_radar != '-1'
                    var reload_radar_timer = $Extras.reload_images_radar * 1000; // convert to millis
                    setTimeout(function() { ajaximages("radar", $Extras.reload_images_radar); }, reload_radar_timer);
                #end if
            
                #if $Extras.has_key("reload_images_hook_asi") and $Extras.reload_images_hook_asi != '-1'
                    var reload_asi_timer = $Extras.reload_images_hook_asi * 1000; // convert to millis
                    setTimeout(function() { ajaximages("index-hook-after-station-info", $Extras.reload_images_hook_asi); }, reload_asi_timer);
                #end if

                #if $Extras.has_key("reload_images_hook_af") and $Extras.reload_images_hook_af != '-1'
                    var reload_af_timer = $Extras.reload_images_hook_af * 1000; // convert to millis
                    setTimeout(function() { ajaximages("index-hook-after-forecast", $Extras.reload_images_hook_af); }, reload_af_timer);
                #end if

                #if $Extras.has_key("reload_images_hook_as") and $Extras.reload_images_hook_as != '-1'
                    var reload_as_timer = $Extras.reload_images_hook_as * 1000; // convert to millis
                    setTimeout(function() { ajaximages("index-hook-after-snapshot", $Extras.reload_images_hook_as); }, reload_as_timer);
                #end if

                #if $Extras.has_key("reload_images_hook_ac") and $Extras.reload_images_hook_ac != '-1'
                    var reload_ac_timer = $Extras.reload_images_hook_ac * 1000; // convert to millis
                    setTimeout(function() { ajaximages("index-hook-after-charts", $Extras.reload_images_hook_ac); }, reload_ac_timer);
                #end if
            
                #end if
            
                #else
                // MQTT Websockets not enabled

                #if $Extras.has_key("show_last_updated_alert") and $Extras.show_last_updated_alert == '1'
                // Check if we need to alert on old information - if time now, minus the last update is greater than the threshold, show an alert.
                if ( ( Math.floor(new Date().getTime()/1000.0) - $Extras.last_updated_alert_threshold ) > $current.dateTime.raw ) {
                    belchertown_debug("Last Updated Alert: The weewx report timestamp is "+$current.dateTime.raw+". The current timestamp is "+Math.floor(new Date().getTime()/1000.0)+". The threshold is "+$Extras.last_updated_alert_threshold+". Report timestamp is greater than threshold of current time, showing no update alert.");
                    last_updated_alert_text = "<i class='fa fa-exclamation-triangle' style='color:red;'></i> $obs.label.header_last_updated_alert";
                    jQuery(".last-updated-alert").html( last_updated_alert_text );
                    jQuery(".last-updated-alert").show();
                }
                #end if
                        
                // Update the Last Updated timestamp with moment.js,
                updated = tzAdjustedMoment( $current.dateTime.raw ).format("$obs.label.time_last_updated");
                updated_text = "$obs.label.header_last_updated " + updated;
                jQuery(".updated").html( updated_text );
            
                #end if
            
                //  display the relevant forecast; a new session will display the default forecast, a reloaded session the currently displayed forecast
                if ( sessionStorage.getItem ("forecastInterval")  ) {
                    interval = sessionStorage.getItem("forecastInterval");
                    sessionStorage.setItem ( "forecastInterval" , null );
                    forecast_select( interval );
                } else {
                    sessionStorage.setItem ( "forecastInterval" , null );
                    forecast_select( sessionStorage.getItem( "defaultInterval") );
                }
            });
        }).catch(function(e) {
            console.log(e);
        });
        
    </script>
  
    <div class="site-inner">
        <main class="content">    

            <article class="weewx frontpage" itemscope="" itemtype="http://schema.org/CreativeWork">
            
                <!-- Top bar with city and share -->
                <div class="wx-stn-info-container">
                    <div class="wx-stn-name">
                        <h1>$obs.label.home_page_header</h1>                    
                    </div>
                    <div class="wx-stn-info">
                        $obs.label.powered_by
                    </div>
                    <div class="clear"></div>
                    <!-- Updated time ago -->
                    <div class="updated-wrapper">
                        <div class="onlineMarkerOuter">
                            <span class="loadingMarker" style="display:none"></span>
                            <span class="onlineMarker" style="display:none"></span>
                            <span class="offlineMarker" style="display:none"></span>
                        </div>
                        <div class="updated"></div><!-- AJAX moment.js -->
                    </div>
                    #if $social_html != ""
                    $social_html
                    #end if
                    <div class="clear"></div>
                    <div class="last-updated-alert" style="display:none;"></div><!-- AJAX moment.js -->
                    #if $Extras.has_key("forecast_alert_enabled") and $Extras.forecast_alert_enabled == '1'
                    <div class="wx-stn-alert"><span class="wx-stn-alert-text"></span></div><!-- AJAX -->
                    #end if
                </div>
                
                <!-- First row with temperature, observation data and radar -->
                <div class="row temperature-row">
                    <div class="col-lg-4 toprow-height">
                        <div class="row obs-row">
                        
                            <!-- Temperature -->
                            <div class="weather-obs-top">
                                <div class="row temp-observation">
                                    <div class="col-sm-6 current_obs_top">
                                        #if $Extras.has_key("forecast_enabled") and $Extras.forecast_enabled == '1' and $current_obs_icon != ""
                                        <img id="wxicon" src="$relative_url/images/$current_obs_icon">
                                        #end if
                                    </div>
                                    <div class="col-sm-6 current_temp">
                                        <div class="outtemp_outer"><span class="outtemp">$current.outTemp.formatted</span><sup class="outtempunitlabelsuper">$unit.label.outTemp</sup></div><!-- AJAX -->
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6 current-obs-container">
                                        <div class="current-obs-text">
                                            $current_obs_summary
                                        </div>
                                        #if $Extras.has_key("aqi_enabled") and $Extras.aqi_enabled == '1'
                                        <div class="aqi_outer">
                                            $obs.label.aqi: <span class="wx-aqi">$aqi</span> (<span class="wx-aqi-category">$aqi_category</span>)
                                            #if $Extras.has_key("aqi_location_enabled") and $Extras.aqi_location_enabled == '1'
                                            <span class="aqi_location_outer"><br>$aqi_location</span>
                                            #end if
                                        </div>
                                        #end if
                                    </div>
                                    <div class="col-sm-6">
                                        #if $current.appTemp.has_data
                                        <div class="feelslike">$obs.label.feels_like: $current.appTemp</div><!-- AJAX -->
                                        #end if
                                        <div class="stn-high-low">
                                            <table class="stn-high-low-table">
                                                <tbody>
                                                    <tr>
                                                        <td class="stn-high-low-table-title">$obs.label.highest_temperature</td>
                                                        <td class="stn-high-low-table-title border-left">$obs.label.lowest_temperature</td>
                                                    </tr>
                                                    <tr>
                                                        <td class="high">$day.outTemp.max</td>
                                                        <td class="border-left low">$day.outTemp.min</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Wind -->
                        <div class="obs-wind-divider"></div>
                        <div class="row windrow">
                            <div class="weather-obs-bottom">
                                <div class="col-sm-12 current_wind">
                                    <div class="col-sm-6">
                                        <div class="compass">
                                            <div class="direction">
                                                <span class="curwinddir">
                                                #if $current.windDir.ordinal_compass == "N/A"
                                                --
                                                #else
                                                $current.windDir.ordinal_compass
                                                #end if
                                                </span>
                                                <span class="curwinddeg">
                                                #if $current.windDir.raw is None:
                                                -
                                                #else
                                                $current.windDir.format("%.0f")
                                                #end if
                                                </span>
                                            </div>
                                            <div class="arrow"></div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 windspeedtable">
                                        <table class="wind-table">
                                            <tbody>
                                                <tr>
                                                    <td class="windtext">$obs.label.wind_speed</td>
                                                    <td class="windtext border-left gust">$obs.label.wind_gust</td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <span class="curwindspeed">
                                                            $current.windSpeed.toString(addLabel=False, NONE_string="--")
                                                        </span>
                                                    </td>
                                                    <td class="border-left gust">&nbsp;
                                                        <span class="curwindgust">
                                                            $current.windGust.toString(addLabel=False, NONE_string="--")
                                                        </span>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="mph" colspan="3">$unit.label.windSpeed</td>
                                                </tr>
                                                #if $Extras.has_key("beaufort_category") and $Extras.beaufort_category == '1'
                                                <tr>
                                                    <td class="beaufort" colspan="4"></td>
                                                </tr>
                                                #end if
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <!-- Wind Hook -->
                                #if os.path.exists("index_hook_after_wind_table.inc")
                                <!-- Start of index_hook_after_wind_table -->
                                <div class="index_hook_after_wind_table">
                                    #include "index_hook_after_wind_table.inc"
                                </div>
                                <!-- End of index_hook_after_wind_table -->
                                #end if
                            </div>
                        </div>
                    </div>
                    
                    <!-- Station observations -->
                    <div class="col-lg-3 current-almanac toprow-height border-left border-right">
                        <div class="station-observations weather-obs-top">
                            <table cellpadding="0" cellspacing="0">
                                <tbody>
                                    $station_obs_html
                                </tbody>
                            </table>
                            <!-- Station Observations Hook -->
                            #if os.path.exists("index_hook_after_station_observations.inc")
                            <!-- Start of index_hook_after_station_observations -->
                            <div class="index_hook_after_station_observations">
                                #include "index_hook_after_station_observations.inc"
                            </div>
                            <!-- End of index_hook_after_station_observations -->
                            #end if
                        </div>                        
                        
                        <!-- Sun and Moon section -->
                        <div class="weather-obs-bottom">
                            <table cellpadding="0" cellspacing="0">
                                <tbody>
                                    <tr>
                                        <td colspan="2">
                                            <div class="row small-almanac">
                                                #if $obs.label.sun_and_moon and $obs.label.sun_and_moon != ''
                                                <div class="sun-moon-title">
                                                    $obs.label.sun_and_moon
                                                </div>
                                                #end if
                                                <div class="col-sm-5 sun">
                                                    <span class="sunrise-set-image"><img src="$relative_url/images/sunrise.png"></span><span class="sunrise-value"></span><!-- moment.js -->
                                                    <br>
                                                    <span class="sunrise-set-image"><img src="$relative_url/images/sunset.png"></span><span class="sunset-value"></span><!-- moment.js -->
                                                </div>
                                                <div class="col-sm-7 moon">
                                                    <div class="moon-container">
                                                        <span class="moon-icon">
                                                            <div class="moon-icon"></div><!-- JS -->
                                                        </span>
                                                        <strong><span class="moon-phase">#echo $almanac.moon_phase.title()#</span></strong><!-- AJAX -->
                                                        <br>
                                                        <span class="moon-visible"><strong>$almanac.moon_fullness%</strong> $obs.label.moon_visible</span><!-- AJAX -->
                                                    </div>
                                                </div>
                                                <div class="clear"></div>
                                                #if $Extras.has_key("almanac_extras") and $Extras.almanac_extras == '1' and $almanac.hasExtras
                                                <!-- Almanac Modal -->
                                                <div class="sun-moon-modal"><a href="#almanac" data-toggle="modal" data-target="#almanac">$obs.label.almanac_more_details</a></div>
                                                <!-- Almanac Modal -->
                                                <div class="modal fade" id="almanac" tabindex="-1" role="dialog" aria-labelledby="almanac" aria-hidden="true">
                                                    <div class="modal-dialog modal-lg" role="document">
                                                        <div class="modal-content">
                                                            <div class="modal-header">
                                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                                    <span aria-hidden="true">&times;</span>
                                                                </button>
                                                                <h4 class="modal-title" id="almanac">$obs.label.almanac_modal_title</h4>
                                                            </div>
                                                            <div class="almanac-extras-modal-body modal-body">
                                                                #include "celestial.inc"
                                                            </div><!-- AJAX -->
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-primary" data-dismiss="modal">$obs.label.close</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                #end if
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    <!-- Radar image -->
                    <div class="col-lg-5 radar-map toprow-height">
                        #if os.path.exists("index_radar.inc")
                        #include "index_radar.inc"
                        #else
                        <div class="radar_image">$radar_html</div>
                        #end if
                    </div>
                </div>
                <!-- End of first row -->
                
                #if os.path.exists("index_hook_after_station_info.inc")
                <!-- Start of index_hook_after_station_info row -->
                <div class="row index-hook-after-station-info border-bottom">
                    #include "index_hook_after_station_info.inc"
                </div>
                <!-- End of index_hook_after_station_info row -->
                #end if

                #if $Extras.has_key("forecast_enabled") and $Extras.forecast_enabled == '1' and (($Extras.has_key("forecast_interval_hours") and $Extras.forecast_interval_hours != '0') or not ($Extras.has_key("forecast_interval_hours")))
                <!-- Start of second row -->
                <div class="row forecastrow">
                    <!-- Forecast -->
                    <div class="col-lg-8 forecast-title">
                        $obs.label.forecast_header <span class="forecast-subtitle"></span><!-- moment.js -->
                    </div>
                    <div class="col-lg-4 forecast-menu">
                        $obs.label.forecast_interval_caption <div class="forecast-button" onclick="forecast_select(1);" id="button1">1</div>
                        <div class="forecast-button" onclick="forecast_select(3);" id="button3">3</div>
                        <div class="forecast-button" onclick="forecast_select(24);" id="button24">24</div>
                    </div>
                        
                    #if $Extras.has_key("forecast_interval_hours") and $Extras.forecast_interval_hours != '0'
                    #if $Extras.has_key("forecast_interval_hours") and $Extras.forecast_interval_hours == '1'
                    <script>forecast_default(1);</script>
                    #end if
                    <div id="1hour-selected-forecast" style="display: none;">
                        <!-- 1hour Forecast -->
                        <div class="col-lg-12 row 1hr_forecasts row-no-padding"></div><!-- JS -->
                    </div>
                    #end if
                
                    #if $Extras.has_key("forecast_interval_hours") and $Extras.forecast_interval_hours == '3'
                    <script>forecast_default(3);</script>
                    #end if
                    <div id="3hour-selected-forecast" style="display: none;">
                        <!-- 3hour-Forecast -->
                        <div class="col-lg-12 row 3hr_forecasts row-no-padding"></div><!-- JS -->
                    </div>        
                
                    #if ($Extras.has_key("forecast_interval_hours") and $Extras.forecast_interval_hours == '24') or not ($Extras.has_key("forecast_interval_hours"))
                    <script>forecast_default(24);</script>
                    #end if
                    <div id="24hour-selected-forecast" style="display: none;">
                        <!-- 24hour-Forecast -->
                        <div class="col-lg-12 row 24hr_forecasts row-no-padding"></div><!-- JS -->
                    </div>        
                </div>

                                          
                #end if
                
                <!-- End of second row -->
                
                #if os.path.exists("index_hook_after_forecast.inc")
                <!-- Start of index_hook_after_forecast row -->
                <div class="row index-hook-after-forecast border-bottom">
                    #include "index_hook_after_forecast.inc"
                </div>
                <!-- End of index_hook_after_forecast row -->
                #end if                        
                
                <!-- Start of third row -->
                <div class="row eq-stats-row">            
                    #if $Extras.has_key('earthquake_enabled') and $Extras.earthquake_enabled == '1'
                    <div class="col-sm-9 stn-quick-stats">
                    #else
                    <div class="col-sm-12 stn-quick-stats">
                    #end if
                        
                        <!-- Today Snapshot Stats -->
                        <div class="row">
                            <div class="snapshot-records-text">
                                $obs.label.weather_snapshots <a href="$relative_url/records">$obs.label.weather_snapshots_link</a>
                            </div>
                            
                            <div class="col-sm-6 stn-quick-stats">
                                <div class="stats-title">
                                    <span class="snapshot-records-today-header"></span><!-- JS and AJAX -->
                                </div>
                                <table>
                                    <tr>
                                        <td><b>$obs.label.snapshot_high:</b></td>    <td><span class="dailystatshigh">$day.outTemp.max</span></td><!-- AJAX -->
                                        <td><b>$obs.label.snapshot_low:</b></td>    <td><span class="dailystatslow">$day.outTemp.min</span></td><!-- AJAX -->
                                    </tr>
                                    <tr>
                                        <td><b>$obs.label.snapshot_today_avg_wind:</b></td>    <td><span class="dailystatswindavg">$day.wind.avg</span></td><!-- AJAX -->
                                        <td><b>$obs.label.snapshot_today_high_wind:</b></td>        <td><span class="dailystatswindmax">$day.wind.max</span></td><!-- AJAX -->                    
                                    </tr>
                                    <tr>
                                        <td><b>$obs.label.snapshot_today_rain:</b></td>    <td><span class="dailystatsrain">$day.rain.sum</span></td><!-- AJAX -->
                                        <td><b>$obs.label.snapshot_today_rainrate:</b></td>    <td><span class="dailystatsrainrate">$day.rainRate.max</span></td><!-- AJAX -->
                                    </tr>
                                </table>
                            </div>

                            <!-- This Month Snapshot Stats -->
                            <div class="col-sm-6 stn-quick-stats border-left">
                                <div class="stats-title">
                                    <span class="snapshot-records-month-header"></span><!-- JS and AJAX -->
                                </div>
                                <table>
                                    <tr>
                                        <td><b>$obs.label.snapshot_high:</b></td>    <td><span class="monthstatshigh">$month.outTemp.max</span></td><!-- AJAX -->
                                        <td><b>$obs.label.snapshot_low:</b></td>    <td><span class="monthstatslow">$month.outTemp.min</span></td><!-- AJAX -->
                                    </tr>
                                    <tr>
                                        <td><b>$obs.label.snapshot_month_avg_wind:</b></td>    <td><span class="monthstatswindavg">$month.wind.avg</span></td><!-- AJAX -->
                                        <td><b>$obs.label.snapshot_month_high_wind:</b></td>        <td><span class="monthstatswindmax">$month.wind.max</span></td><!-- AJAX -->
                                    </tr>
                                    <tr>
                                        <td><b>$obs.label.snapshot_month_rain:</b></td>        <td><span class="monthstatsrain">$month.rain.sum</span></td><!-- AJAX -->
                                        <td><b>$obs.label.snapshot_month_rainrate:</b></td>    <td><span class="monthstatsrainrate">$month.rainRate.max</span></td><!-- AJAX -->
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                    
                    #if $Extras.has_key('earthquake_enabled') and $Extras.earthquake_enabled == '1'
                    <!-- Earthquake data -->
                    <div class="col-sm-3 earthquake-container border-left">
                        <div class="eq-title">$obs.label.earthquake_title</div>
                        <div class="eq-region">
                            <span class="earthquake-time"></span><!-- moment.js -->
                            #if $earthquake_place != ''
                            <br>
                            <i class="fa fa-map-marker"></i> <a href="$earthquake_url" target="_blank">$earthquake_place</a>
                            <div class="row earthquake-info">
                                <div class="col-sm-6">
                                    <i class="wi wi-earthquake"></i>$obs.label.earthquake_magnitude <span class="magnitude">$earthquake_magnitude</span>
                                </div>
                                <div class="col-sm-6 earthquake-distance-outer border-left">
                                    <span class="earthquake-distance">$earthquake_distance_away $earthquake_distance_label $earthquake_bearing</span>
                                </div>
                            </div>
                            #end if
                        </div>
                    </div>
                    #end if
                </div>
                <!-- End of third row -->
                
                #if os.path.exists("index_hook_after_snapshot.inc")
                <!-- Start of index_hook_after_snapshot row -->
                <div class="row index-hook-after-snapshot border-bottom">
                    #include "index_hook_after_snapshot.inc"
                </div>
                <!-- End of index_hook_after_snapshot row -->
                #end if                          
                
                #if $Extras.has_key('highcharts_enabled') and $Extras.highcharts_enabled == '1'
                <!-- Begin of fourth row - dynamic charts -->
                <div class="row highcharts-row graph">
                    <div class="col-sm-12 wx-graph-front">
                        <span class="homepage-graphgroup-title">$graphpage_titles_dict[$Extras.highcharts_homepage_graphgroup]</span> <a href="$relative_url/graphs">$obs.label.homepage_graphs_link</a>
                    </div>
                    
                    <div class="graph-outer row"></div><!-- JS populated -->
                    
                </div>
                <!-- End of fourth row -->
                #end if
                
                <div class="clear"></div>
                
                #if os.path.exists("index_hook_after_charts.inc")
                <!-- Start of index_hook_after_charts row -->
                <div class="row index-hook-after-charts border-top">
                    #include "index_hook_after_charts.inc"
                </div>
                <!-- End of index_hook_after_charts row -->
                #end if  
                
            </article>

        </main>
    </div>

    #include "footer.html.tmpl"