{% extends "partial/base.html" %}

{% block title %}
    Home - Airfy
{% endblock title %}

{% block content_before %}
    <div class="row" id="search">
        <div class="col s12">
            <div class="row">
                <div class="input-field col s12 l3 m3">
                    <select id="location" data-placeholder="Search for a place" data-width="100%"></select>
                    <p><div id="map"></div></p>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block content %}
    <div id = "map-container">
    </div>

    <div id="info_modal" class="modal modal-fixed-footer">
        <div class="modal-content">
            <h4>Welcome to Airify</h4>
            <p>This app lets you know the air quality around you, so you know better what are you breating!</p>
            <h5>How to use?</h5>
            <p>The application automatically detects your location and displays the Air Quality from the nearest sensor available. 
                You can also <span style="font-weight: bold;">drag the marker</span> to your desired location to get the air quality. 
                The information panel also <span style="font-weight: bold;">changes color</span> based on the AQI value.</p>
            <blockquote>
                <span style="font-weight: bold;">BE CAREFUL!</span> Sometimes the sensors are really far away from the selected location and the data obtained thus will not reflect the actual Air Quality!          </blockquote>
            <h5>What does the colours mean?</h5>
            <table class="centered"> 
                <thead>
                    <tr>
                        <th>Colour</th>
                        <th>Description</th>
                    </tr>
                </thead>
        
                <tbody>
                    <tr>
                    <td class="green accent-3"> </td>
                    <td>Air quality is good.</td>
                    </tr>
                    <tr>
                    <td class="yellow accent-3"> </td>
                    <td>Air quality is satisfactory.</td>
                    </tr>
                    <tr>
                    <td class="amber accent-3"> </td>
                    <td>Air quality is unhealthy for sensitive groups (for example people with asthama and respiratory diseases).</td>
                    </tr>
                    <td class="orange accent-3"> </td>
                    <td>Air quality level is Unhealthy.</td>
                    </tr>
                    <td class="deep-orange accent-3"> </td>
                    <td>Air quality level is very unhealthy.</td>
                    </tr>
                    <td class="brown darken-3"> </td>
                    <td>Air quality level is hazardous.</td>
                    </tr>

                </tbody>
            </table>
        </div>
        <div class="modal-footer">
          <a href="#!" class="modal-close waves-effect waves-green btn-flat">Close</a>
        </div>
    </div>
{% endblock content %}  

{% block page_scripts %}
    <!-- Load Map related libraries -->
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>

    <script src="{{ url_for('static', filename='js/map.js')}}"></script>
{% endblock page_scripts %}