{% extends "base.html" %}

{% block title %}Tide Aware at Coral Gables{% endblock %}

{% block menu_items %}
    <li class="current_page_item"><a href="{{url_for('homepage')}}">Homepage</a></li>
    <li><a href="{{url_for('view_gables_data')}}">View Gables Data</a></li>
    <li><a href="{{url_for('view_data')}}">View Other Data</a></li>
    <li><a href="{{url_for('about')}}">About Us</a></li>
    <li><a href="{{url_for('contact')}}">Contact Us</a></li>
    <li><a href="{{url_for('admin_home')}}">Admin</a></li>
{% endblock %}

{% block content %}
    <!-- load provisional data dynamically -->
    <script>
        $("document").ready(function(){
            Plotly.plot('cocoplum_boat_clearance', {});
            Plotly.plot('cocoplum_depth', {});
            Plotly.plot('cocoplum_salinity', {});
            Plotly.plot('blueroad_boat_clearance', {});
            Plotly.plot('blueroad_depth', {});
            Plotly.plot('blueroad_salinity', {});

            $.ajax({
                url: "{{url_for('homepage_data')}}",
                type: "GET",
                contentType: "application/json"
            }).done(function(data) {
                $("#provisional").html("The following is provisional data");
                Plotly.newPlot('cocoplum_boat_clearance', data.boat_clearance[0]);
                Plotly.newPlot('cocoplum_depth', data.depth[0]);
                Plotly.newPlot('cocoplum_salinity', data.salinity[0]);
                Plotly.newPlot('blueroad_boat_clearance', data.boat_clearance[1]);
                Plotly.newPlot('blueroad_depth', data.depth[1]);
                Plotly.newPlot('blueroad_salinity', data.salinity[1]);
            }).fail(function() {
                alert("An error occurred. Please reload the page and try again");
            });
        });
    </script>

    <div id="wrapper1">
        <div id="welcome" class="container">
            <h3 id="provisional" style="margin-top: -15px;">Loading data...</h3>

            <div class="row">
                <div class="col-md-6">
                    <div class="title">
                        <h2>Islands of Cocoplum</h2>
                    </div>
                    <div class="chart" id="cocoplum_boat_clearance"></div>
                    <br/>
                    <div class="chart" id="cocoplum_depth" align="center"></div>
                    <br/>
                    <div class="chart" id="cocoplum_salinity" align="center"></div>
                    <br/>
                    <div class="content-box animated">
                        <div class="text-box">
                            <iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
                                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3595.1102094060793!2d-80.25164868477908!3d25.700774817391647!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMjXCsDQyJzAyLjgiTiA4MMKwMTQnNTguMSJX!5e0!3m2!1sen!2sus!4v1570338749664!5m2!1sen!2sus"
                                    width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="title">
                        <h2>Blue Road</h2>
                    </div>
                    <div class="chart" id="blueroad_boat_clearance" align="center"></div>
                    <br/>
                    <div class="chart" id="blueroad_depth" align="center"></div>
                    <br/>
                    <div class="chart" id="blueroad_salinity" align="center"></div>
                    <br/>
                    <div class="content-box animated">
                        <div class="text-box">
                            <iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
                                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4057.6453963131707!2d-80.27186968477868!3d25.727069816311587!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMjXCsDQzJzM3LjQiTiA4MMKwMTYnMTAuOSJX!5e1!3m2!1sen!2sus!4v1570339016784!5m2!1sen!2sus"
                                    width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
                        </div>
                    </div>
                </div>
            </div>

            <img src="/static/veridical/images/WERL_Logo.png" style="margin-top: 30px">
        </div>
    </div>
{% endblock %}