{% extends "base.html" %}
{% block main %}
<div class='col-md-12'>
	<ol class="breadcrumb">
	  <li>Account</li>
	  <li class="active">Network captures</li>
	</ol>

	<div role="tabpanel">

		<ul id='settingsTabs' class='nav nav-tabs' role='tablist'>
			<li class='active'><a href='#pcaps' data-toggle='tab' aria-control='pcaps'><span class="glyphicon glyphicon-facetime-video"></span> Sessions</a></li>
			<li><a href='#tags' data-toggle='tab' aria-control='tags'><span class="glyphicon glyphicon-tags"></span> Tags</a></li>
		</ul>

		<div id='settingsTabsContent' class='tab-content'>

			<!-- pcaps -->

			<div id='pcaps' role="tabpanel" class='tab-pane active'>
				{% if sniffer_sessions %}
					<table id='sessions' class='table table-condensed'>
				    <tr><th>Created</th><th>Session name</th><th>Packets captured</th><th>Nodes</th><th>Edges</th><th>Status</th><th>Public</th><th></th></tr>
				  </table>
				  <script type="text/javascript" src="{{ url_for('static', filename='custom_js/sniffer_websockets.js') }}" charset="utf-8"></script>
				  <script type="text/javascript">getSessionList(true)</script>
				{%else%}
				<div class="alert alert-block alert-info">
				  <h4>You don't have any sessions yet.</h4>
				  <a href='{{ url_for('sniffer') }}'>Click here</a> to view public packet captures and add your own.
				</div>
				{%endif%}

			</div>

			<!-- tags -->

			<div id='tags' role="tabpanel" class='tab-pane'>
				<div class="alert alert-block alert-warning">
				  <h4>Coming soon.</h4>
				</div>
			</div>

		</div>

	</div>

</div>
{% endblock %}

{% block sidebar %}

{% endblock %}