{% extends 'master.html' %}

{% block body %}

  <script type="text/javascript">

   function changeService() {
    var selectBox = document.getElementById("serviceSelect");
    var selectedValue = selectBox.options[selectBox.selectedIndex].value;
    var serviceInfo = JSON.parse(selectedValue);
    if (serviceInfo.protocol=='tcp')
      document.getElementById("protocol").selectedIndex=1
    else if (serviceInfo.protocol=='udp')
      document.getElementById("protocol").selectedIndex=2 
    else
      document.getElementById("protocol").selectedIndex=0

    document.getElementById("dst_host").value=serviceInfo.host
    document.getElementById("dst_port").value=serviceInfo.port

   }


   function changeHost() {
    var selectBox = document.getElementById("hostSelect");
    var selectedValue = selectBox.options[selectBox.selectedIndex].value;
    var serviceInfo = JSON.parse(selectedValue);
    document.getElementById("src_boot").value=serviceInfo.boot_time

   }


  </script>

    <form action="/search" method="post" name="search">

    <table align="center" width="80%" border="1px">
      <tr style="background-color: #f2f2f2"><td colspan="2" align="center"><h1>Search PCAP</h1></td></tr>
    </table>

    <br>

    <table align="center" width="80%" border="1px">

            <tr><td width="50%">Timestamp</td><td>
              Start:<br>
              <input id="timestamp-0" name="timestamp-0" type="datetime-local" value="{{ config.CAPTURE_START }}" min="{{ config.CAPTURE_START }}" max="{{ config.CAPTURE_END }}">
              <br>End:<br>
              <input id="timestamp-1" name="timestamp-1" type="datetime-local" value="{{ config.CAPTURE_END }}" min="{{ config.CAPTURE_START }}" max="{{ config.CAPTURE_END }}">
            </td></tr>
            <!--
            <tr><td width="50%">Search text<br>(may contain false positives)</td><td>{{ form.search_regex }}</td></tr>
            --!>
            <tr>
                <td width="50%">Services</td>
                <td>
                    <select id="serviceSelect" selected="-" onchange="changeService();">
                        {% for service_name, service_info in services %}
                            <option value="{{ service_info }}">{{ service_name }}</option>
                        {% endfor %}
                    </select>
                </td>
            </tr>
            <tr>
                <td width="50%">Hosts</td>
                <td>
                    <select id="hostSelect" selected="-" onchange="changeHost()";>
                        {% for host_name, host_info in hosts %}
                            <option value="{{ host_info }}">{{ host_name }}</option>
                        {% endfor %}
                    </select>
                </td>
            </tr>

            <tr><td width="50%">Search destination?</td><td>{{ form.search_dst }}</td></tr>
            <tr><td width="50%">Destination port</td><td>{{ form.dst_port }}</td></tr>
            <tr><td width="50%">Protocol</td><td>{{ form.protocol }}</td></tr>
            <tr><td width="50%">Contains a <b>SYN</b> packet</td><td>{{ form.syn }}</td></tr>
            <tr><td width="50%">Contains a <b>SYNACK</b> packet</td><td>{{ form.synack }}</td></tr>
            <tr><td width="50%">Contains a <b>FIN</b> packet</td><td>{{ form.fin }}</td></tr>
            <tr><td width="50%">Contains a <b>RST</b> packet</td><td>{{ form.rst }}</td></tr>
            <tr><td width="50%">No. of packets</td><td>
              Min:<br>
              <input id="num_packets-0" name="num_packets-0" type="text" value="">
              <br>Max:<br>
              <input id="num_packets-1" name="num_packets-1" type="text" value="">
            </td></tr>
            <tr><td width="50%">Duration</td><td>
              Min:<br>
              <input id="duration-0" name="duration-0" type="text" value="">
              <br>Max:<br>
              <input id="duration-1" name="duration-1" type="text" value="">
            </td></tr>
            <tr><td width="50%">Filename</td><td>{{ form.filename }}</td></tr>
            <tr><td width="50%">Tags</td><td>
              Comma separated:<br>
              <input id="tags" name="tags" type="text" value="">
        </table>

        <br>

        
   <table style="border-collapse: collapse; border: none;" width="80%" align="center">
   <tr><td style="border-collapse: collapse; border: none;" width="50%">

       <table align="center">
            <tr><td colspan="2" align="center"><b>Source</b></td></tr>
            <tr><td width="50%">Host</td><td>{{ form.src_host }}</td></tr>
            <tr><td width="50%">Boot</td><td>{{ form.src_boot }}</td></tr>
            <tr><td width="50%">Size sent</td><td>
              Min:<br>
              <input id="src_size_sent-0" name="src_size_sent-0" type="text" value="">
              <br>Max:<br>
              <input id="src_size_sent-1" name="src_size_sent-1" type="text" value="">
            </td></tr>
            <!--
            <tr><td width="50%">No. of <b>printable</b> characters sent</b></td><td>
              Min:<br>
              <input id="src_printables-0" name="src_printables-0" type="text" value="">
              <br>Max:<br>
              <input id="src_printables-1" name="src_printables-1" type="text" value="">
            </td></tr>
            <tr><td width="50%">No. of <b>nonprintable</b> characters sent</td><td>
              Min:<br>
              <input id="src_nonprintables-0" name="src_nonprintables-0" type="text" value="">
              <br>Max:<br>
              <input id="src_nonprintables-1" name="src_nonprintables-1" type="text" value="">
            </td></tr>
            --!>
        </table>
 </td>
<td style="border-collapse: collapse; border: none;" width="50%">

        <table align="center">
            <tr><td colspan="2" align="center"><b>Destination</b></td></tr>
            <tr><td width="50%">Host</td><td>{{ form.dst_host }}</td></tr>
           <tr><td width="50%">Boot</td><td>{{ form.dst_boot }}</td></tr>
            <tr><td width="50%">Size sent</td><td>
              Min:<br>
              <input id="dst_size_sent-0" name="dst_size_sent-0" type="text" value="">
              <br>Max:<br>
              <input id="dst_size_sent-1" name="dst_size_sent-1" type="text" value="">
            </td></tr> 
            <!--
            <tr><td width="50%">No. of <b>printable</b> characters sent</td><td>
              Min:<br>
              <input id="dst_printables-0" name="dst_printables-0" type="text" value="">
              <br>Max:<br>
              <input id="dst_printables-1" name="dst_printables-1" type="text" value="">
            </td></tr>
            <tr><td width="50%">No. of <b>nonprintable</b> characters sent</td><td>
              Min:<br>
              <input id="dst_nonprintables-0" name="dst_nonprintables-0" type="text" value="">
              <br>Max:<br>
              <input id="dst_nonprintables-1" name="dst_nonprintables-1" type="text" value="">
            </td></tr>
            --!>
        </table>
        
 </td></tr>
        </table>

<br><br>

        <table align="center" width="80%" border="1px">
        <tr><td id="buttonForm" colspan="2" align="center"><input type="submit"
        value="Search" style="font-size : 20px; background-color: Transparent; border:0 none;
        height:100%; width:100%"></td></tr>
        </table>

        <br><br>
    </form>


{% endblock %}