<!DOCTYPE html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
    crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#search").on("keyup", function() {
            var value = $(this).val().toLowerCase();
            $("#Table tr").filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });
            });
        });
        </script>
    <style>
        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;
        }
        </style>
    <title>Search Student Page</title>
</head>

<body>
    <nav class="navbar navbar-dark bg-dark justify-content-between">
        <form action="/home">
            <button style="border: 0px solid transparent;" class="btn btn-outline-primary">HOME</button>
        </form>
        <form class="form-inline" action="/logout">
            <label style="color:white; padding-right: 10px">Hi {{session.get('username')}}!</label>
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Logout</button>
        </form>
    </nav>
    <div class="jumbotron">
        <center>
            <h1 class="display-4">Organ Donation and Procurement Management System</h1>
        </center>
    </div>
    <form class="container">
        <div class="form-group row">
            <label class="col-sm-2 col-form-label"><strong>SEARCH:</strong></label>
            <div class="col-sm-10">
                <input type="text" id="search" class="form-control">
            </div>
        </div>
    </form>
    <table>
        <thead>
            <tr>
                {% for i in range(0,fields | length) %}
                <th>{{fields[i]}}</th>
                {%endfor%}
            </tr>
        </thead>

        <tbody id="Table">
            {% for i in range(0,res | length) %}
            <tr>
                {% for j in range(0,res[i] | length) %}
                {%if res[i][j]==None%}
                <td></td>
                {%else%}
                <td>{{res[i][j]}}</td>
                {%endif%}
                {%endfor%}
            </tr>
            {%endfor%}
        </tbody>
    </table>
</body>

</html>
