<!--~ 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">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .fa-trash-o:hover{color:red;}
    </style>

    <script>
    $(".removeGeoFence").tooltip();

    $('.viewGeoFenceRow td:not(:last-child)').click(function () {
            viewFence(this.parentElement,'Traffic');
        });

    </script>
</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 -->
        Set <i>traffic</i> alerts
    </h4>
</div>




<div class="modal-body">
    <div class="row">
    
    <p class="text-info text-center">View current fences</p>
        <div class="">
        <table class="table table-hover">
              <thead>
                <tr >
                  <th>Query Name</th>
                  <th>Traffic Congestion Area Name</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>

            <%
                var alerts = get('traffic');
                if(alerts){
                    for each(var alert in alerts){
                        %>
              <tr class="viewGeoFenceRow" style="cursor: pointer" data-areaName='<%= alert.areaName %>' data-queryName='<%= alert.queryName %>' data-geoJson='<%= alert.geoJson %>'>
                                <td><%= alert.queryName %></td>
                                <td><%= alert.areaName %></td>
                                <td onClick="removeGeoFence(this.parentElement,'Traffic')" class="removeGeoFence" data-toggle="tooltip" title="Remove fence" ><i class="fa fa-trash-o"></i></td>
              </tr>
                        <%
                    }
                }
                else{
                %>
                <div class="alert alert-danger" role="alert">
                      <strong>Oh snap!</strong> Can't find any geo-fence areas,please draw a new area or try again.
                </div>
                <%
                }
            %>
            </tbody>
                        </table>
        </div>
    
    
        <p class="text-info text-center">Select Interested Area</p>

        <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="openTools('Traffic')">Draw area</button>
            </div>
            <div class="btn-group">
                <button style="background-color: #f4f4f4;" type="button" class="btn  btn-default" onclick="$('#editWithinGeoJSON').modal('toggle')" >Enter area</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>
</body>
</html>
