{% 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>
        #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-control-container {
            display: none;
        }
        
        .modal-backdrop {
            z-index: -999!important;
        }
        
        .geocoder-control {
            margin: auto;
            margin-left: 100px;
            padding-left: 200px;
        }
        
        .feature-row {
            cursor: pointer;
            width: 250px;
        }
        
        .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;
        }
        
        .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;
        }
        /* 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>



    <style>
        #input_perbaikan {
            padding: 60px;
            z-index: 1000;
        }
        
        .input_perbaikan {
            left: 375px;
            width: 1020px!important;
            z-index: 1000;
        }
        
        #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>

    <style>
        .navbar {
            -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
        }
        
        .navbar-brand {
            font-size: 20px !important;
        }
        
        .navbar-brand>[class^="icon-"],
        [class*=" icon-"] {
            font-size: 24px !important;
        }
        
        .bg-none {
            background-color: #ffffff00 !important;
            /* border-color: #3F51B5; */
            /* color: #fff; */
        }
        /* .navbar-inverse .navbar-brand {
    font-size: 20px;
    color: linear-gradient(258.09deg, #D77E7C -3.66%, #AE4F88 37.2%, #7B43BD 129.85%);
    background: -webkit-linear-gradient(#2c9e6a,#2495cc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
} */
        
        .gradient-text {
            display: inline-block;
            background-image: -webkit-gradient(linear, left top, right top, from(#2c9e6a), to(#2495cc));
            background-image: linear-gradient(to right, #2c9e6a, #2495cc);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .fa-gradient {
            background: -webkit-gradient(linear, left top, right top, from(#2c9e6a), to(#2495cc));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .navbar-inverse .navbar-nav>li>a {
            color: #2799a4 !important;
        }
        
        .navbar-inverse .navbar-nav>li>a:hover,
        .navbar-inverse .navbar-nav>li>a:focus {
            color: #2799a4 !important;
            /* background-color: rgba(0, 0, 0, 0.1); */
            background: linear-gradient(to right, #2c9e6a38, #2495cc2e);
        }
        
        #map {
            height: 100vh;
            width: 100%;
        }
        
        .content-wrapper {
            display: block;
            position: fixed;
            top: 0;
        }
        
        .content {
            padding: 0 !important;
        }
        
        .widget-pane {
            width: 408px;
            position: absolute;
            top: 0;
            z-index: 1002;
            opacity: 1;
            /* height: 0; */
            left: -408px;
            /* -webkit-transform: translateX(0px); */
            /* transform: translateX(0px); */
            /* transition-property: -webkit-transform,transform,opacity; */
            /* transition-duration: 0.2s; */
            /* transition-timing-function: cubic-bezier(0.0,0.0,0.2,1); */
            /* width: 380px; */
            /* height: 100px; */
            max-width: 100%;
            float: right;
            top: -48px;
            /* left: -5px; */
            position: absolute;
            z-index: 1000;
            display: block;
            background-color: rgba(255, 255, 255, 0.836);
            opacity: 1;
            height: 100vh;
            box-shadow: 0 0 20px rgb(0 0 0 / 30%);
            background: rgba(255, 255, 255, 0.801);
            overflow: auto;
            transition: all 1s ease;
        }
        
        .widget-pane-visible {
            opacity: 1;
            height: 100vh !important;
            box-shadow: 0 0 20px rgb(0 0 0 / 30%);
            background: #fff;
        }
        
        .panel {
            margin-bottom: 0 !important;
        }
        
        .widget-pane-toggle-button-container {
            position: absolute;
            z-index: 0;
            top: calc(50% - 24px);
            left: 100%;
            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: calc(50vh - 48px);
            left: 0;
            z-index: 1001;
            display: block;
            width: 23px;
            height: 48px;
            cursor: pointer;
            border-left: 1px solid #D4D4D4;
            box-shadow: 0px 1px 4px rgb(0 0 0 / 30%);
            border-radius: 0 8px 8px 0;
            background: rgba(255, 255, 255, 1) 7px center/7px 10px no-repeat;
            transition: all 1s ease;
        }
        
        #button_hide_panel {
            line-height: 30px;
            width: 10px;
            font-size: 10pt;
            font-family: tahoma;
            margin-top: 0px;
            /* margin-right: 3px; */
            position: absolute;
            top: calc(50vh - 48px);
            left: 407px;
            z-index: 1001;
            display: none;
            width: 23px;
            height: 48px;
            cursor: pointer;
            border-left: 1px solid #D4D4D4;
            box-shadow: 0px 1px 4px rgb(0 0 0 / 30%);
            border-radius: 0 8px 8px 0;
            background: rgba(255, 255, 255, 1) 7px center/7px 10px no-repeat;
        }
        
        .content-footer {
            background: #6f99c330;
            border-radius: 10px 10px 0px 0px;
            padding: 10px 20px 10px 20px;
            backdrop-filter: blur(8px);
            box-shadow: 0 0 20px rgb(0 0 0 / 30%);
        }
        
        #button_hide {
            padding: 5px 0px 5px 5px;
            line-height: 15px;
            text-align: center;
            width: 48px;
            font-size: 10pt;
            height: 23px;
            font-family: tahoma;
            margin-top: 3px;
            margin-right: 3px;
            position: absolute;
            top: calc(100% - 196px);
            right: calc(50% - 0px);
            z-index: 99999999;
            border-radius: 8px 8px 0 0;
            border: 0;
            backdrop-filter: blur(8px);
            box-shadow: 0 0 20px rgb(0 0 0 / 30%);
            background: #ffffff85;
        }
        
        #button_unhide {
            padding: 5px 0px 5px 5px;
            line-height: 15px;
            text-align: center;
            width: 48px;
            font-size: 10pt;
            height: 23px;
            font-family: tahoma;
            margin-right: 3px;
            position: absolute;
            top: calc(100% - 23px);
            right: calc(50% - 0px);
            z-index: 99999999;
            border-radius: 8px 8px 0 0;
            border: 0;
            backdrop-filter: blur(8px);
            box-shadow: 0 0 20px rgb(0 0 0 / 30%);
            background: #ffffff85;
        }
        
        .move {
            left: 408px !important;
            transform: translate(-408px, 0);
        }
        
        .move-btn {
            left: 408px !important;
            transform: translate(0, 0);
        }
        
        .fixed-plugin {
            position: absolute;
            z-index: 1000;
            right: 0px;
            background-color: #40777c;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
            margin-top: 5px;
            width: 48px;
            height: 48px;
            box-shadow: 0 0 20px rgb(0 0 0 / 30%);
            transition: 0.3s ease-out;
            display: inline-block;
        }
        
        .fixed-plugin .dropdown-menu {
            float: right;
            position: absolute;
            right: 0px;
            width: 550px;
            margin-left: -560px !important;
            margin-top: -40px !important;
            box-shadow: 0 0 20px rgb(0 0 0 / 30%);
            border-radius: 8px 8px 8px 8px;
        }
        
        li.fixed-plugin:hover {
            /*transform: scale(1.3);*/
            right: 0;
            /*margin-right: 7px;*/
            position: relative;
        }
        /* li.fixed-plugin:hover .dropdown-menu {
            transform: scale(0.769230);
            float: right;
            position: absolute;
            right: -550px;
            width: 550px;
            margin-left: -490px !important;
            margin-top: -40px !important;
            top: 0;
            margin-right: -550px;
        } */
        
        li.fixed-plugin .fa:hover {
            transform: rotate(180deg);
            transition: all 0.3s linear;
        }
        /*.move-btn .caret {*/
        /*    transform: rotate(90deg)!important;*/
        /*    transition: all 0.3s linear;*/
        /*}*/
        
        .btn-login:hover {
            transform: scale(1.3);
        }
    </style>
    <style>
        #map-insert>div.leaflet-control-container {
            display: block;
        }
        
        #map-insert>div.leaflet-control-container>div.leaflet-top.leaflet-left>div:nth-child(2) {
            display: none;
        }
        
        .leaflet-draw-draw-polygon,
        .leaflet-draw-draw-rectangle,
        .leaflet-draw-draw-circle,
        .leaflet-draw-draw-marker,
        .leaflet-draw-draw-circlemarker {
            display: none!important;
        }
        
        .leaflet-draw-toolbar {
            position: absolute;
        }
        
        .leaflet-draw-actions {
            padding: 0px 0px 0px 40px;
            list-style-type: none;
        }
        
        .leaflet-container ul li a {
            color: #333333;
        }
    </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>

    <script src="https://cesium.com/downloads/cesiumjs/releases/1.78/Build/Cesium/Cesium.js"></script>
    <link href="{% static 'css/widgets.css' %}" rel="stylesheet">

    <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">
    <script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script>

    <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>


    <!-- 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"> {% block css %}

    <script src="{% static 'js/Leaflet.Editables.js' %}"></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>
    <script src="{% static 'js/plugins/notifications/sweet_alert.min.js' %}"></script>


    {% endblock css %}

</head>

<body class="navbar-top">


    {% include 'includes/navbar.html' %} {% include 'includes/plugin.html' %}
    <!-- Page container -->
    <div class="page-container">

        <!-- Page content -->
        <div class="page-content">

            <!-- Main sidebar -->
            <!-- <div class="sidebar sidebar-main sidebar-default"> -->
            <!-- <div class="sidebar-content"> -->
            <div id="panel-samping" class="widget-pane widget-pane-visible">
                {% block content %}
                <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>
                {% endblock content %}
            </div>
            <div>
                <a href="#" class="btn btn-default" id="button_unhide_panel" data-toggle="tooltip" data-placement="right" title="Tampilkan panel"><span class="caret" style="margin-left: -5px;transform: rotate(270deg)"></span></a>
            </div>

            <!-- Main content -->
            <div class="content-wrapper">

                <!-- Content area -->

                <div class="content">

                    <!-- Main charts -->
                    <div class="row">
                        <div class="col-lg-12">
                            <div id="map">


                            </div>
                            <div id="map-cesium" style="z-index: -999; height: 605px; display:none"></div>
                        </div>
                    </div>
                </div>
            </div>
            {% include 'includes/content.html' %}
        </div>
        <!-- /page content -->
    </div>

    {% include 'includes/modal.html' %}
    <div class="modal fade" id="modal-kelurahan" tabindex="-1" role="dialog">
    </div>

    <!-- end modal location -->
    {% include 'includes/o.html' %} {% include 'includes/m.html' %}
    <div class="page_loader"></div>


    <script src="https://use.fontawesome.com/d232835e93.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> -->



    <!-- 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 -->

    <!-- 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>

    <!-- /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' %}