
<!Doctype html>
<html>
 <head>
   <meta charset="utf-8">
   <title>Check for Organ Avalaiabilty</title>
   <link rel="icon" href="favicon.ico">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
   <link rel="stylesheet" href="/css/organ.css">
 </head>
 <body>
  <div id="Heading Box">
   <h1 id="Heading">Organ Donation Management System</h1>
 </div>

<!-- Navbar -->
  <div class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">
        <img src="/css/logo.png" alt=""  height="20">
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto mb-2 mb-lg-0">
                <li class="nav-item" id="nav-logo">
                <a class="nav-link active" aria-current="page" href="#Heading Box"></a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="#">Check for Organ Availability</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="/logind">Login for Donor</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="/register">Sign-up for Donor</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/loginad">Admin Login</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<br>
<br>


<div class="container">
  <div class="row">
    <div class="col-12"><h3 id="topsies"> Check Organ Availability </h3>
    </div>
    <div class="row">
        <div class="col-4" id="Boxy" >
            <form class="form" action="/auth/organavail" method="POST">
                <label for="organ" class="form-label">Enter Organ</label>
                <input type="text" class="form-control" placeholder="XXXXXX" value="" required name="organ">
                <label for="city" class="form-label">City</label>
                    <input type="text" class="form-control" placeholder="XXXXXX" value="" required name="city">
                    <br>
                    <div class="sub"><input type="submit" value="Submit" ></div>
                    <% if(message){ %>
                        <% if(results.length > 0){ %>
                            <div class="suc"><%= message %></div>
                        <% }else{ %>
                            <div class="err"><%= message %></div>
                        <% } %>
                      <% } %>
            </form>
            <br>
        </div>
    </div>
  </div>
  <br>
  <br>
  <% if(results.length > 0){ %>
  <table class="det">
    <tr>
      <th>Organ</th>
      <th>Hospital</th>
      <th>City</th>
      <th>Contact</th>
      <th>Address</th>
    </tr>
    <% results.forEach(function(user){ %>
      <tr>
      <td><%= user.Organ_name %></td>
      <td><%= user.Hospital %></td>
      <td><%= user.City %></td>
      <td><%= user.Contact_Number %></td>
      <td><%= user.Address %></td>
    </tr>
      <%  }); %>
  </table>
  <% } %>

</div>
</body>
</html>