<!--~ 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.-->
<!DOCTYPE html>
<html>
<head lang="en">
    <link href="/portal/store/carbon.super/fs/gadget/geo-dashboard/css/leaflet/L.Grid.css" rel="stylesheet" type="text/css"/>
    <link href="/portal/store/carbon.super/fs/gadget/geo-dashboard/css/main.css" rel="stylesheet" type="text/css"/>
    <script src="/portal/store/carbon.super/fs/gadget/geo-dashboard/js/leaflet/L.Grid.js"></script>
    <script src="/portal/store/carbon.super/fs/gadget/geo-dashboard/js/leaflet/L.MeasuringTool.js"></script>
    <style>
        .leaflet-grid-label .lng {
            margin-left: 8px;
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
        }

        .measuring-line-for-look {
            stroke-dasharray: 3, 20;
        }

        .measuring-label-tooltip .leaflet-popup-content-wrapper {
            border-radius: 4px 4px 4px 4px;
            opacity: 0.7;
            padding: 1px;
            text-align: center;
        }

        .measuring-label-tooltip .leaflet-popup-content {
            margin: 0 5px;
            /*width: 0;*/
        }

        .measuring-label-tooltip .leaflet-popup-tip-container {
            display: none;
        }
    </style>
</head>
<body>
<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">
        <!-- TODO: Trigger bootstrap tooltip $('#aboutTileUrl').tooltip(); to enable tooltip -->
        Define proximity
    </h4>
</div>
<div class="modal-body">
    <div id="proximityMap" style="height: 50%; margin: 0 auto;"></div>
    <div class="row">
        <div class="row">
            <div class="col-md-10 col-md-offset-1">
                <form class="form-inline" role="form">
                    <div class="input-group input-group-sm">
                        <input type="text" id="proximityDistance" class="form-control" placeholder="Distance" >
                        <span class="input-group-addon">m</span>
                    </div>
                    <div class="input-group input-group-sm">
                        <input autofocus="enable" id="proximityTime" type="number" class="form-control"
                               placeholder="Close time in S" >
                        <span class="input-group-addon">Seconds</span>
                    </div>
                </form>
            </div>
        </div>

        <div style="margin-bottom: -15px" class="btn-group btn-group-justified">
            <div class="btn-group">
                <button style="background-color: #f4f4f4;" type="button" class="btn btn-default"
                        onclick="setProximityAlert()">Set Proximity
                </button>
            </div>
            <div class="btn-group">
                <button style="background-color: #f4f4f4;" type="button" class="btn  btn-default"
                        onclick="closeAll()">Cancel
                </button>
            </div>
        </div>
    </div>
</div>
<script src="/portal/store/carbon.super/fs/gadget/geo-dashboard/js/geo_proximity.js"></script>
</body>
</html>