<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>ManiPal</title>
  <!-- CSS only -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
  <link href="/css/donorstyles.css" rel="stylesheet" />
</head>

<body>
  <!-- Navbar-->


  <!-- Signup Form -->
  <div class="container forbox ">
    <div class="p-4 m-4 ">
      <div class="col-lg-5 mx-auto border rounded mt-20">
        <h3>
          <div class="alert hello" role="alert" style="background-color:#A683E3">
            Donor Form
          </div>
        </h3>

        <form class="bg-light" action="/donorPost" method="post">
          <!-- Hospital Name -->
          <div class="form-group m-1">
            <label for="Hospital Name"><b>Hospital Name</b></label>
            <input class="form-control-sm form-control" id="" value="<%=hospitalName%>" name="hospitalName" placeholder="<%=hospitalName%>" type="text" />
          </div>

          <!-- Hospital unique id -->
          <div class="form-group m-1">
            <label for="Invoice-ID"><b>Invoice-ID</b></label>
            <input class="form-control-sm form-control" id="" value="" name="Invoice-ID" placeholder="Invoice-ID" type="text" />
          </div>

          <!-- Hospital address -->
          <div class="form-group m-1">
            <label for="Address"><b>Hospital-Address</b></label>
            <input type="text" class="form-control-sm form-control" value="<%=address%>" id="" name="hospitalAddress" placeholder="<%=address%>"/>
          </div>

          <!--Equipment-->
          <div class="form-group m-1">
            <label for="EquipmentName"><b>Equipment-Name</b></label>
            <input class="form-control-sm form-control" id="" value="" name="EquipmentName" placeholder="Name Of Equipment" type="text"/>
          </div>

          <!-- distance -->
          <div class="form-group m-1">
            <label for="Quantity"><b>Quantity</b></label>
            <input required class="form-control-sm form-control" id="" value="" name="Quantity" placeholder="" type="number" autocomplete="off" />
          </div>
          <div class="form-group m-1">
            <label for="cost"><b>Cost</b></label>
            <input required class="form-control-sm form-control" id="" value="" name="cost" placeholder="" type="number" autocomplete="off" />
          </div>
          <!-- password -->
          <!-- <div class="form-group m-1">
            <label for=""><b>Password</b></label>
            <input class="form-control-sm form-control" id="" name="password" placeholder="*******" type="password" />
          </div> -->
          <div class="form-group m-1">
            <label for="age"><b>Age of Equipment</b></label>
            <input required class="form-control-sm form-control" id="" value="" name="age" placeholder="Age of equipment" type="number" autocomplete="off" />
          </div>
          <div class="btns" role="group" aria-label="Basic example">
            <a href="/dashboard">Back</a>
            <button type="submit" class="btn btn-primary">Submit</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>

</html>