{% extends "base.html" %}
{% block css %}
{% endblock %}
{% block content %}
<main class="app-content">
    <div class="app-title">
        <div>
          <h1><i class="fa fa-th-list"></i>&nbsp;Port Scanner</h1>
          <p></p>
        </div>
        <ul class="app-breadcrumb breadcrumb side">
          <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
          <li class="breadcrumb-item">Home</li>
          <li class="breadcrumb-item active"><a href="#">Port Scanner</a></li>
        </ul>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="tile">
                <div class="tile-body">
                    <div class="bs-component">
                        <ul class="nav nav-tabs">
                            <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#home">Add Scan</a></li>
{#                            <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#profile">Result</a></li>#}
                            <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Advanced</a>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item"  role="button" data-toggle="modal" href="#" data-target="#editPort">Default Port</a>
                                    <div class="dropdown-divider"></div><a class="dropdown-item" href="advanced-option">Thread Settings</a>
                                </div>
                                <div class="modal fade" id="editPort" tabindex="-1"  role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h4 class="modal-title" id="myModalLabel">
                                                    Default Port
                                                </h4>
                                            </div>
                                            <div class="modal-body" >
                                                <form class="form-horizontal" role="form">

                                                    <div class="form-group">
                                                        <label class="control-label no-padding-right">One port per line</label>
                                                        <div>
                                                            <textarea class="form-control" placeholder="One password per line" rows="8" name="edit_port_val">{{ port_list }}</textarea>
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary"  data-dismiss="modal" aria-hidden="true">Cancel
                                                        </button>
                                                        <button class="btn btn-primary port-update" type="button">
                                                            <span>Submit</span> <i class="fa fa-send m-l-10"></i>
                                                        </button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div><!-- /.modal-content -->
                                    </div><!-- /.modal-dialog -->
                                </div>
                            </li>
                        </ul>
                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade active show" id="home">
                                <div class="col-lg-8">
                                    <br>
                                    <form class="form-horizontal">
                                        <div class="form-group row">
                                            <label class="control-label col-md-2">Target <span class="text-danger">*</span></label>
                                            <div class="col-md-6">
                                                <input class="form-control" name="target_val" type="text" value="{{ host }}" placeholder="Example: 192.168.1.1 or 192.168.1.1/24">
                                            </div>
                                            <div class="col-md-1"></div>
                                            <div class="col-md-3">
                                                <button class="btn btn-primary btn-block new-scan" type="button">Submit&nbsp;&nbsp;<i class="fa fa-arrow-circle-right"></i></button>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label class="control-label col-md-2">Arguments </label>
                                            <div class="col-md-10">
                                                <select class="form-control col-md-5" name="arguments_val" title="Recursion">
                                                    <option value="0">Default</option>
                                                    <option value="1">-sT -T4 --open -p</option>
                                                    <option value="2">-sS -T4 -Pn -p</option>
                                                    <option value="3">-sT -sV -O -A -p</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label class="control-label col-md-2">Port</label>
                                            <div class="col-md-10">
                                                <textarea class="form-control" title="" rows="2" name="port_val" >{{ port }}</textarea>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label class="control-label col-md-2">Result</label>
                                            <div class="col-md-10" id="pre_result">
                                                <pre class='form-control'>{{ result }}</pre>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>

{#                            <div class="tab-pane fade" id="profile">#}
{#                                <br>#}
{#                                <div class="col-md-12">#}
{#                                  <div class="tile">#}
{#                                      <div class="tile-body">#}
{#                                          <table class="table table-hover table-bordered" id="sampleTable">#}
{#                                              <thead>#}
{#                                                  <tr class="text-center">#}
{#                                                      <th>Host</th>#}
{#                                                      <th>status</th>#}
{#                                                      <th>Date</th>#}
{#                                                      <th>Manage</th>#}
{#                                                  </tr>#}
{#                                              </thead>#}
{#                                              <tbody>#}
{#                                              {% for i in port_data %}#}
{#                                              <tr>#}
{#                                                  <td>#}
{#                                                      <a href="">{{ i['host'] }}</a>#}
{#                                                  </td>#}
{#                                                  <td>{{ i['status'] }}</td>#}
{#                                                  <td>{{ i['date'] }}</td>#}
{#                                                  <td class="text-center">#}
{#                                                      <a role="button" href="#" onclick="port_result('{{ i['_id'] }}')" title="Result" data-toggle="modal" data-target="#portResult">#}
{#                                                          <i class="fa fa-file-archive-o"></i>#}
{#                                                      </a>#}
{#                                                      &nbsp;#}
{#                                                      <a onclick="result_delete('{{ i['_id'] }}')"  role="button" href="#" title="Delete">#}
{#                                                          <i class="fa fa-trash-o"></i>#}
{#                                                      </a>#}
{#                                                  </td>#}
{#                                              </tr>#}
{#                                              {% endfor %}#}
{#                                              </tbody>#}
{#                                          </table>#}
{#                                          <div class="modal fade" id="portResult" tabindex="-1"  role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">#}
{#                                              <div class="modal-dialog">#}
{#                                                  <div class="modal-content">#}
{#                                                      <div class="modal-header">#}
{#                                                          <h4 class="modal-title" id="myModalLabel">#}
{#                                                              Result#}
{#                                                          </h4>#}
{#                                                      </div>#}
{#                                                      <div class="modal-body" >#}
{#                                                          <p id="port_result" title="Port Scan Result">Loading...</p>#}
{#                                                      </div>#}
{#                                                  </div><!-- /.modal-content -->#}
{#                                              </div><!-- /.modal-dialog -->#}
{#                                          </div><!-- /.modal-end -->#}
{#                                      </div>#}
{#                                  </div>#}
{#                                </div>#}
{#                            </div>#}

                        </div>
                    </div>
                </div>
            </div>
        </div>
      </div>
    </main>

{% endblock %}
{% block js %}
    <!-- Data table plugin-->
    <script type="text/javascript" src="static/js/plugins/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="static/js/plugins/dataTables.bootstrap.min.js"></script>
    <script src="static/js/plugins/sweetalert/sweetalert.min.js"></script>
    <script src="static/js/server/port-scanner.js"></script>

{% endblock %}