{% extends base.html %}

{% block title %}User Sessions{% end %}

{% block includes %}
<script type="text/javascript" charset="utf-8" src="{{ static_url('js/jquery.dataTables.min.js') }}"></script>
<script type="text/javascript" charset="utf-8" src="{{ static_url('js/dataTables.bootstrap.js') }}"></script>
<link href="{{ static_url('css/dataTables.bootstrap.css') }}" rel="stylesheet">
<style type="text/css">

.top-buffer { margin-bottom:30px; }
.clear { clear: both; height: 80px; }

</style>
{% end %}


{% block content %}
<div class="row-fluid">
  <h2>Detected user sessions </h2>
</div><br /><br />
<div id="row-fluid">
  <div class="container">
      <div class="col-mid-10">
         <table id="sessions_log" class="table table-striped table-bordered dt-responsive">
            <thead>
                <tr>
                    <th> Name </th>
                    <th> Value </th>
                    <th> Path </th>
                    <th> Domain </th>
                    <th> Expires </th>
                    <th> Secure </th>
                    <th> HttpOnly </th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
      </div>
   </div>
  </div>
</div>

<script>
var mySpace = {
  sessions_api_url:"{{ sessions_api_url }}",
};


function addSessions(data, status, xhr){
  jQuery('#sessions_log').dataTable().fnClearTable();
  $.each(data, function(id, obj){
    if (data[id].length > 0) {
      $('#sessions_log').dataTable().fnAddData([
        data[id][0].name,
        data[id][0].value || '',
        data[id][0].Path || '',
        data[id][0].Domain || '',
        data[id][0].Expires || '',
        data[id][0].Secure || '',
        data[id][0].HttpOnly || '',
      ]);
    }
  });
}

function updateUserSessions(){
  $.getJSON(mySpace.sessions_api_url, addSessions);
  setTimeout(updateUserSessions, 5000);
}

$(document).ready(function() {
  $('#sessions_log').dataTable({
    "bAutoWidth": false
  });
  updateUserSessions();
})
</script>
{% end %}
