<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">

  <title>Security Management</title>
  <meta content="" name="description">
  <meta content="" name="keywords">

  {% load static %}
  <!-- Favicons -->
  <link href="{% static 'assets2/img/favicon.png' %}" rel="icon">
  <link href="{% static 'assets2/img/apple-touch-icon.png' %}" rel="apple-touch-icon">

  <!-- Google Fonts -->
  <link href="https://fonts.gstatic.com" rel="preconnect">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Nunito:300,300i,400,400i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">

  <!-- Vendor CSS Files -->
  <link href="{% static 'assets/vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
  <link href="{% static 'assets/vendor/bootstrap-icons/bootstrap-icons.css' %}" rel="stylesheet">
  <link href="{% static 'assets/vendor/boxicons/css/boxicons.min.css' %}" rel="stylesheet">
  <link href="{% static 'assets/vendor/quill/quill.snow.css' %}" rel="stylesheet">
  <link href="{% static 'assets/vendor/quill/quill.bubble.css' %}" rel="stylesheet">
  <link href="{% static 'assets/vendor/remixicon/remixicon.css' %}" rel="stylesheet">
  <link href="{% static 'assets/vendor/simple-datatables/style.css' %}" rel="stylesheet">

  <!-- Template Main CSS File -->
  <link href="{% static 'assets/css/style.css' %}" rel="stylesheet">
    <style>
        body{
            
        }
        .btn_width{
            width: 100px;
        }
    </style>
</head>

<body>
<!-- ======= Header ======= -->
  <header id="header" class="header fixed-top d-flex align-items-center">

    <div class="d-flex align-items-center justify-content-between">
      <a href="index" class="logo d-flex align-items-center">
        <img src="{% static 'assets/img/UT_384.png' %}" alt="">
        <span class="d-none d-lg-block">UnifyTwin</span>
      </a>
    </div><!-- End Logo -->

    <nav class="header-nav ms-auto">
      <ul class="d-flex align-items-center">
        <li class="nav-item dropdown pe-3">

          <a class="nav-link nav-profile d-flex align-items-center pe-0" href="#" data-bs-toggle="dropdown">
            <span class="d-none d-md-block dropdown-toggle ps-2">{{ user_details }}</span>
          </a><!-- End Profile Iamge Icon -->

          <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow profile">
            <li class="dropdown-header">
              <h6>{{ user_details }}</h6>
            </li>
            <li>
              <hr class="dropdown-divider">
            </li>

            <li>
              <a class="dropdown-item d-flex align-items-center" href="sign_out">
                <i class="bi bi-box-arrow-right"></i>
                <span>Sign Out</span>
              </a>
            </li>

          </ul><!-- End Profile Dropdown Items -->
        </li><!-- End Profile Nav -->

      </ul>
    </nav><!-- End Icons Navigation -->

  </header><!-- End Header -->

  <main id="main" class="main"  style="scale:90%;">

    <div class="pagetitle" style="margin-top:-2.5%">
      <h1>Assets Discovery</h1>
    </div><!-- End Page Title -->
    
    <section class="section" style="font-size:16px;">
      <div class="row">
        <div class="col-lg-12">
          <div class="card">
            <div class="card-body" style="box-shadow: 0 4px 3px -3px #ddd; margin-bottom:10px;">
              <form action="start_sniff" name="start_sniff" method="POST">
                {% csrf_token %}
                <div style="padding-top: 20px;">
                <div class="row mb-3">
                  <label class="col-sm-2 col-form-label" style="font-weight: bold;">Choose an Interface</label>
                  <div class="col-sm-10">
                    <select name="interface" class="form-select" aria-label="Default select example">
                        {% for interface in interface_list %}
                        <option value="{{ interface }}">{{ interface }}</option>
                        {% endfor %}
                    </select>
                  </div>
                </div>
                  <input class="btn btn-primary rounded-pill btn_width" type="submit" value="Start">
              <a href = "stop_sniff"><button type="button" class="btn btn-primary rounded-pill btn_width">Stop</button></a>
              <a href = "refresh"><button type="button" class="btn btn-primary rounded-pill btn_width">Refresh</button></a>
              <label style="float: right; margin-right:20px;font-weight: bold;">Status :  {{ status }}</label>
            </div>
              </form>
          </div>
            <div class="card-body" style="scale:95%;">
              <!-- Table with stripped rows -->
              <table class="table datatable">
                <thead>
                  <tr>
                    <th scope="col">No.</th>
                    {% for field_name in heading %}
                    <th scope="col">{{ field_name }}</th>
                    {% endfor %}
                    <th scope="col">Status</th>
                  </tr>
                </thead>
                <tbody>
                {% for field in data %}
                  <tr>
                    <th scope="row">{{ field.0 }}</th>
                    <td>{{ field.1 }}</td>
                    <td>{{ field.2 }}</td>
                    <td>{{ field.3 }}</td>
                    <td>{{ field.4 }}</td>
                    <td>{{ field.5 }}</td>
                    <td>{{ field.6 }}</td>
                    <td>{{ field.7 }}</td>
                    <td>{{ field.8 }}</td>
                    <td>
                      {% if field.9 == "Active" %}
                          <button type="button" class="btn btn-success rounded-pill" style="scale:75%">
                            <span class="action mat-icon material-icons"  style="margin-top:5px;">wifi</span>
                          </button>
                      {% else %}
                          <button type="button" class="btn btn-danger rounded-pill" style="scale:75%">
                            <span class="action mat-icon material-icons" style="margin-top:5px;">wifi_off</span>
                          </button>
                      {% endif %}
                    </td>
                  </tr>
                {% endfor %}
                </tbody>
              </table>
              <!-- End Table with stripped rows -->

            </div>
          </div>

        </div>
      </div>
    </section>

  </main><!-- End #main -->

  <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>

  <!-- Vendor JS Files -->
  <script src="{% static 'assets/vendor/apexcharts/apexcharts.min.js' %}"></script>
  <script src="{% static 'assets/vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
  <script src="{% static 'assets/vendor/chart.js/chart.umd.js' %}"></script>
  <script src="{% static 'assets/vendor/echarts/echarts.min.js' %}"></script>
  <script src="{% static 'assets/vendor/quill/quill.min.js' %}"></script>
  <script src="{% static 'assets/vendor/simple-datatables/simple-datatables.js' %}"></script>
  <script src="{% static 'assets/vendor/tinymce/tinymce.min.js' %}"></script>
  <script src="{% static 'assets/vendor/php-email-form/validate.js' %}"></script>

  <!-- Template Main JS File -->
  <script src="{% static 'assets/js/main.js' %}"></script>

</body>

</html>