{{!
  Copyright (c) 2016, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.

  WSO2 Inc. licenses this file to you under the Apache License,
  Version 2.0 (the "License"); you may not use this file except
  in compliance with the License.
  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing,
  software distributed under the License is distributed on an
  "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  KIND, either express or implied. See the License for the
  specific language governing permissions and limitations
  under the License.
}}

{{#zone "topCss"}}
    {{css  "css/app.css" combine=false}}
    {{css  "css/map.css" combine=false}}
    {{css  "css/leaflet.css" combine=false}}
    {{css  "css/L.Control.Locate.css" combine=false}}
    {{css  "css/MarkerCluster.Default.css" combine=false}}
    {{css  "css/leaflet_fullscreen/leaflet.fullscreen.css" combine=false}}
    {{css  "css/leaflet/leaflet.draw.css" combine=false}}
    {{css "css/leaflet.awesome-markers.css" combine=false}}
{{/zone}}

<div class="tab-actions">
    <div class="action-btn-container" id="location-action-bar">
    </div>
</div>
{{#if geoServicesEnabled}}
<br>
<br>
<br>
{{/if}}
<span id="geo-charts" data-ws-endpoint="{{wsEndpoint}}" data-ws-token="{{wsToken}}" data-geo-public-uri="{{@unit.publicUri}}"
      data-device-location="{{lastLocation}}"></span>

<div class="map-wrapper">
    {{#if geoServicesEnabled}}
        <div id="" style="height: 75vh;">
            <div id="map"></div>
            <div id="ws-alerts">
                <i id="ws-alert-stream" class="fw fw-circle text-muted"></i> Alerts Stream&nbsp;
                <i id="ws-spatial-stream" class="fw fw-circle text-muted"></i> Spatial Stream
            </div>
        </div>
    {{else}}
        <div id="" style="height: 80vh;">
            <div id="map"></div>
        </div>
    {{/if}}

    <div id="predictionResults" style="background: darkgray;display: none;border-radius: 13px;height: 94%;padding: 0"
         class="col-md-2 pull-right">
        <div class="panel-heading text-center">
            <h4> Prediction Results For: <span id="predictionResultsID" class="text-info"></span>
                <i id="objectInfoCloseButton" class="fa fa-times pull-right"
                   onclick="$('#predictionResults').animate({width: ['toggle','swing']},200);toggeled = false;spatialObject = currentSpatialObjects[selectedSpatialObject];spatialObject.removePath();spatialObject.marker.closePopup();selectedSpatialObject = null;">
                </i>
            </h4>
        </div>
        <br>
        <div class="panel panel-default" style="overflow: auto;box-shadow: 0 0 8px 0 #635749">
            <div class="panel-heading text-center"><h4>Prediction</h4>
            </div>
            <br>
            <div class="panel-body">
                <div style="max-height: 100%;margin: 0;border: none;margin-left: -25px" id="prediction_chart_div"></div>
            </div>
        </div>
    </div>

    <div id="loading">
        <div class="loading-indicator">
            <div class="progress progress-striped active">
                <div class="progress-bar progress-bar-info" style="width: 100%"></div>
            </div>
        </div>
    </div>

    <div class="modal" id="aboutModal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Welcome to the BootLeaf template!</h4>
                </div>
                <div class="modal-body">
                    <ul class="nav nav-tabs" id="aboutTabs">
                        <li class="active"><a href="#about" data-toggle="tab"><i class="fa fa-question-circle"></i>&nbsp;About
                            the project</a></li>
                        <li><a href="#contact" data-toggle="tab"><i class="fa fa-envelope"></i>&nbsp;Contact us</a></li>
                        <li><a href="#disclaimer" data-toggle="tab"><i class="fa fa-exclamation-circle"></i>&nbsp;Disclaimer</a>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-globe"></i>&nbsp;Metadata
                                <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#boroughs-tab" data-toggle="tab">Boroughs</a></li>
                                <li><a href="#subway-lines-tab" data-toggle="tab">Subway Lines</a></li>
                                <li><a href="#theaters-tab" data-toggle="tab">Theaters</a></li>
                                <li><a href="#museums-tab" data-toggle="tab">Museums</a></li>
                            </ul>
                        </li>
                    </ul>
                    <div class="tab-content" id="aboutTabsContent" style="padding-top: 10px;">
                        <div class="tab-pane fade active in" id="about">
                            <p>A simple, responsive template for building web mapping applications with <a
                                    href="http://getbootstrap.com/">Bootstrap 3</a>, <a href="http://leafletjs.com/"
                                                                                        target="_blank">Leaflet</a>, and <a
                                    href="http://twitter.github.io/typeahead.js/" target="_blank">typeahead.js</a>. Open
                                source, MIT licensed, and available on <a href="https://github.com/bmcbride/bootleaf"
                                                                          target="_blank">GitHub</a>.</p>

                            <div class="panel panel-primary">
                                <div class="panel-heading">Features</div>
                                <ul class="list-group">
                                    <li class="list-group-item">Fullscreen mobile-friendly map template with responsive
                                        navbar and modal placeholders
                                    </li>
                                    <li class="list-group-item">jQuery loading of external GeoJSON files</li>
                                    <li class="list-group-item">Logical multiple layer marker clustering via the <a
                                            href="https://github.com/Leaflet/Leaflet.markercluster" target="_blank">leaflet
                                        marker cluster plugin</a></li>
                                    <li class="list-group-item">Elegant client-side multi-layer feature search with
                                        autocomplete using <a href="http://twitter.github.io/typeahead.js/" target="_blank">typeahead.js</a>
                                    </li>
                                    <li class="list-group-item">Responsive sidebar feature list with sorting and filtering
                                        via <a href="http://listjs.com/" target="_blank">list.js</a></li>
                                    <li class="list-group-item">Marker icons included in grouped layer control via the <a
                                            href="https://github.com/ismyrnow/Leaflet.groupedlayercontrol" target="_blank">grouped
                                        layer control plugin</a></li>
                                </ul>
                            </div>
                        </div>
                        <div id="disclaimer" class="tab-pane fade text-danger">
                            <p>The data provided on this site is for informational and planning purposes only.</p>

                            <p>Absolutely no accuracy or completeness guarantee is implied or intended. All information on
                                this map is subject to such variations and corrections as might result from a complete title
                                search and/or accurate field survey.</p>
                        </div>
                        <div class="tab-pane fade" id="contact">
                            <form id="contact-form">
                                <div class="well well-sm">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label for="first-name">First Name:</label>
                                                <input type="text" class="form-control" id="first-name">
                                            </div>
                                            <div class="form-group">
                                                <label for="last-email">Last Name:</label>
                                                <input type="text" class="form-control" id="last-email">
                                            </div>
                                            <div class="form-group">
                                                <label for="email">Email:</label>
                                                <input type="text" class="form-control" id="email">
                                            </div>
                                        </div>
                                        <div class="col-md-8">
                                            <label for="message">Message:</label>
                                            <textarea class="form-control" rows="8" id="message"></textarea>
                                        </div>
                                        <div class="col-md-12">
                                            <p>
                                                <button type="submit" class="btn btn-primary pull-right"
                                                        data-dismiss="modal">Submit
                                                </button>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="tab-pane fade" id="boroughs-tab">
                            <p>Borough data courtesy of <a
                                    href="http://www.nyc.gov/html/dcp/html/bytes/meta_dis_nyboroughwi.shtml"
                                    target="_blank">New York City Department of City Planning</a></p>
                        </div>
                        <div class="tab-pane fade" id="subway-lines-tab">
                            <p><a href="http://spatialityblog.com/2010/07/08/mta-gis-data-update/#datalinks"
                                  target="_blank">MTA Subway data</a> courtesy of the <a
                                    href="http://www.urbanresearch.org/about/cur-components/cuny-mapping-service"
                                    target="_blank">CUNY Mapping Service at the Center for Urban Research</a></p>
                        </div>
                        <div class="tab-pane fade" id="theaters-tab">
                            <p>Theater data courtesy of <a
                                    href="https://data.cityofnewyork.us/Recreation/Theaters/kdu2-865w" target="_blank">NYC
                                Department of Information & Telecommunications (DoITT)</a></p>
                        </div>
                        <div class="tab-pane fade" id="museums-tab">
                            <p>Museum data courtesy of <a
                                    href="https://data.cityofnewyork.us/Recreation/Museums-and-Galleries/sat5-adpb"
                                    target="_blank">NYC Department of Information & Telecommunications (DoITT)</a></p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" id="attributionModal" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 id = "title" class="modal-title">
                        WSO2 Geo Dashboard
                    </h4>
                </div>
                <div class="modal-body">
                    <div id="attribution"></div>
                </div>
            </div>
        </div>
    </div>


    <div class="modal" id="addTileServer" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content" style="width:50%; margin:0 auto;">
                <div class="modal-header"
                     style="cursor: move;background: #f9f9f9;-webkit-box-shadow: inset 0px 0px 14px 1px rgba(0,0,0,0.2);-moz-box-shadow: inset 0px 0px 14px 1px rgba(0,0,0,0.2);box-shadow: inset 0px 0px 14px 1px rgba(0,0,0,0.2);">
                    <button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">
                        &lt;!&ndash; TODO: Trigger bootstrap tooltip $('#aboutTileUrl').tooltip(); to enable tooltip &ndash;&gt;
                        Add tiler server URL <sup id="aboutTileUrl" style="cursor: pointer;" data-toggle="tooltip"
                                                  title="What is a tile URL?"><i class="fa fa-question" style="color: #39F;"
                                                                                 data-toggle="collapse"
                                                                                 data-target="#collapseOne"></i></sup>
                    </h4>
                </div>
                <div class="modal-body">
                    <div id="urlInput">
                        <div style="height: 0px;" id="collapseOne" class="panel-collapse collapse">
                            <div class="panel-body">
                                <p>A string of the following form:</p>
                                <pre><code class="javascript"><span class="string">'http://{s}.somedomain.com/blabla/{z}/{x}/{y}.png'</span></code></pre>
                                <p><code class="javascript">{s}</code> means one of the available subdomains (used
                                    sequentially to help with browser parallel requests per domain limitation; subdomain
                                    values are specified in options; <code class="javascript">a</code>, <code
                                            class="javascript">b</code> or <code class="javascript">c</code> by default, can
                                    be omitted), <code class="javascript">{z}</code> — zoom level, <code class="javascript">{x}</code>
                                    and <code class="javascript">{y}</code> — tile coordinates.</p>

                                <p>You can use custom keys in the template, which will be <a
                                        href="#util-template">evaluated</a> from TileLayer options, like this:</p>
                                <pre><code class="javascript">L.tileLayer(<span class="string">'http://{s}.somedomain.com/{foo}/{z}/{x}/{y}.png'</span>,
                                {foo: <span class="string">'bar'</span>});</code></pre>

                            </div>
                        </div>
                        <div class="input-group input-group-sm">
                            <span class="input-group-addon"><i class="fa fa-italic"></i></span>
                            <input autofocus="enable" id="tileName" type="text" class="form-control"
                                   placeholder="Tile URL name">
                        </div>
                        <br>

                        <div class="input-group input-group-sm">
                            <span class="input-group-addon"><i class="fa fa-globe"></i></span>
                            <input id="tileUrl" class="form-control" type="text"
                                   placeholder="http://{s}.somedomain.com/blabla/{z}/{x}/{y}.png">
                            <span class="input-group-btn">
                            <button class="btn btn-info" type="button" onclick="addTileUrl()"><i class="fa fa-plus"></i>
                            </button>
                        </span>
                        </div>
                        <br/>

                        <div class="panel panel-default" style="width: 80%;">
                            <div>
                                <h4 class="panel-title" style="font-size: 12px;line-height: 1.5;">
                                    <button style="text-align: left;" class="btn btn-default btn-xs btn-block collapsed"
                                            onclick="$('.fa-chevron-right').toggleClass('fa-rotate-90')"
                                            data-toggle="collapse" data-parent="#accordion" href="#tileUrlOptions">
                                        <i class="fa fa-chevron-right"></i> Options
                                    </button>
                                </h4>
                            </div>
                            <div style="height: 0px;" id="tileUrlOptions" class="panel-collapse collapse">
                                <div class="panel-body">

                                    <div class="input-group input-group-sm col-sm-9">
                                        <small class="text-primary">
                                            <label class="col-sm-2 control-label" for="sub_domains">Sub-domains</label>
                                        </small>
                                        <input id="sub_domains" type="text" class="form-control"
                                               placeholder="Enter sub-domains in CSV format">
                                    </div>

                                    <br/>

                                    <div class="input-group input-group-sm col-sm-9">
                                        <small class="text-primary">
                                            <label class="col-sm-9 control-label" for="maxzoom">Max zoom level</label>
                                        </small>
                                        <input id="maxzoom" type="text" class="form-control"
                                               placeholder="Number between(around) 1~19">
                                    </div>
                                    <br/>

                                    <div class="input-group input-group-sm col-sm-9">
                                        <small class="text-primary">
                                            <label class="col-sm-2 control-label" for="data_attribution">Attribution</label>
                                        </small>
                                        <input id="data_attribution" type="text" class="form-control"
                                               placeholder="Enter attribution">
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>

    <div class="modal" id="addWmsUrl" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content" style="width:50%; margin:0 auto;">
                <div class="modal-header"
                     style="cursor: move;background: #f9f9f9;-webkit-box-shadow: inset 0px 0px 14px 1px rgba(0,0,0,0.2);-moz-box-shadow: inset 0px 0px 14px 1px rgba(0,0,0,0.2);box-shadow: inset 0px 0px 14px 1px rgba(0,0,0,0.2);">
                    <button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">
                        <sup id="aboutWms" style="cursor: pointer;" data-toggle="tooltip"
                             title="What WMS end-point"><i class="fa fa-question"
                                                           style="color: #39F;"
                                                           data-toggle="collapse"
                                                           data-target="#wmsOverview"></i></sup>
                    </h4>
                </div>
                <div class="modal-body">
                    <div>
                        <div style="height: 0px;" id="wmsOverview" class="panel-collapse collapse">
                            <div class="panel-body">
                                The OpenGIS® Web Map Service Interface Standard (WMS) provides a simple HTTP interface for
                                requesting geo-registered map images from one or more distributed geospatial databases.
                                A WMS request defines the geographic layer(s) and area of interest to be processed.
                                The response to the request is one or more geo-registered map images (returned as JPEG, PNG,
                                etc) that can be displayed in a browser application.
                                The interface also supports the ability to specify whether the returned images should be
                                transparent so that layers from multiple servers can be combined or not.
                            </div>
                        </div>
                        <div class="input-group input-group-sm">
                            <span class="input-group-addon"><i class="fa fa-italic"></i></span>
                            <input autofocus="enable" id="serviceName" type="text" class="form-control"
                                   placeholder="Service provider name">
                        </div>

                        <br>

                        <div class="input-group input-group-sm">
                            <span class="input-group-addon"><i class="fa fa-align-justify"></i></span>
                            <input autofocus="enable" id="layers" type="text" class="form-control"
                                   placeholder="Service layers as comma seperated values">
                        </div>
                        <br>

                        <div class="input-group input-group-sm">
                            <span class="input-group-addon">V.</span>
                            <input autofocus="enable" id="wmsVersion" type="text" class="form-control"
                                   placeholder="WMS version (i.e: 1.1.1 or 1.3.0)">
                        </div>
                        <br>

                        <div class="input-group input-group-sm">
                            <span class="input-group-addon"><i class="fa fa-globe"></i></span>
                            <input id="serviceEndPoint" class="form-control" type="text"
                                   placeholder="http(s)://sedac.ciesin.columbia.edu/geoserver/wms">
                            <span class="input-group-btn">
                            <button class="btn btn-info" type="button" onclick="addWmsEndPoint()"><i
                                    class="fa fa-plus"></i>
                            </button>
                        </span>
                        </div>

                        <br/>

                        <div class="panel panel-default" style="width: 80%;">
                            <div>
                                <h4 class="panel-title" style="font-size: 12px;line-height: 1.5;">
                                    <button style="text-align: left;" class="btn btn-default btn-xs btn-block collapsed"
                                            onclick="$('.fa-chevron-right').toggleClass('fa-rotate-90')"
                                            data-toggle="collapse" data-parent="#accordion" href="#wmsOptions">
                                        <i class="fa fa-chevron-right"></i> Options
                                    </button>
                                </h4>
                            </div>
                            <div style="height: 0px;" id="wmsOptions" class="panel-collapse collapse">
                                <div class="panel-body">

                                    <div class="input-group input-group-sm col-sm-11">
                                        <small class="text-primary">
                                            <label class="col-sm-6 control-label" for="outputFormat">Output format</label>
                                        </small>
                                        <input id="outputFormat" type="text" class="form-control"
                                               placeholder="Output format (i.e: image/png, image/jpeg, image/svg)">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" id="modalExit" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">
                        <div class="col-lg-5 col-md-6 col-centered">
                            <h4>
                                Set 'Exit Fence' alerts
                                <br>
                            </h4>
                        </div>
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-8 col-md-8 col-centered">
                            <div class="">
                                <table class="table table-hover" id="exit-alert">
                                    <thead>
                                    <tr>
                                        <th>Fence Name</th>
                                        <th>Query Name</th>
                                        <th>Created On</th>
                                        <th></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <div class="alert alert-info fence-not-exist" role="alert">
                                        <strong>Oh snap!</strong> Can't find any geofence area, please draw a new area or try again.
                                    </div>

                                    </tbody>
                                </table>
                            </div>
                            <div class="pull-left">
                                <button style="background-color: #f4f4f4; float: left" type="button" class="btn btn-default"
                                        onclick="viewAll('Exit')">View All
                                </button>
                            </div>
                            <div class="pull-right">
                                <button style="background-color: #f4f4f4;" type="button" class="btn btn-default"
                                        onclick="openTools('Exit')">Draw area
                                </button>
                                <button style="background-color: #f4f4f4;" type="button" class="btn  btn-default"
                                        onclick="$('#editExitGeoJSON').modal('toggle')">Enter area
                                </button>
                                <br/>
                                <br/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" id="modalWithin" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">
                        <div class="col-lg-5 col-md-6 col-centered">
                            <h4>
                                Set 'Within' alerts
                                <br>
                            </h4>
                        </div>
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-8 col-md-8 col-centered">
                            <div class="">
                                <table class="table table-hover" id="within-alert">
                                    <thead>
                                    <tr>
                                        <th>Fence Name</th>
                                        <th>Query Name</th>
                                        <th>Created On</th>
                                        <th></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <div class="alert alert-info fence-not-exist" role="alert">
                                        <strong>Oh snap!</strong> Can't find any geofence area, please draw a new area or try again.
                                    </div>

                                    </tbody>
                                </table>
                            </div>
                            <div class="pull-left">
                                <button style="background-color: #f4f4f4; float: left" type="button" class="btn btn-default"
                                        onclick="viewAll('WithIn')">View All
                                </button>
                            </div>
                            <div class="pull-right">
                                <button style="background-color: #f4f4f4;" type="button" class="btn btn-default"
                                        onclick="openTools('WithIn')">Draw area
                                </button>
                                <button style="background-color: #f4f4f4;" type="button" class="btn  btn-default"
                                        onclick="$('#editWithinGeoJSON').modal('toggle')">Enter area
                                </button>
                                <br/>
                                <br/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" id="modalStationery" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <div class="col-lg-5 col-md-6 col-centered">
                        <h4>
                            Set 'Stationary' alerts
                            <br>
                        </h4>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-8 col-md-8 col-centered">
                            <div class="">
                                <table class="table table-hover" id="stationary-alert-table">
                                    <thead>
                                    <tr>
                                        <th>Stationary Name</th>
                                        <th>Stationary Time</th>
                                        <th>Fluctuation Radius</th>
                                        <th>Query Name</th>
                                        <th>Created On</th>
                                        <th></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <div class="alert alert-info fence-not-exist" role="alert">
                                        <strong>Oh snap!</strong> Can't find any geofence area, please draw a new area or try again.
                                    </div>
                                    </tbody>
                                </table>
                            </div>
                            <div class="pull-left">
                                <button style="background-color: #f4f4f4; float: left" type="button" class="btn btn-default"
                                        onclick="viewAll('Stationery')">View All
                                </button>
                            </div>
                            <div class="pull-right">
                                <button style="background-color: #f4f4f4;" type="button" class="btn btn-default"
                                        onclick="openTools('Stationery')">Draw area
                                </button>
                                <button style="background-color: #f4f4f4;" type="button" class="btn  btn-default"
                                        onclick="$('#editWithinGeoJSON').modal('toggle')">Enter area
                                </button>
                            </div>
                            <br/>
                            <br/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" id="modalSpeed" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <div class="col-lg-5 col-md-6 col-centered">
                        <h4>
                            Setup global speed limit
                            <br>
                        </h4>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-5 col-md-6 col-centered">
                            <div class="input-group input-group-sm">
                                <input autofocus="enable" id="speedAlertValue" type="number" min="0" class="form-control" placeholder="Speed alert value " autocomplete="off">
                                <span class="input-group-addon">km/h</span>
                            </div>
                            <br>
                            <button type="button" class="btn  btn-default pull-right btn-sm" onclick="closeAll()">Cancel</button>
                            <button type="button" class="btn btn-info pull-right btn-sm" onclick="setSpeedAlert()" style="margin-right: 10px;">Set speed alert</button>
                            <br><br>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" id="editWithinGeoJSON" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">
                    </h4>
                    <div class="col-lg-5 col-md-6 col-centered">
                        <h4>
                            Adding GeoJson
                            <br>
                        </h4>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="col-lg-8 col-md-8 col-centered">
                        <div>
                            <label for="importGeoJsonFile">Import GeoJson</label>
                            <input id="importGeoJsonFile" type="file">
                            <hr />
                            <label for="enterGeoJson">Enter GeoJson</label>
                            <textarea id="enterGeoJson" class="form-control" rows="10"></textarea>
                        </div>
                        <div class="pull-right">
                            <button id="updateGeoJson" class="btn btn-primary" onclick="importGeoJson()">Import</button>
                            <button type="button" class="btn btn-default" onclick="closeAll()">Cancel</button>
                            <br />
                            <br />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal" id="editExitGeoJSON" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">
                    </h4>
                    <div class="col-lg-5 col-md-6 col-centered">
                        <h4>
                            Adding GeoJson
                            <br>
                        </h4>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="col-lg-8 col-md-8 col-centered">
                        <div>
                            <label for="importGeoJsonFile">Import GeoJson</label>
                            <input id="importGeoJsonFile" type="file">
                            <hr />
                            <label for="enterGeoJson">Enter GeoJson</label>
                            <textarea id="enterGeoJson" class="form-control" rows="10"></textarea>
                        </div>
                        <div class="pull-right">
                            <button id="updateGeoJson" class="btn btn-primary" onclick="importGeoJson()">Import</button>
                            <button type="button" class="btn btn-default" onclick="closeAll()">Cancel</button>
                            <br />
                            <br />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="display: none">
        <div id="markerPopup" class="popover top">
            <div class="arrow"></div>
            <h3 class="popover-title">ID <span id="objectId"></span></h3>
            <div class="popover-content">
                <h6>Information</h6>
                <p id="information" class="bg-primary" style="margin: 0px;padding: 0px;"></p>
                {{#if geoServicesEnabled}}
                    <h6>Speed<span class="label label-primary pull-right"><span id="speed"></span> km/h</span></h6>
                    <h6>Heading<span id="heading" class="label label-primary pull-right"></span></h6>
                    <button type="button" class="btn btn-info btn-xs" onClick="toggleSpeedGraph();return false;">Speed Graph</button>
                    <button type="button" class="btn btn-info btn-xs" onClick="showRecentAlertsHistory();return false;">Recent History</button>
                    <button type="button" class="btn btn-info btn-xs" onClick="popupDateRange();">Full History</button>
                {{/if}}
            </div>
        </div>

        <div id="dateRangePopup">
            <div class="form-horizontal">
                <div class="form-group">
                    <label class="col-sm-3">From:</label>
                    <div class="col-sm-9">
                        <input id="timeFromCal" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3">To:</label>
                    <div class="col-sm-9">
                        <input id="timeToCal" type="text">
                    </div>
                </div>
            </div>
            <button type="button" class="btn btn-info btn-xs" onClick="showAlertsHistory(document.getElementById('timeFromCal').value, document.getElementById('timeToCal').value);return false;">Full History</button>
        </div>

        <div id="markerPopupStop" class="popover top">
            <div class="arrow"></div>
            <h3 class="popover-title">ID <span id="objectId"></span></h3>

            <div class="popover-content">
                <h6>Information</h6>

                <p id="information" class="bg-primary" style="margin: 0px;padding: 0px;"></p>
            </div>
        </div>

        <div id="areaPopup" class="popover top">
            <div class="arrow"></div>
            <h3 class="popover-title">ID <span id="objectId"></span></h3>
            <div class="popover-content">
                <h6>Severity</h6>

                <p id="severity" class="bg-primary" style="margin: 0px;padding: 0px;"></p>
            </div>
            <div class="popover-content">
                <h6>Information</h6>

                <p id="information" class="bg-primary" style="margin: 0px;padding: 0px;"></p>
            </div>
        </div>

        <div id="setWithinAlert">
            <form role="form" style="width: auto;">
                <div class="form-group">
                    <label class="text-primary" for="withinAlertAreaName">Fence name</label>
                    <input class="form-control" id="withinAlertAreaName" placeholder="Fence name" type="text">
                    <span class="help-block">Name of the selected area(e.g. colombo)</span>
                </div>
                <div>
                    <div class="btn-group btn-group-sm btn-group-justified">
                        <div class="btn-group">
                            <button id="addWithinAlert" onclick="setWithinAlert($(this).attr('leaflet_id'))" type="button"
                                    class="btn btn-info btn-xs" data-toggle="tooltip" data-placement="left"
                                    title="Save selected area for alerts">Save
                            </button>
                        </div>
                        <div class="btn-group">
                            <button onclick="$('#editWithinGeoJSON #updateGeoJson').attr('leaflet_id',$(this).attr('leaflet_id'));$('#editWithinGeoJSON textarea').text(JSON.stringify(map._layers[$(this).attr('leaflet_id')].toGeoJSON(),null, '\t'));$('#editWithinGeoJSON').modal('toggle')"
                                    type="button" class="btn btn-default btn-xs editGeoJson">Edit
                            </button>
                        </div>
                        <div class="btn-group">
                            <a id="exportGeoJson" download="geoJson.json" href="#"
                               onclick="exportToGeoJSON(this, JSON.stringify(map._layers[$(this).attr('leaflet_id')].toGeoJSON(),null, '\t'))"
                               class="btn btn-default btn-xs" data-toggle="tooltip" data-placement="left"
                               title="Export selected area as a geoJson file">Export</a>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div id="setExitAlert">
            <form role="form" style="width: auto;">
                <div class="form-group">
                    <label class="text-primary" for="exitAlertAreaName">Fence name</label>
                    <input class="form-control" id="exitAlertAreaName" placeholder="Fence name" type="text">
                    <span class="help-block">Name of the selected area(e.g. colombo)</span>
                </div>
                <div>
                    <div class="btn-group btn-group-sm btn-group-justified">
                        <div class="btn-group">
                            <button id="addExitAlert" onclick="setExitAlert($(this).attr('leaflet_id'))" type="button"
                                    class="btn btn-info btn-xs" data-toggle="tooltip" data-placement="left"
                                    title="Save selected area for alerts">Save
                            </button>
                        </div>
                        <div class="btn-group">
                            <button onclick="$('#editExitGeoJSON #updateGeoJson').attr('leaflet_id',$(this).attr('leaflet_id'));$('#editExitGeoJSON textarea').text(JSON.stringify(map._layers[$(this).attr('leaflet_id')].toGeoJSON(),null, '\t'));$('#editExitGeoJSON').modal('toggle')"
                                    type="button" class="btn btn-default btn-xs editGeoJson">Edit
                            </button>
                        </div>
                        <div class="btn-group">
                            <a id="exportGeoJson" download="geoJson.json" href="#"
                               onclick="exportToGeoJSON(this, JSON.stringify(map._layers[$(this).attr('leaflet_id')].toGeoJSON(),null, '\t'))"
                               class="btn btn-default btn-xs" data-toggle="tooltip" data-placement="left"
                               title="Export selected area as a geoJson file">Export</a>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div id="templateLoader"></div>
        <div id="setStationeryAlert">
            <form role="form" style="width: auto;">
                <div class="form-group">
                    <label class="text-primary" for="stationaryAlertAreaName">Fence name</label>
                    <input class="form-control" id="stationaryAlertAreaName" placeholder="Stationery name" type="text">
                    <span class="help-block">Name of the selected area(e.g. colombo)</span>

                    <label class="text-primary" for="fRadius">Fluctuation radius</label>
                    <input class="form-control" id="fRadius" onblur="reformatRadius(this.form.fRadius.value);" placeholder="m" type="text">

                    <label class="text-primary" for="time">Time</label>
                    <input class="form-control" id="time" placeholder="Seconds" type="text">
                </div>
                <div>
                    <div class="btn-group btn-group-sm btn-group-justified">
                        <div class="btn-group">
                            <button id="addStationeryAlert" onclick="setStationeryAlert($(this).attr('leaflet_id'))" type="button"
                                    class="btn btn-info btn-xs" data-toggle="tooltip" data-placement="left"
                                    title="Save selected area for alerts">Save
                            </button>
                        </div>
                        <div class="btn-group">
                            <button onclick="$('#editWithinGeoJSON #updateGeoJson').attr('leaflet_id',$(this).attr('leaflet_id'));$('#editWithinGeoJSON textarea').text(JSON.stringify(map._layers[$(this).attr('leaflet_id')].toGeoJSON(),null, '\t'));$('#editWithinGeoJSON').modal('toggle')"
                                    type="button" class="btn btn-default btn-xs editGeoJson">Edit
                            </button>
                        </div>
                        <div class="btn-group">
                            <a id="exportGeoJson" download="geoJson.json" href="#"
                               onclick="exportToGeoJSON(this, JSON.stringify(map._layers[$(this).attr('leaflet_id')].toGeoJSON(),null, '\t'))"
                               class="btn btn-default btn-xs" data-toggle="tooltip" data-placement="left"
                               title="Export selected area as a geoJson file">Export</a>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div id="setTrafficAlert">
            <form role="form" style="width: auto;">
                <div class="form-group">
                    <label class="text-primary" for="trafficAlertAreaName">Fence name</label>
                    <input class="form-control" id="trafficAlertAreaName" placeholder="Area Name" type="text">
                    <span class="help-block">Name of the selected area(e.g. colombo)</span>
                </div>
                <div>
                    <div class="btn-group btn-group-sm btn-group-justified">
                        <div class="btn-group">
                            <button id="addTrafficAlert" onclick="setTrafficAlert($(this).attr('leaflet_id'))" type="button"
                                    class="btn btn-info btn-xs" data-toggle="tooltip" data-placement="left"
                                    title="Save selected area for alerts">Save
                            </button>
                        </div>
                        <div class="btn-group">
                            <button onclick="$('#editTrafficGeoJSON #updateGeoJson').attr('leaflet_id',$(this).attr('leaflet_id'));$('#editTrafficGeoJSON textarea').text(JSON.stringify(map._layers[$(this).attr('leaflet_id')].toGeoJSON(),null, '\t'));$('#editTrafficGeoJSON').modal('toggle')"
                                    type="button" class="btn btn-default btn-xs editGeoJson">Edit
                            </button>
                        </div>
                        <div class="btn-group">
                            <a id="exportGeoJson" download="geoJson.json" href="#"
                               onclick="exportToGeoJSON(this, JSON.stringify(map._layers[$(this).attr('leaflet_id')].toGeoJSON(),null, '\t'))"
                               class="btn btn-default btn-xs" data-toggle="tooltip" data-placement="left"
                               title="Export selected area as a geoJson file">Export</a>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

{{#zone "bottomJs" }}
    {{js "js/leaflet/leaflet.js" }}
    {{js "js/leaflet/leaflet.markercluster.js" }}
    {{js "js/leaflet/L.Control.Locate.js" }}
    {{js "js/leaflet/L.Control.Focus.js" }}
    {{js "js/leaflet/L.Control.GeoAlerts.js" }}
    {{js "js/leaflet/leaflet.groupedlayercontrol.js" }}
    {{js "js/leaflet/Leaflet.fullscreen.min.js" }}
    {{js "js/leaflet/Marker.Rotate.js" }}
    {{js "js/leaflet/leaflet.draw.js" }}
    {{js "js/leaflet.awesome-markers.js"}}
    {{js "js/typeahead.bundle.min.js" }}
    {{js "js/geo_remote.js" }}
    {{js "js/app.js" }}
    {{js "js/geo_exit_fence.js" }}
    {{js "js/geo_within.js" }}
    {{js "js/geo_stationary.js" }}
    {{js "js/geo_speed.js" }}

    {{!js "js/jquery/jquery-ui.min.js" }}
    <!-- Leaflet plugins libries -->

    {{js "js/firstTemp.js" }}

    <!-- C3 charting library using D3 core -->
    {{js "js/d3/d3.min.js" }}
    {{js "js/d3/c3.min.js" }}
    {{js "js/application_options.js"  }}
    {{js "js/secondTemp.js" }}

    {{js "js/show_alert_in_map.js" }}

    {{js "js/websocket.js" }}
    {{js "js/geo_fencing.js" }}
    <script type="text/javascript">
        $(document).ready(function () {
            initializeGeoLocation({{geoServicesEnabled}});
            geoPublicUri = $("#geo-charts").data("geo-public-uri");
            {{#if geoServicesEnabled}}
                var geoToolsMenu = $('#location-action-bar');

                var refreshMap = createGeoToolListItem('javascript:void(0);', 'Refresh', 'fw fw-refresh', geoToolsMenu, true);
                refreshMap.addClass("geo-tools");
                refreshMap.on("click", function(){enableRealTime({{geoServicesEnabled}});});

                var viewAll = createGeoToolListItem('javascript:void(0);', 'View All', 'glyphicon glyphicon-th-list', geoToolsMenu, true);
                viewAll.addClass("geo-tools");
                viewAll.on("click", function(){viewAllFences();});

                var realTime = createGeoToolListItem('javascript:void(0);', 'Return to Real Time View', 'fw fw-undo', geoToolsMenu, true);
                realTime.addClass("geo-tools");
                realTime.on("click", function(){enableRealTime({{geoServicesEnabled}});});
                realTime.css("display", "none");
                realTime.attr("id", "realTimeShow");

                var exitAlert  = createGeoToolListItem('#', 'Add Geofence Exit Alert', 'glyphicon glyphicon-log-out', geoToolsMenu,'Exit');
                exitAlert.addClass("geo-alert");
                exitAlert.on("click", function(){initializeExit();});

                var withinAlert = createGeoToolListItem('#', 'Add Geofence Enter Alert', 'glyphicon glyphicon-log-in', geoToolsMenu,'Within');
                withinAlert.addClass("geo-alert");
                withinAlert.on("click", function(){initializeWithin();});

                var stationaryAlert = createGeoToolListItem('#', 'Add Stationary Alert', 'glyphicon glyphicon-link', geoToolsMenu,'Stationery');
                stationaryAlert.addClass("geo-alert");
                stationaryAlert.on("click", function(){initStationaryAlert();});

                var speedAlert = createGeoToolListItem('#', 'Set Speed Alert', 'glyphicon glyphicon-dashboard', geoToolsMenu,'Speed');
                speedAlert.addClass("geo-alert");
                speedAlert.on("click", function(){initializeSpeed();});
            {{/if}}


            $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                $('#dateRangePopup.ui-dialog-content').dialog('close');
            });
        });
    </script>
{{/zone}}
