{% load static %}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{title}}</title>
    <style>
        #sidebar {
            display: none;
            width: 450px;
            height: 100px;
            max-width: 100%;
            float: right;
            top: 100px;
            right: 19px;
            position: absolute;
            z-index: 9999;
        }
        
        #map {
            width: auto;
            height: 100%;
        }
        
        .filter>label:after {
            content: "\e98e";
            font-family: 'icomoon';
            font-size: 12px;
            display: inline-block;
            position: absolute;
            top: 50%;
            left: 12px;
            margin-top: -6px;
            color: #999999;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        
        #searchResult {
            list-style: none;
            padding: 0px;
            width: 200px;
            position: absolute;
            margin: 0;
            z-index: 9999;
        }
        
        #searchResult li {
            background: white;
            padding: 4px;
            margin-bottom: 1px;
        }
        
        #searchResult li:nth-child(even) {
            background: white;
        }
        
        #searchResult li:hover {
            cursor: pointer;
        }
        
        .leaflet-draw-section {
            display: none;
        }
        
        .geocoder-control {
            margin: auto;
            margin-left: 100px;
            padding-left: 200px;
        }
        
        .panel-body {
            width: 450px;
        }
        
        .feature-row {
            cursor: pointer;
            width: 250px;
        }
        
        .sidebar-wrapper {
            width: 100%;
            height: 100%;
            position: relative;
        }
        
        .sidebar-table {
            position: absolute;
            width: 100%;
            top: -20px;
            bottom: -485px;
            overflow: auto;
            background-color: white;
        }
        
        .page_loader {
            position: fixed;
            background: url('../../static/img/loadingz.gif') 50% 50% no-repeat rgb(249, 249, 249);
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            z-index: 9999;
            opacity: .5;
        }
        
        .leaflet-touch .geocoder-control-input {
            height: 34px;
            width: 250px;
            line-height: 30px;
            background-size: 30px;
        }
        
        .search_desa,
        .search_kab {
            outline: 0;
            width: 100%;
            height: 38px;
            padding: 8px 0;
            padding-right: 24px;
            font-size: 13px;
            line-height: 1.5384616;
            color: #333333;
            background-color: transparent;
            border: 1px solid transparent;
            border-width: 1px 0;
            border-bottom-color: #ddd;
        }
        
        .table_input input {
            outline: 0;
            padding: 2px 0;
            color: #333333;
            background-color: transparent;
            border: 1px solid transparent;
            border-width: 1px 0;
            border-bottom-color: #ddd;
        }
        
        .leaflet-popup-content {
            width: 500px;
        }
        
        .leaflet-control-attribution {
            display: none;
        }
        /* width */
        
         ::-webkit-scrollbar {
            width: 5px;
        }
        /* Track */
        
         ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        /* Handle */
        
         ::-webkit-scrollbar-thumb {
            background: #bfbfbf;
        }
        /* Handle on hover */
        
         ::-webkit-scrollbar-thumb:hover {
            background: rgb(138, 138, 138);
        }
    </style>

    {% include 'includes/css-o.html' %} {% include 'includes/css-m.html' %}

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>

    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
    <link rel="stylesheet" href="https://unpkg.com/esri-leaflet-geocoder@2.3.3/dist/esri-leaflet-geocoder.css">

    <script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.js" charset="utf-8"></script>

    <!-- CSS Files -->
    <link href="{% static 'css/plugin.css'%}" rel="stylesheet" />
    <!-- CSS Just for demo purpose, don't include it in your project -->
    <!-- <link href="{% static 'demo/demo.css'%}" rel="stylesheet" /> -->
    <!-- Global stylesheets -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
    <link href="{% static 'css/icons/icomoon/styles.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'css/bootstrap.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'css/core.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'css/components.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'css/colors.css' %}" rel="stylesheet" type="text/css">
    <script src="{% static 'js/Leaflet.Editables.js' %}"></script>

    <style>
        #button_hide_panel {
            line-height: 30px;
            width: 10px;
            font-size: 10pt;
            font-family: tahoma;
            margin-top: 0px;
            /* margin-right: 3px; */
            position: absolute;
            /* top: 0; */
            left: 370px;
            z-index: 998;
            display: none;
        }
        
        #button_unhide_panel {
            line-height: 30px;
            width: 10px;
            font-size: 10pt;
            font-family: tahoma;
            margin-top: 0px;
            /* margin-right: 3px; */
            position: absolute;
            /* top: 0; */
            left: -11px;
            z-index: 998;
            display: none;
        }
    </style>

</head>

<body>










    {% include 'includes/navbar.html' %}
    <div style="height: 605px;">

        {% block content %}
        <div>
            <a href="#" class="btn btn-default" id="button_hide_panel" data-toggle="tooltip" data-placement="right" title="Ciutkan panel"><span class="caret" style="margin-left: -5px;transform: rotate(90deg)"></span></a>
        </div>
        <div>
            <a href="#" class="btn btn-default" id="button_unhide_panel" data-toggle="tooltip" data-placement="right" title="Ciutkan panel"><span class="caret" style="margin-left: -5px;transform: rotate(270deg)"></span></a>
        </div>
        <div id="panel-samping" style="width: 380px;
        height: 100px;
        max-width: 100%;
        float: right;
        top: 50px;
        left: 0px;
        position: absolute;
        z-index: 9999;
        display: none;
        background-color: white;">
            <div class="sidebar-wrapper">
                <div class="panel panel-default" id="features">


                    <div class="sidebar-table" id="isi_panel">
                        <!-- <input type="submit" value="submit"> -->
                        <a href="" id="btn_edit_kelurahan" style="position: absolute;
                        top: 240px;
                        right: 5px;">Edit</a>
                        <table class="table table-hover tasks-list">

                            <!-- panel samping js disini -->

                        </table>

                    </div>
                </div>
            </div>
        </div>
        {% endblock content %}

        <div id="map"></div>
    </div>


    <div class="modal fade" id="modal-kelurahan" tabindex="-1" role="dialog">

    </div>

    <!-- end modal location -->
    {% include 'includes/modal.html' %} {% include 'includes/o.html' %} {% include 'includes/m.html' %}

    <div class="page_loader"></div>

    <!-- Core JS files -->
    <script type="text/javascript" src="{% static 'js/plugins/loaders/pace.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/core/libraries/jquery.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/core/libraries/bootstrap.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/plugins/loaders/blockui.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/plugins/ui/nicescroll.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/plugins/ui/drilldown.js' %}"></script>
    <!-- /core JS files -->

    <script src="https://use.fontawesome.com/d232835e93.js"></script>

    <script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.js" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.js" charset="utf-8"></script> -->

    <script src="https://unpkg.com/esri-leaflet@2.5.1/dist/esri-leaflet.js"></script>
    <script src="https://unpkg.com/esri-leaflet-geocoder@2.3.3/dist/esri-leaflet-geocoder.js"></script>
    <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw-src.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.6/handlebars.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.fullscreen/1.4.2/Control.FullScreen.min.js"></script>


    <!-- Theme JS files -->
    <script type="text/javascript" src="{% static 'js/plugins/visualization/d3/d3.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/plugins/visualization/d3/d3_tooltip.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/plugins/forms/styling/switchery.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/plugins/forms/styling/uniform.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/plugins/forms/selects/bootstrap_multiselect.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/plugins/ui/moment/moment.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/plugins/pickers/daterangepicker.js' %}"></script>


    {% include 'includes/scripts.html' %}
    <script type="text/javascript" src="{% static 'js/plugins/ui/ripple.min.js' %}"></script>
    <!-- /theme JS files -->

    <script src="{% static 'js/leaflet-bing-layer.js' %}"></script>

    <script type="text/javascript" src="{% static 'js/maps.js' %}"></script>

    <script src="{% static 'js/scripts.js' %}"></script>

</body>

</html>
{% include 'includes/js-o.html' %} {% include 'includes/js-m.html' %}