@(sensors: List[play.api.libs.json.JsValue])(implicit user: Option[models.User])
@import services._
@title = @{
    AppConfiguration.getSensorsTitle
}
@main(title) {

    <link rel="stylesheet" href="@routes.Assets.at("stylesheets/leaflet.css")">
    <!--[if lte IE 8]>
        <link rel="stylesheet" href="@routes.Assets.at("stylesheets/leaflet.ie.css")">
    <![endif]-->
    <script src="@routes.Assets.at("javascripts/jquery.tablesorter.js")" type="text/javascript"></script>

	<div class="page-header">
		<h1>@(AppConfiguration.getSensorsTitle)</h1>
	</div>
	<table class="table table-striped table-hover table-bordered tablesorter" id="sensorsListTable">
        <thead>
            <tr>
                <th>ID <span class="glyphicon glyphicon-sort pull-right" aria-hidden="true"></span></th>
                <th>@(AppConfiguration.getSensorTitle) <span class="glyphicon glyphicon-sort pull-right" aria-hidden="true"></span></th>
                <th>Source <span class="glyphicon glyphicon-sort pull-right" aria-hidden="true"></span></th>
                <th>GeoJSON <span class="glyphicon glyphicon-sort pull-right" aria-hidden="true"></span></th>
                <th>Info<span class="glyphicon glyphicon-sort pull-right" aria-hidden="true"></span></th>

            </tr>
        </thead>
        <tbody>
            @sensors.map { item =>
                <tr>
                    <td>@(item \ "id")</td>
                    <td>@((item \ "name").as[String])</td>
                    <td>@((item \ "properties" \ "type" \ "id").asOpt[String].getOrElse("").toUpperCase())</td>
                    <td>@(item \ "geometry")</td>
                    <td>
                        <a class="btn btn-link disabled edit-sensor" href="@(routes.Geostreams.edit(((item \ "id").toString())))"><span class="glyphicon glyphicon-edit"></span> Edit</a>
                        <button type="button" class="btn btn-link delete-sensor" id="@((item \ "id").toString())" disabled><span class="glyphicon glyphicon-trash"></span> Delete</button>
                    </td>
                </tr>
            }
        </tbody>
	</table>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#sensorsListTable").tablesorter({
                sortList: [[1,0]]
            });
            @if(user) {
                $('a.edit-sensor').removeClass('disabled');
                $('.delete-sensor').prop('disabled', false);
            }
            $('.delete-sensor').on('click', function (event) {
                if (confirm("Delete Sensor, all its Streams, and all its Datapoints?")) {
                    var request = jsRoutes.api.Geostreams.deleteSensor(event.target.id).ajax({
                        type: 'DELETE',
                        contentType: "application/json",
                        dataType: 'json',
                        data: '{}'
                    });
                    request.done(function(response, textStatus, jqXHR) {
                        window.location.href = window.location.href;
                    });
                    request.fail(function(jqXHR, textStatus, errorThrown) {
                        window.alert("Could not delete the sensor.");
                        console.error("Could not delete the sensor: " + textStatus + errorThrown);
                    });
                }
            });
        });
    </script>
}