<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">

      function delete_req(link) {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
          if (this.readyState == 4) {
            window.location.href = "<%= base_path %>"
          }
        };
      xhttp.open("DELETE", link, true);
      xhttp.send();
      }

      function get(name, link) {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
          if (this.readyState == 4) {
            // Typical action to be performed when the document is ready:
            var msg = "<div class='card'>Status for <b>" + name + ": </b>" + xhttp.responseText + "</div>";
            document.getElementById("status").innerHTML = msg;
          }
        };
      xhttp.open("GET", link, true);
      xhttp.send();
      }

      function schedule(name) {
        get(name, "<%= base_path %>/spiders/" + name + "/schedule")
      }

      function stop(name) {
        get(name, "<%= base_path %>/spiders/" + name + "/stop")
      }
    </script>

    <style>
      * {
        box-sizing: border-box;
      }


      body {
        font-family: Arial;
        padding: 10px;
        background: #f1f1f1;
      }

      /* Header/Blog Title */
      .header {
        padding: 30px;
        text-align: center;
        background: white;
      }

      .header h1 {
        font-size: 50px;
      }

      /* Create two unequal columns that floats next to each other */
      /* Left column */
      .leftcolumn {
        float: left;
        width: 100%;
      }

      /* Add a card effect for articles */
      .card {
        background-color: white;
        padding: 20px;
        margin-top: 20px;
      }

      /* Clear floats after the columns */
      .row:after {
        content: "";
        display: table;
        clear: both;
      }
      table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
      }

      td, th {
        border: 1px solid #dddddd;
        text-align: left;
        padding: 8px;
      }

      tr:nth-child(even) {
        background-color: #dddddd;
      }


      /* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
      @media screen and (max-width: 800px) {
        .leftcolumn, .rightcolumn {
          width: 100%;
          padding: 0;
        }
      }

      /* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
      @media screen and (max-width: 400px) {
        .topnav a {
          float: none;
          width: 100%;
        }
      }
    </style>

  </head>
  <body>
    <div class="header">
      <h1><a href="<%= base_path %>">Crawly Management Tool</a></h1>
    </div>
    <%= rendered_template %>
  </body>
</html>
