{% extends "base.html" %}
{% block main %}

<div class='col-md-9' id='mainscreen'>

  <div role="tabpanel">

    <ul id='datasetTabs' class='nav nav-tabs' role='tablist'>
      <li role="presentation" class='active'><a href='#graph' id="graph-tab" aria-controls="graph" role="tab" data-toggle='tab'>Graph</a></li>
      <li role="presentation"><a href='#flows' id="flows-tab" aria-controls="flows" role="tab" data-toggle='tab'>Flows</a></li>
      {% for display_name, name in session.modules %}
      <li role="presentation"><a href='#{{ name }}' class='module-tab' id='{{name}}-tab' aria-controls="{{ name }}" role="tab" data-toggle='tab'>{{ display_name }}</a></li>
      {%endfor%}
    </ul>

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

      <div role="tabpanel" class='tab-pane active' id='graph'> <!-- Graph view pane -->
        <div class='graph'>
        </div>
        <div class='hotkeys'>
          <ul>
            <li><strong>space</strong>: get node neighbors</li>
            <li><strong>e</strong>: find evil</li>
            <li><strong>u</strong>: unfix selected</li>
            <li><strong>shift</strong>: multimple selections</li>
            <li><strong>h / s / t</strong>: hide / show / toggle node display</li>
            <li><strong>(shift+)arrows</strong>: move nodes</li>
          </ul>
          <table>
            <tr><td>Node distance:&nbsp;&nbsp;</td><td><div id='slider' style='width:100px;'></div></td>
            </tr>
          </table>

           <script type="text/javascript">
            $("#slider").slider({
              range: 'max',
              min: 50,
              max: 1000,
              value: 110,
              slide: function (event, ui) {
                force.charge(-ui.value);
                start();
              }
            });
          </script>

        </div> <!-- end hotkeys -->
      </div> <!-- end first tabpane -->

      <div role="tabpanel" class='tab-pane' id='flows'> <!-- Flow table view pane -->
        <table class='table table-condensed' id='flow-list'>
        </table>
      </div> <!-- end second tabpane -->

      <!-- content pane for modules -->
      {% for display_name, name in session.modules %}
        <div role='tabpanel' class='tab-pane module-content' id='{{ name }}' data-bootstrap-url="{{ url_for('malcom_api.call_module_function', session_id=session.id, module_name=name, function='bootstrap') }}">
        </div>
      {% endfor %}

    </div> <!-- end tabs content -->

  </div>
</div>


<!-- Modal -->
<div class="modal" id="PayloadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3 class='modal-title' id="PayloadModalLabel">Payload contents</h3>
      </div>
      <div class="modal-body">
        <div role="tabpanel">

            <ul class="nav nav-tabs">
              <li class="active"><a href="#ascii" data-toggle="tab">ASCII</a></li>
              <li><a href="#hexdump" data-toggle="tab">Hexdump</a></li>
            </ul>

            <div class="tab-content">
              <div class="tab-pane active" id="ascii">ASCII</div>
              <div class="tab-pane" id="hexdump">Hexdump</div>
            </div>

          </div> <!-- end tabpanel -->
      </div>
      <div class="modal-footer">
        <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
      </div>
    </div>
  </div>
</div>


<script type="text/javascript" src="{{ url_for('static', filename='custom_js/initialize_graph.js') }}" charset="utf-8"></script>
<script type="text/javascript" src="{{ url_for('static', filename='custom_js/d3_functions.js') }}" charset="utf-8"></script>
<script type="text/javascript" src="{{ url_for('static', filename='custom_js/sniffer_websockets.js') }}" charset="utf-8"></script>

<script type="text/javascript">

 initialize_graph();

// let's add arrows to the whole shennaningans

setInterval(function() {uncomm_all()}, 500)

  svg.append("svg:defs").selectAll("marker")
      .data(["arrow"])
      .enter().append("svg:marker")
        .attr("id", String)
        .attr("viewBox", "0 -5 10 10")
        .attr("markerUnits", "userSpaceOnUse")
        .attr("refX", 20)
        .attr("refY", 0)
        .attr("markerWidth", 7)
        .attr("markerHeight", 7)
        .attr("orient", "auto")
        .append("svg:path")
          .attr("d", "M0,-5L10,0L0,5");

</script>
<script>
initSnifferWebSocket()
initSnifferRealtimeWebSocket('{{session.name}}')
ws_sniffer.onopen = snifferInterfaceInit

$('#graph-tab').on('shown.bs.tab', function (e) {
  $("#mainscreen").attr('class', 'col-md-9')
  $(".toolbar").show()
})

$('#flows-tab').on('shown.bs.tab', function (e) {
  $("#mainscreen").attr('class', 'col-md-12')
  $(".toolbar").hide()
})

$(".module-tab").on('shown.bs.tab', function (e) {
  content = $("#"+$(this).attr('aria-controls'));
  $.ajax({
    url: content.data('bootstrap-url'),
    dataType: 'html',
    success: function(data, status) {
      content.html(data);
    }
  });
})


</script>
{%endblock%}

{% block sidebar %}
<div class='data col-md-3 toolbar'>

  <h2 id='session_name'>{{session.name}}</h2>

  <table class='table table-compact minitable' style='font-size:x-small'>
    <tr><th>Filter</th><td>{{session.filter}}</td></tr>
    <tr><th>ID</th><td id='session_id'>{{session.id}}</td></tr>
    <tr><th>Public</th><td>{{"Yes" if session.public else "No"}}</td></tr>
  </table>

  <h3>Graph operations</h3>

  <!-- replace this as include template -->

  <div class="input-append input-group">
      <input id="query" class="form-control input-sm" type="text" onkeyup="highlight_query($('#query').val())">
      <span class="input-group-btn">
        <button class='btn btn-default btn-sm' type='button' onclick="highlight_query('clear'); $('#query').val('');">Clear</button>
      </span>
  </div>
  <span class="help-block">e.g. 'type:ip', 'google.com'</span>

  <div class="checkbox">
    <label style='font-size:small'><input id='curved-links' type="checkbox" onclick='javascript: curved_links = this.checked;start()'> Curved links</label>
  </div>
  <div class="checkbox">
    <label style='font-size:small'><input type="checkbox" id='link-labels' onclick='javascript: link_labels = this.checked; start()'> Link labels</label>
  </div>

  <div class="btn-group" role="group" aria-label="graph-operations">
    <button class='btn btn-sm btn-default' type='button' onclick='javascript:freeze_graph(true)'>Freeze graph</button>
    <button class='btn btn-sm btn-default' type='button' onclick='javascript:freeze_graph(false)'>Unfreeze graph</button>
  </div>

  <!-- end replace -->

  <div class="btn-group" role="group" aria-label="sniffer-operations">
    <button id='startsniff' disabled='true' onclick="javascript:startsniff()" type="button" class="btn btn-sm btn-default">{% if session.pcap %}Replay{% else %}Start{%endif%}</button>
    <button id='stopsniff' disabled='true' onclick="javascript:stopsniff()" type="button" class="btn btn-sm btn-default">{% if session.pcap %}Cancel{% else %}Stop{%endif%}</button>
    <a class="btn btn-sm btn-default" href="{{url_for('malcom_api.pcap', session_id=session.id)}}" role="button">Download .pcap</a>
  </div>


  <h3>Node info</h3>
  <table class='table table-condensed' id='node_info'></table>
  <div class='whois'></div>

</div>

{% endblock %}
