<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='img/3dgeo.ico') }}">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="">
        <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css">
        <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css">
        <link href="{{ url_for('static', filename='styles/style.css') }}" rel= "stylesheet">
        <link href="{{ url_for('static', filename='styles/jquery.json-viewer.css') }}" rel= "stylesheet">
        <title>pytreedb</title>
        {% if query %}
        <script type="text/javascript">
            var byte = '{{query}}';
            var query = JSON.parse(atob(byte));
            window.onload = () => {
                replicateQuery(query);
            }
        </script>
        {% endif %}
    </head>
    <body>
        <nav id="navbar" class="navbar navbar-expand-lg navbar-light justify-content-end fixed-top">
            <div class="container-fluid">
                <div class="navbar-brand">
                    <a target="_blank" rel="noopener noreferrer" href="https://www.geog.uni-heidelberg.de/3dgeo/index.html" style="padding-right: 10px; text-decoration: none">
                        <img src="{{ url_for('static', filename='img/3dgeo_logo.jpg') }}" alt="3DGEO" height="30" class="d-inline-block align-text-middle">
                    </a>
                    <a target="_blank" rel="noopener noreferrer" href="https://www.ifgg.kit.edu/" style="padding-right: 10px; text-decoration: none">
                        <img src="{{ url_for('static', filename='img/IFGG_short_fat3.png') }}" alt="IFGG" height="30" class="d-inline-block align-text-middle"/>
                    </a>
                    <a href="/">
                        <img src="{{ url_for('static', filename='img/pytreedb_logo_low.png') }}" alt="pytreedb" height="30" class="d-inline-block align-text-middle"/>
                    </a>
                </div>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#hamburgerContent" aria-controls="hamburgerContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse justify-content-end flex-grow-0" id="hamburgerContent">
                    <div class="navbar-nav text-end">
                        <a class="nav-item nav-link" aria-current="page" href="/" >HOME</a>
                        <a class="nav-item nav-link" href="/about">ABOUT</a>
                        <a class="nav-item nav-link" href="/contact">CONTACT</a>
                        <!-- <div class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="langDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                EN
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="langDropdown">
                                <li><a class="dropdown-item" href="#">Deutsch</a></li>
                                <li><a class="dropdown-item" href="#">English</a></li>
                            </ul>
                        </div> -->
                    </div>
                </div>  
            </div>
        </nav>

        <section id="bannerSection" style="overflow: hidden; min-height: 450px; height: 70%;">
            <div class="clearfix" style="overflow: hidden; height: 100%;">
                <div style="position: absolute; width: 100%; height: 100%; overflow: hidden; z-index: -1;">
                    <div id="picDiv">
                        <div id="gradientOverlay">
                        </div>
                    </div>
                </div>
                <div id="animAnchor" style="height: 100%;">
                    <div id="welcome" style="height: 100%;">
                        <div style="position: relative; ">
                            <h1>Welcome to pytreedb</h1>
                            <p style="margin-top: 30px;"> Database of single tree laser scanning and forest inventory data </p>
                            <p style="margin-top: 20px;"> 
                                Currently, pytreedb has <span id="numTrees"></span> trees of <span id="numSpecies"></span> species.</p>
                            <div id="showSpecies" onclick="showSpecies()">
                                <b style="margin-left: 2rem;">Show species</b>
                            </div>
                            <div style="position: absolute;left: 50%;transform: translateX(-50%);margin-top: 3rem;">
                                <button type="button" class="btn btn-success ms-2" style="float: none; display: block; margin-top: .5rem;">
                                    <a href="https://github.com/3dgeo-heidelberg/pytreedb/raw/main/data/test/geojsons.zip" style="color: #fff;" download>
                                        Download all data (GeoJSON)
                                    </a>
                                </button>        
                            </div>
                        </div>
                    </div>
                    <div id="speciesContainer" style="overflow-y: scroll;">
                        <div id="species">
                            <ul id="speciesList"></ul>
                            <span id="backToWelcome" onclick="slideBack()"></span>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <section id="queryInputSection"  class="container" style="margin-top: 30px; margin-bottom: 60px;">
            <div class="row justify-content-center">
                <div class="col-lg-4 col-md-11 col-sm-12" style="margin-bottom: 4rem;">
                    <div class="row justify-content-start">
                        <div class="col col-lg-5 col-md-4 col-sm-2" style="margin-bottom: 1rem; min-width: 12rem;">
                            <b class="func">Get tree by index</b>
                        </div>
                        <div class="searchbar col col-lg-3 col-md-8 col-sm-7">
                            <input type="text" id="idx" placeholder="Index: starts with 0" style="min-width: 10rem; max-width: calc(100% - 4rem);" />
                            <label class="warning">Index out of range! Please enter a number between 0 and <span id="nTrees"></span></label>
                            <button type="button" class="btn btn-success float-end" onclick="getItem()">Go</button>
                        </div>
                    </div>
                </div>
                <div class="col-lg-7 col-md-11 col-sm-12">
                    <div class="row justify-content-start">
                        <div class="col col-lg-4 col-md-12 col-sm-12" style="margin-bottom: 1rem; max-width: 12rem;">
                            <b class="func">Search the DB</b>
                        </div>
                        <div class="searchbar col-lg-8 col-md-12 col-sm-12" style="position: relative;">
                            <div class="dropdown addFilter" style="width: 80%; display: inline-block; vertical-align: middle;">
                                <a class="btn btn-outline-success dropdown-toggle addFilterBtn" href="#" id="filterDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" 
                                    style="margin-top: 0.5rem; margin-bottom: 0.5rem; display: block;">Add Filter</a>
                                <ul class="dropdown-menu" aria-labelledby="filterDropdown">
                                    <li><a class="dropdown-item" onclick="addSearchFilter(this)">Species</a></li>
                                    <li><a class="dropdown-item" onclick="addSearchFilter(this)">Mode</a></li>
                                    <li><a class="dropdown-item" onclick="addSearchFilter(this)">Canopy</a></li>
                                    <li><a class="dropdown-item" onclick="addSearchFilter(this)">Quality</a></li>
                                    <li><a class="dropdown-item" onclick="addSearchFilter(this)">Source</a></li>
                                    <li><a class="dropdown-item" onclick="addSearchFilter(this)">DBH</a></li>
                                    <li><a class="dropdown-item" onclick="addSearchFilter(this)">Height</a></li>
                                    <li><a class="dropdown-item" onclick="addSearchFilter(this)">CrownDia.</a></li>
                                </ul>
                            </div>
                            <button type="button" class="btn btn-outline-success float-none" id="removeAllFilterBtn" onclick="cleanSearchBar()" style="display: inline-block; margin-right: -5rem;">Remove All</button>
                            <div id="queryPreviewArea" style="margin-bottom: 0.5rem;"> Your query: </div>
                            <button type="button" class="btn btn-outline-success float-start" id="updateQPreviewBtn" onclick="updateQueryPreview()">
                                Preview Query
                            </button>
                            <button type="button" class="btn btn-outline-success float-start" id="exportQBtn" onclick="exportQuery()" style="margin-left: .25rem;">
                                Export
                            </button>
                            <input id="queryUpload" type="file" accept=".json" style="display: none"/>
                            <button type="button" class="btn btn-outline-success float-start" id="importQBtn" onclick="importQuery()" style="margin-left: .25rem;">
                                Import
                            </button>
                            <button type="button" class="btn btn-outline-success float-start" id="pmlkBtn" onclick="genPermalink()" style="margin-left: .25rem;">
                                Permalink
                            </button>
                            <button type="button" class="btn btn-success float-end" id="searchButton" onclick="searchDB()">
                                Go
                            </button>
                            <div class="settings"  style="margin-top: 1rem; display: inline-block;">
                                <label class="settingsLabel"> Preview data of the first
                                    <input type="text" id="numPreviewTrees" style="width: 30px;" placeholder="3" value="3"> trees (1-10) </input>
                                </label>
                            </div>
                            <br>
                            <div class="form-check form-check-inline settings">
                                <input checked="1" type="checkbox" id="markerRenderCheckbox" class="form-check-input">
                                <label class="form-check-label settingsLabel" for="markerRenderCheckbox">Show all resulting trees on map</label>
                            </div>
                            <br>
                            <div class="form-check form-check-inline settings">
                                <input type="checkbox" id="elemMatchCheckbox" class="form-check-input">
                                <label class="form-check-label settingsLabel" for="elemMatchCheckbox">All search criteria should be fulfilled by a single data source</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="jsonSnippetSection" class="container" style="height: calc(100% - 62px); padding-top: 1.5rem; padding-bottom: 2rem; background-color: #fff;">
            <div style="height: 100%; width: 50%; display: inline-block;">
                <p id="numResContainer" style="color: #198754;">
                    <span id="numRes"></span> 
                    <span class="geoRes">of</span> 
                    <span id="prevNumRes"  class="geoRes"></span> 
                    trees 
                    <span class="normRes">found</span> <span class="geoRes">selected</span> 
                </p>
                <ul id="treeTabs" class="pagination pagination-sm nav nav-tabs" style="width: calc(100% - 150px);"></ul>
                <div id="dlButtons" style="float: right; padding-left: 3rem; margin-left: -3rem; width: 210px; white-space: nowrap;">
                    <button id="saveJsonButton" type="button" class="btn btn-success ms-2" data-toggle="tooltip" data-placement="top" title="Download the current JSON in the preview window" onclick="saveJsonOutput()" style="float: none; display: block;">
                        Save JSON
                    </button>
                    <button id="saveAllButton" type="button" class="btn btn-outline-success ms-2" data-toggle="tooltip" data-placement="top" title="Save selected trees to JSON" onclick="saveAllJsons()" style="float: none; display: block; margin-top: .5rem;">
                        Save all JSON
                    </button>
                    <button id="saveCSVButton" type="button" class="btn btn-outline-success ms-2" data-toggle="tooltip" data-placement="top" title="Export selected trees to CSV" onclick="saveCSV()" style="float: none; display: block; margin-top: .5rem;">
                        Export to CSV
                    </button>
                    <button id="savePointCButton" type="button" class="btn btn-outline-success ms-2" data-toggle="tooltip" data-placement="top" title="Save selected trees to point clouds" onclick="savePointClouds()" style="float: none; display: block; margin-top: .5rem;">
                        Point Clouds
                    </button>
                </div>
                <div id="jsonViewerContainer" style="height: 100%; margin-bottom: 1rem;"></div>
            </div>
            <div style="height: 100%; width: 49%; vertical-align: top; display: inline-block;">
                <div id="mapContainer" style="height: 90%;">
                </div>
                <button id="geoSelect" type="button" class="btn btn-outline-success" onclick="geoSearch()" style="float: none; margin-top: .5rem;">
                    Select by map extent
                </button>
                <button id="clearGeoSelect" type="button" class="btn btn-outline-success" onclick="clearGeoSelection()" style="float: none; margin-top: .5rem;">
                    Clear selection
                </button>
            </div>
        </section>

        <footer>
            <div class="container">
                <div class="row"
                    style="padding: 50px;color: #fff; border-top-width: medium; border-right-width: medium; border-bottom-width: medium; border-left-width: medium;">
                    <div style="border: dotted #fff; border-width: 0 1px 0 0;" class="col-8">
                        <div id="pytreedbLogo" style="font-size: xx-large; padding: 50px 0 50px 0; color: #fff;">
                            <img src="{{ url_for('static', filename='img/pytreedb_logo_low_w.png') }}" height="100px" alt="pytreedb"/>
                        </div>
                        <div style="font-size: small; padding-bottom: 50px; padding-right: 50px; color: #ddd;">
                            Funded by the Deutsche Forschungsgemeinschaft (DFG, German Research Foundation) in the frame of the
                            project SYSSIFOSS – 411263134 / 2019-2022.
                        </div>
                    </div>
                    <div style="padding-left: 70px;" class="col-4">
                        <h4 style="margin: 20px 0;">Links</h4>
                        <a target="_blank" class="links"
                            href="https://www.geog.uni-heidelberg.de/gis/SYSSIFOSS_en.html">SYSSIFOSS Project</a>
                        <a target="_blank" class="links" href="http://k1z.blog.uni-heidelberg.de/?s=syssifoss">GIScience News
                            Blog</a>
                        <a target="_blank" class="links"
                            href="https://www.researchgate.net/project/SYSSIFOSS-Synthetic-structural-remote-sensing-data-for-improved-forest-inventory-models">Research
                            Gate</a>
                        <a id="twitter-link" target="_blank" href="https://twitter.com/search?q=syssifoss&amp;src=typed_query">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-twitter"
                                viewBox="0 0 16 16" style="margin-left: 5px;" width="20" height="20">
                                <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"></path>
                            </svg></a>
                    </div>
                </div>
            </div>
        </footer>

        <button id="modalBtn" type="button" data-bs-toggle="modal" style="display: none;" class="btn" data-bs-target="#bulkDlModal">Bulk download</button>
        <div class="modal fade" tabindex="-1" style="display: none;" id="bulkDlModal" aria-labelledby="bulkDownloadModalMsg" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="bulkDlModalLabel">Point Clouds Bulk Download</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p>You are downloading a lot of point clouds data. We recommend you to use the following 
                            <a href="/static/dl_script.py" download>python script</a> to manually execute the download on your local machine.
                        </p>
                        <p>Download your point clouds URLs:
                            <br><a id="pcUrlListLink" href="" download>urls.txt</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <section id="downLoadProgressSection" style="width: 100%; position: fixed; bottom: 0; background-color: #fff; box-shadow: 0 3px 10px rgb(0 0 0 / 0.2); z-index: 9999;">
            <div id="progressContainer" class="container" style="padding: 1rem 0;">
                <label class="lh-base" id="pcState">
                    Preparing Point Clouds on server...
                    <span id="dlState"></span>
                </label>
                <div class="progress" style="margin: 0 auto; margin-top: 0.35rem;">
                    <div id="progressBar" class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
            </div>
        </section>
        
        <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
        <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
        <script src="https://unpkg.com/supercluster@7.1.2/dist/supercluster.min.js"></script>
        <script src="{{ url_for('static', filename='js/script.js') }}"></script>
        <script src="{{ url_for('static', filename='js/jquery.json-viewer.js') }}"></script>
        <script src="{{ url_for('static', filename='js/jszip.min.js') }}"></script>
</body>
</html>
