<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Students</title>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
      integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link
      rel="stylesheet"
      href="https://bootswatch.com/4/journal/bootstrap.min.css"
    />
    <style type="text/css">
      body {
        color: #566787;
        background: #f5f5f5;
        font-family: "Roboto", sans-serif;
      }

      .table-wrapper {
        background: #fff;
        padding: 20px;
        margin: 30px 0;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
      }

      .table-title {
        padding-bottom: 10px;
        margin: 0 0 10px;
      }

      .table-title h2 {
        margin: 8px 0 0;
        font-size: 22px;
      }

      .search-box {
        position: relative;
        float: right;
      }

      .search-box input {
        height: 34px;
        border-radius: 20px;
        padding-left: 35px;
        border-color: #ddd;
        box-shadow: none;
      }

      .search-box input:focus {
        border-color: #3fbae4;
      }

      .search-box i {
        color: #a0a5b1;
        position: absolute;
        font-size: 19px;
        top: 8px;
        left: 10px;
      }

      table.table tr th,
      table.table tr td {
        border-color: #e9e9e9;
      }

      table.table-striped tbody tr:nth-of-type(odd) {
        background-color: #fcfcfc;
      }

      table.table-striped.table-hover tbody tr:hover {
        background: #f5f5f5;
      }

      table.table th i {
        font-size: 13px;
        margin: 0 5px;
        cursor: pointer;
      }

      table.table td:last-child {
        width: 130px;
      }

      table.table td a {
        color: #a0a5b1;
        display: inline-block;
        margin: 0 5px;
      }

      table.table td a.view {
        color: #03a9f4;
      }

      table.table td a.edit {
        color: #ffc107;
      }

      table.table td a.delete {
        color: #e34724;
      }

      table.table td i {
        font-size: 19px;
      }

      .pagination {
        float: right;
        margin: 0 0 5px;
      }

      .pagination li a {
        border: none;
        font-size: 95%;
        width: 30px;
        height: 30px;
        color: #999;
        margin: 0 2px;
        line-height: 30px;
        border-radius: 30px !important;
        text-align: center;
        padding: 0;
      }

      .pagination li a:hover {
        color: #666;
      }

      .pagination li.active a {
        background: #03a9f4;
      }

      .pagination li.active a:hover {
        background: #0397d6;
      }

      .pagination li.disabled i {
        color: #ccc;
      }

      .pagination li i {
        font-size: 16px;
        padding-top: 6px;
      }

      .hint-text {
        float: left;
        margin-top: 6px;
        font-size: 95%;
      }
    </style>
    <script type="text/javascript">
      $(document).ready(function() {
        $('[data-toggle="tooltip"]').tooltip();
      });
    </script>
  </head>

  <body>
    <%- body %>
    <script
      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
      integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
      crossorigin="anonymous"
    ></script>
  </body>
</html>
