{% extends base %}

{% block preamble %}
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- Bootstrap CSS CDN -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <!-- Our Custom CSS -->
    <link rel="stylesheet" href="/bokeh/static/css/styles.css">

    <!-- Font Awesome JS -->
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>

    <!-- jQuery CDN - Slim version (=without AJAX) -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <!-- Popper.JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <!-- Bootstrap JS -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
    <!-- Our Custom JS -->
    <script src="/bokeh/static/js/main.js"></script>
	<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
    <script type="text/javascript">
	
        $(document).ready(function () {
            $('#sidebarCollapse').on('click', function () {
                $('#sidebar').toggleClass('active');
                $(this).toggleClass('active');

                AnimationUtils.tagElements();
                AnimationUtils.onResizePage();
            });
        });
		

        function myFunction() {
          var but_leg = document.getElementById("button_leg_bar");
          var maplayer_icon=document.getElementById("maplayer_icon");
          var map_opt = document.getElementById("map_opt");
          var kaart = document.getElementById("kaart");
          var zoekgraf = document.getElementById("zoekgrafiek-en-slider");
          var but = document.getElementById("button_lower");
          var h = document.getElementById("grafiek_upper");
          var download = document.getElementsByClassName("bk bk-btn bk-btn-success")[0];
         
          but.classList.toggle("fa-angle-double-up");
          but.classList.toggle("fa-angle-double-down");
          if (zoekgraf.style.display === "none") {
            zoekgraf.style.display = "block";
            h.style.height = "60.5vh";
            download.style.backgroundColor = "#3681C1";
            download.style.borderColor = "#495568";
          } else {
            zoekgraf.style.display = "none";
            h.style.height = "78vh";
            download.style.backgroundColor = "white";
            download.style.borderColor = "white";
          }
          
          AnimationUtils.dispatchResizeEvent();
        }
        function popMapLegend() {
          var but_leg = document.getElementById("button_leg_bar");
          var maplayer_icon=document.getElementById("maplayer_icon");
          var map_opt = document.getElementById("map_opt");
          var kaart = document.getElementById("kaart");
        if (map_opt.style.display == "none") {
            map_opt.style.position = "fixed";
            map_opt.style.display = "block";
          } else {
            map_opt.style.display = "none";
            dummy.style.display= "block";
          }
          }
		let ctrlKey = false;
		   const keyDown = () => {
        document.addEventListener('keydown', function (e) {
		if (e.key == "Control") {
		ctrlKey = true
		}});
		};
		   const keyUp = () => {
        document.addEventListener('keyup', function (e) {
		if (e.key == "Control") {
		ctrlKey = false
		}});
		};
	keyDown();
	keyUp();
    </script>
	

{% endblock %}

{% block contents%} 

    <div class="wrapper">
        <!-- Sidebar Holder -->
        <nav id="sidebar">
            <div class="sidebar-header">
                {{ embed(roots.app_title) }}
            </div>
            <div class="sidebar-bokeh">
                {{ embed(roots.filters) }}
                {{ embed(roots.locations) }}
                {{ embed(roots.parameters) }}
                {{ embed(roots.search_period) }}
			</div>
			<div class="row" id="update_download">  			
				<div class="col-9">
					{{ embed(roots.update_graph) }}
				</div>	
				<div class="col-2">
					{{ embed(roots.download_time_series)}}
				</div>	
			</div>					
        </nav>
		
		

        <!-- Page Content Holder -->
        <div id="content">
        
            <nav class="navbar navbar-expand-lg">
                <div class="container-fluid h-100">
                    <button type="button" id="sidebarCollapse" class="navbar-btn">
                        <span></span>
                        <span></span>
                        <span></span>
                    </button>
                    <button class="btn btn-dark d-inline-block d-lg-none ml-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <i class="fas fa-align-justify"></i>
                     </button>
                    <button onClick="window.location.reload();"style="border:none; height:22px;cursor:pointer;color:white; background: rgba(0,0,0,0);">
                        <i style="font-size:19px;" ; class="fas fa-align-justify">&#xf01e;</i>
                    </button>
                    <button class="btn btn-dark"style="border:none;cursor:pointer; height:35px;background: rgba(0,0,0,0);color:white" type="button" onclick="window.open('https://d2hydro.github.io/hydrodashboards/manuals/user_nl/','_blank')">
                        <i class='fas fa-info-circle ' style="font-size: 24px;"></i>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="nav navbar-nav ml-auto">
                            <ul class="nav nav-tabs" id="nav-tab" role="tablist">
                            <li class="nav-item">
                                <button class="nav-item nav-link active" id="kaart-tab" data-toggle="tab" data-target="#kaart" role="tab" aria-controls="nav-kaart" aria-selected="true">Kaart</button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-item nav-link" id="grafiek-tab" data-toggle="tab" data-target="#grafiek" role="tab" aria-controls="nav-grafiek" aria-selected="false">Grafiek</button>
                            </li>
                            </ul>
                        </ul>
                    </div>
            </div>
            </nav>
            <div class="tab-content">
                <div class="tab-pane fade show active row" id="kaart" role="tabpanel" aria- labelledby="kaart-tab" aria-expanded="false">
                            <div class="col-12" id="kaart">
                                {{ embed(roots.map_figure)}}
                            </div>
                            <div class="test" id ="button_leg_bar" >
                                <button onclick="popMapLegend()" class="maplayer_icon" id="maplayer_icon" aria-hidden="true"></button>
                            </div>
                            <div class="map_opt" id="map_opt">
                                 {{ embed(roots.map_options) }}
                            </div>    
                </div>
                <div class="app_status" id="app_status">
                    {{ embed(roots.app_status) }}
                </div>
                <div class="tab-pane fade show" id="grafiek" role="tabpanel" aria- labelledby="grafiek-tab"aria-expanded="false">
                    <div class="container-fluid h-100" >
                        <div class="row"style="margin-left:0px;margin-right:0px" > 
                            <div class="col-12" id="grafiek_upper">
                                {{ embed(roots.time_figure) }}
                            </div>   
							
                        </div>
                        <div class="row" id="zoekgrafiek-bar">    
                            <div class="col-4">
                                <button    onclick="myFunction()" class="fas fa-angle-double-down" id="button_lower" aria-hidden="true"></button>
                                <h6 style="color:#3681C1;" id="button-text">Zoekgrafiek</h6>
                            </div>    
                            <div class="col-5" style="margin-left:-240px;">
                                {{ embed(roots.select_search_time_series) }}
                            </div> 
                          
                        </div>
                        <div class="row" id="zoekgrafiek-en-slider" >
                            <div class="col-12"id="grafiek-slider">
                                {{ embed(roots.view_period) }}
                            </div>        
                            <div class="col-12" id="grafiek-lower">
                                {{ embed(roots.search_time_figure) }}
                            </div>    
                        </div>
                    </div>    
                </div>
            </div>
        </div>
    </div>

{% endblock %}