<html lang="en">
    <head>
        <link href="https://img.icons8.com/small/24/000000/iris-scan.png" rel="shortcut icon" type="image/x-icon"/>
        <title>RobotEyes Report</title>
        <meta charset="utf-8"/>
        <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"/>
        <meta content="width=device-width, initial-scale=1" name="viewport"/>

        <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
        <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>

        <script src="https://code.jquery.com/jquery-3.3.1.js" type="text/javascript"></script>
        <link href="https://cdn.datatables.net/select/1.2.7/css/select.dataTables.min.css" rel="stylesheet"/>
        <link href="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.10/css/dataTables.checkboxes.css"
              rel="stylesheet"/>
        <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" type="text/javascript"></script>
        <script src="https://cdn.datatables.net/select/1.2.7/js/dataTables.select.min.js" type="text/javascript"></script>

        <script src="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.10/js/dataTables.checkboxes.min.js"
                type="text/javascript"></script>
        <!-- Bootstrap core Googleccharts -->
 ]
        {% block script %}{% endblock %}
        <style>
       .sidebar {
              position: fixed;
              top: 0;
              bottom: 0;
              left: 0;
              z-index: 100; /* Behind the navbar */
              box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
            }

            .sidebar-sticky {
              position: relative;
              top: 0;
              height: calc(100vh - 48px);
              padding-top: .5rem;
              overflow-x: hidden;
              overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
            }

            @supports ((position: -webkit-sticky) or (position: sticky)) {
              .sidebar-sticky {
                position: -webkit-sticky;
                position: sticky;
              }
            }

            .sidebar .nav-link {
              color: black;
            }

            .sidebar .nav-link.active {
              color: #007bff;
            }

            .sidebar .nav-link:hover .feather,
            .sidebar .nav-link.active .feather {
              color: inherit;
            }

            [role="main"] {
              padding-top: 8px;
            }

            /* Set height of body and the document to 100% */
            body {
                height: 100%;
                margin: 0;
                //font-family:  Comic Sans MS;
                background-color: white;
            }

            /* Style tab links */
            .tablinkLog {
                cursor: pointer;
            }

            @import url(https://fonts.googleapis.com/css?family=Droid+Sans);
            .loader {
                position: fixed;
                left: 0px;
                top: 0px;
                width: 100%;
                height: 100%;
                z-index: 9999;
                background: url('http://www.downgraf.com/wp-content/uploads/2014/09/01-progress.gif?e44397') 50% 50% no-repeat rgb(249,249,249);
            }

            /* TILES */
            .tile {
              width: 100%;
              float: left;
              margin: 0px;
              list-style: none;
              font-size: 45px;
              color: #FFF;
              -moz-border-radius: 15px;
              -webkit-border-radius: 15px;
              margin-bottom: 5px;
              position: relative;
              text-align: center;
              color: white!important;
            }

            .tile.tile-fail {
              background: #f44336!important;
            }
            .tile.tile-pass {
              background: #4CAF50!important;
            }
            .tile.tile-info {
              background: #009688!important;
            }
            .tile.tile-head {
              background: #616161!important;
            }
            .dt-buttons {
                margin-left: 5px;
            }

        </style>
    </head>
    <body>
        <div class="container-fluid">
            <div class="row">
                <nav class="col-md-2 d-none d-md-block bg-light sidebar" style="font-size:16px;">
                    <div class="sidebar-sticky">
                        <ul class="nav flex-column">
                            <br/>
                            <h6 class="sidebar-heading d-flex justify-content-between align-items-center text-muted">
                                <span>Dashboard</span>
                                <a class="d-flex align-items-center text-muted" href="#"></a>
                            </h6>
                            <li class="nav-item">
                                <a class="tablink nav-link" href="/" id="defaultOpen">
                                    <i class="fa fa-dashboard"></i> Overview</a>
                            </li>
                            <li class="nav-item">
                                <a class="tablink nav-link" href="/failed">
                                    <i class="fa fa-th-large"></i> Failed Tests</a>
                            </li>
                            <li class="nav-item">
                                <a class="tablink nav-link" href="/passed">
                                    <i class="fa fa-th-large"></i> Passed Tests</a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
    {% block body %}{% endblock %}
    </body>
</html>