{% extends "WebApp/app_base.html" %}
{% load static %}

{% block title %}SERVIR AppTemplate - Home{% endblock %}
{% block script %}
    <!-- Leaflet-->
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/leaflet-timedimension@1.1.1/dist/leaflet.timedimension.control.min.css"/>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.2/dist/leaflet.css"
          integrity="sha256-sA+zWATbFveLLNqWO2gtiw3HL/lh1giY/Inf1BJ0z14=" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.9.2/dist/leaflet.js"
            integrity="sha256-o9N1jGDZrf5tS+Ft4gbIK7mYMipq9lqpVJ91xHSyKhg=" crossorigin=""></script>
    <script src="https://unpkg.com/esri-leaflet@3.0.8/dist/esri-leaflet.js"
            integrity="sha512-E0DKVahIg0p1UHR2Kf9NX7x7TUewJb30mxkxEm2qOYTVJObgsAGpEol9F6iK6oefCbkJiA4/i6fnTHzM6H1kEA=="
            crossorigin=""></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/iso8601-js-period@0.2.1/iso8601.min.js"></script>
    <script type="text/javascript"
            src="https://cdn.jsdelivr.net/npm/leaflet-timedimension@1.1.1/dist/leaflet.timedimension.min.js"></script>
    <script src="{% static '/js/L.Control.Opacity.js' %}"></script>
    <link href="{% static '/css/L.Control.Opacity.css' %}" rel="stylesheet"/>
    <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css"/>
    <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-search/3.0.5/leaflet-search.src.js"
            integrity="sha512-PDM7dpetuBcPp2fV/ZyCj9BGV8ybPchsrSzQqVZ3WoM8YcxEa2lAj0n1+4MCRzgsEROmVTwQXGw0IrXCCgH+/Q=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="{% static '/js/leaflet-providers.js' %}"></script>
    <script src="{% static '/js/utils.js' %}"></script>

    <script src="{% static '/js/basemaps.js' %}"></script>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <link
            rel="stylesheet"
            href="{% static '/css/geosearch.css' %}"
    />
    <link rel="stylesheet" href="{% static '/css/gee_map.css' %}">


    <script src="{% static '/js/geosearch.umd.js' %}"></script>
    <script src="{% static '/js/map_utils.js' %}"></script>

{% endblock %}

{% block content %}



    <div class="container-fluid bg-gray-300">
        <!-- Fixed Size GEE map -->
        <!-- This template can be used when there is a need to visualize GEE layers in a fixed size panel. To make any updates, visit map_from_GEE.js -->

        <div class="row">
            <div class="col-xl-12 col-lg-12">
                <br>
                <div class="card shadow mb-4">
                    <!-- Card Header - Dropdown -->
                    <div
                            class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                        <h6 class="m-0 font-weight-bold text-primary">Map Viewer</h6>
                    </div>
                    <!-- Card Body -->
                    <div class="card-body">


                        <link rel="stylesheet" href="{% static 'css/common.css' %}">

                        <div id="map2">

                        </div>
                        <!-- Map Control -->
                        <!-- This is an overlay panel that has three tabs - Layers, Basemaps and Legends. -->
                        <div class="accordion" id="layer_manager_gee">
                            <div id="loading_gee" style="display: none;">
                                <div class="spinner-border text-secondary" role="status">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
                            </div>
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="headingOne">
                                    <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                            data-bs-target="#collapseOne" aria-expanded="true"
                                            aria-controls="collapseOne">
                                        Map Control
                                    </button>
                                </h2>
                                <div id="collapseOne" class="accordion-collapse collapse show"
                                     aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                                    <div class="accordion-body">
                                        <div>
                                            <div class="container mt-3">
                                                <ul class="m-0 nav nav-fill nav-justified nav-tabs"
                                                    id="gee_tab_list" role="tablist">
                                                    <li class="nav-item" role="presentation">
                                                        <button class="active nav-link p-0" id="layers-tab"
                                                                data-bs-toggle="tab"
                                                                data-bs-target="#layers" type="button"
                                                                role="tab"
                                                                aria-controls="layers" aria-selected="true">
                                                            Layers
                                                        </button>
                                                    </li>
                                                    <li class="nav-item" role="presentation">
                                                        <button class="nav-link p-0" id="profile-tab"
                                                                data-bs-toggle="tab"
                                                                data-bs-target="#basemaps_gee" type="button"
                                                                role="tab"
                                                                aria-controls="basemaps_gee"
                                                                aria-selected="false"></i> Basemaps
                                                        </button>
                                                    </li>
                                                    <li class="nav-item" role="presentation">
                                                        <button class="nav-link p-0" id="legends_gee-tab"
                                                                data-bs-toggle="tab"
                                                                data-bs-target="#legends_gee" type="button"
                                                                role="tab"
                                                                aria-controls="legends_gee"
                                                                aria-selected="false"></i> Legends
                                                        </button>
                                                    </li>
                                                </ul>
                                                <!-- Tab pane: Layers -->
                                                <!-- This consists of Image Collection and User Asset Layers. More text about the layer can be added in the popover below
                                                     There are opacity controls for the layer and legends are displayed in the 'Legends' tab based on the checkbox selection.-->

                                                <div class="border-grey bg-white tab-content" id="layer_tab_content_gee"
                                                >
                                                    <div class="tab-pane active  p-3 ml-3" id="layers"
                                                         role="tabpanel"
                                                         aria-labelledby="layers-tab"><p>
                                                        <label class="form-check-label  mt-2 w-75"
                                                               for="collection"><input class="form-check-input"
                                                                                       id="collection"
                                                                                       type="checkbox"/>Image
                                                            Collection Layer</label>

                                                        <a role="button" href=#" data-bs-toggle="popover"
                                                           title="Image Collection Info"
                                                           data-bs-trigger="focus"
                                                           data-bs-content="Use this space to offer a description of the dataset.
                                                   For this template we are using a standard GEE image collection. 
                                                   This is defined in the file filename.ext">
                                                            <i class="fa-solid fa-circle-info ml-2 info_btn"></i></a>

                                                    </p>

                                                        <input id="opacity_collection"
                                                               type="range"
                                                               max="1"
                                                               min="0"
                                                               step="0.01"
                                                               style="display: none;"
                                                        /><label class="ml-1"
                                                                                           id="collection_opacity"></label>

                                                        <p>


                                                            <label class="form-check-label mt-2 w-75"
                                                                   for="asset"><input class="form-check-input"
                                                                                      id="asset"
                                                                                      type="checkbox"/>
                                                                Public GEE User Asset</label>
                                                            <a role="button" href=#" data-bs-toggle="popover"
                                                               data-bs-trigger="focus" title="User Asset Info"
                                                               data-bs-content="Precipitation factor for carbon monitoring estimations.
                                                   For this template we are using a GEE User Asset that is exposed publicly.
                                                   This is defined in the file filename.ext">
                                                                <i class="fa-solid fa-circle-info ml-2 info_btn"></i></a>
                                                        </p>

                                                        <input id="opacity_asset"
                                                               type="range"
                                                               max="1"
                                                               min="0"
                                                               step="0.01"
                                                               style="display: none;'"
                                                        /><label class="ml-1"
                                                                                   id="asset_opacity"></label>
                                                    </div>
                                                    <!-- Tab pane: Basemaps -->
                                                    <!-- This tab is used when there is a need to change basemaps. The basemaps used are present in basemaps.js -->
                                                    <div class="tab-pane" id="basemaps_gee" role="tabpanel"
                                                         aria-labelledby="basemaps_gee-tab">
                                                        <div class="card-body text-center">
                                                            <div class="row row-centered pos d-block">
                                                                <a id="osm" href="#"
                                                                   onclick="add_basemap(this.id);"><img
                                                                        src="{% static 'images/basemaps/osm.png' %}"
                                                                        alt="img1" class="img-thumbnail">
                                                                </a>

                                                                <a id="topo" href="#"
                                                                   onclick="add_basemap(this.id);"><img
                                                                        src="{% static 'images/basemaps/topo.png' %}"
                                                                        alt="img1" class="img-thumbnail">
                                                                </a>

                                                                <a id="gsatellite" href="#"
                                                                   onclick="add_basemap(this.id);"><img
                                                                        src="{% static 'images/basemaps/gsatellite.png' %}"
                                                                        alt="img1" class="img-thumbnail">
                                                                </a>

                                                                <a id="satellite" href="#"
                                                                   onclick="add_basemap(this.id);"><img
                                                                        src="{% static 'images/basemaps/satellite.png' %}"
                                                                        alt="img1" class="img-thumbnail">
                                                                </a>

                                                                <a id="terrain" href="#"
                                                                   onclick="add_basemap(this.id);"><img
                                                                        src="{% static 'images/basemaps/terrain.png' %}"
                                                                        alt="img1" class="img-thumbnail">
                                                                </a>

                                                                <a id="delorme" href="#"
                                                                   onclick="add_basemap(this.id);"><img
                                                                        src="{% static 'images/basemaps/delorme.png' %}"
                                                                        alt="img1" class="img-thumbnail">
                                                                </a>

                                                            </div>
                                                        </div>


                                                    </div>

                                                    <!-- Tab pane: Legends -->
                                                    <!-- This tab is used to display legend for the selected layer(s) -->
                                                    <div class="tab-pane pl-3" id="legends_gee" role="tabpanel"
                                                         aria-labelledby="legends_gee-tab">

                                                        <p class="mt-1">Legend for
                                                            the layer(s) selected</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <script src="{% static '/js/map_from_GEE.js' %}"></script>
                    </div>
                </div>
            </div>
        </div>
        <!-- Description -->
        <!-- To update the description, edit the <div> with the class 'card-body' below -->
        <div class="row">
            <div class="col-lg-12">
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">About GEE</h6>
                    </div>
                    <div class="card-body">
                        <div class="text-left text-dark">
                            Google Earth Engine (GEE) is a very popular cloud-based platform for processing and
                            analyzing
                            geospatial data.
                            <hr>
                            GEE contains a large number of datasets, including satellite imagery, climate data,
                            and other
                            spatial data. You can create your own datasets by combining existing datasets, or by
                            uploading
                            your own data.
                            <hr>
                            In order to use GEE content in your web application, you need to create a GEE
                            account and
                            obtain an API key. You can find more information about GEE accounts and API keys at
                            <a href="">[link]</a>.
                        </div>
                    </div>
                </div>

            </div>
            <div class="col">
                <button type="button" class="btn btn-info" data-bs-toggle="modal"
                        data-bs-target="#geeModal">
                    Learn how to modify this page
                </button>
            </div>


        </div>

        <br>

    </div>
    {% include 'WebApp/map_from_GEE_about.html' %}
{% endblock %}