<!DOCTYPE html>
<html lang="en">
  <%- include("partial/header") %>

  <body class="bg-gray-200">
    <%- include("partial/nav") %>

    <div
      class="card mx-6 flex flex-col my-16 max-w-2xl justify-around sm:mx-auto sm:flex-row  "
    >
      <div
        class="profile-card flex-col bg-<%= colorTheme %>-700 rounded flex-1 shadow mr-2 "
      >
        <!--         Amount to Send
 -->
        <div class="wallet-amount ">
          <form
            action="/send"
            method="post"
            class="flex flex-col items-center m-auto w-full"
          >
            <div class="item flex flex-col">
              <label for="username" class=" font-bold mt-10 mb-2 text-white"
                >To
              </label>
              <input
                type="text"
                name="receiver"
                id="username"
                placeholder="Username"
                class="bg-white shadow-lg w-64  rounded text-center  mb-2 h-10 "
              />
            </div>

            <p class=" text-red-500 "><%= error %></p>

            <div class="item flex flex-col">
              <label for="" class=" font-bold text-white mt-2">Amount</label>
              <input
                type="number"
                name="amount"
                id=""
                placeholder="100"
                class="bg-white shadow-lg w-64 border rounded  text-center mt-2 mb-2 h-10 "
              />
            </div>
            <div class="item flex flex-col">
              <label for="" class=" font-bold text-white mt-2"
                >Message <span class=" font-normal">(optionnal)</span></label
              >
              <textarea
                name="message"
                id=""
                cols="30"
                rows="10"
                class="bg-white shadow-lg rounded w-64 h-24 mt-2 p-2"
              ></textarea>
            </div>

            <p class=" mb-5 text-red-500 "><%= amountError %></p>

            <div class="flex flex-row mt-2 mb-2">
              <button
                type="submit"
                class=" cursor-pointer text-lg mx-2 shadow px-6 py-4  mb-8 text-white font-bold bg-<%= colorTheme %>-400 rounded hover:bg-<%= colorTheme %>-600"
              >
                CONFIRM
              </button>
              <a href="/home">
                <div
                  class="cursor-pointer text-lg mx-2 shadow px-6 py-4  mb-8 text-white font-bold bg-red-500 rounded hover:bg-red-600"
                >
                  CANCEL
                </div>
              </a>
            </div>
          </form>
        </div>

        <!--         End of Amount to Send
 -->
      </div>
    </div>
  </body>
</html>
