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

  <body class="bg-gray-200 h-screen ">
    <div id="wrapper" class="flex flex-col justify-between h-full ">
      <%- include("partial/nav") %>

      <h1
        class=" text-center text-<%= colorTheme %>-500  invisible sm:visible sm:text-4xl "
      >
        Hello, <%= username %>
      </h1>

      <div
        class="card max-h-full max-w-4xl w-auto mx-6 flex flex-col my-16  sm:mt-16 lg:w-screen lg:mx-auto sm:flex-row sm:justify-around  "
      >
        <div
          class="profile-card shadow-lg flex-col bg-<%= colorTheme %>-700 rounded sm:flex-1  mr-2 "
        >
          <div class="profile-picture my-2 hidden sm:flex ">
            <a href="http://gravatar.com" target="_blank" class="mx-auto ">
              <img
                src="<%= pictureURL %>"
                alt=""
                class="rounded-full h-32 w-32 border-<%= colorTheme %>-700 shadow-lg border-4 -mt-16 top-0 hover:opacity-75"
            /></a>
          </div>
          <div class="wallet-amount">
            <h1 class=" text-3xl text-white text-center mt-4">
              Your Wallet
            </h1>

            <h1 class=" text-4xl text-white text-center font-bold">
              <%= tokens %> <%= tokenSymbol %>
            </h1>
          </div>

          <div class="buttons-wallet flex justify-center my-8">
            <a href="/send">
              <div
                class=" cursor-pointer mx-2 shadow-lg py-2 px-8 text-2xl mt-5 mb-8 ml-5 text-white font-bold bg-<%= colorTheme %>-500 rounded hover:bg-<%= colorTheme %>-400"
              >
                SEND
                <i class="fas fa-paper-plane ml-2 self-center"></i>
              </div>
            </a>
          </div>
        </div>

        <!-- HISTORY -->

        <div
          class="history-card min-h-full h-64 bg-gray-200 rounded px-2  overflow-y-scroll mt-5 sm:m-auto sm:self-center lg:flex-1  "
        >
          <!--           <h2 class="text-center mb-3  text-<%= colorTheme %>-500 text-2xl ">
            HISTORY
          </h2> -->

          <% history.reverse() %> <% history.forEach(function(i){ %> <% if(user
          === i.fromUsername) { %>
          <div class="row flex">
            <a
              href="/transaction/<%= i._id %>"
              class="flex flex-1 justify-between items-center mx-2 font-medium text-center text-red-500 bg-white shadow rounded my-3 text-lg p-3 text-center sm:mt-auto"
            >
              <p class="text-center">
                You sent <%= i.amount %> <%= tokenSymbol %> to <%= i.toUsername
                %>
              </p>
              <% if(i.message){ %> ✉️ <% } %>
            </a>
            <img
              src="<%= i.gravatarTo %>"
              alt=""
              class=" h-12 w-12 rounded-full mx-2 align-middle hidden sm:flex"
            />
          </div>

          <% } else { %>
          <div class="row flex">
            <img
              src="<%= i.gravatarFrom %>"
              alt=""
              class=" h-12 w-12 rounded-full mr-2 align-middle hidden sm:flex"
            />
            <a
              href="/transaction/<%= i._id %>"
              class="flex flex-1 justify-between items-center mx-2 font-medium text-green-500 bg-white shadow rounded mb-3 p-3 text-lg text-center mt-3 sm:mt-auto"
            >
              <p class="">
                <%= i.fromUsername %> sent you <%= i.amount %> <%= tokenSymbol
                %>
              </p>
              <% if(i.message){ %> ✉️ <% } %>
            </a>
          </div>

          <% }; }) %>

          <!-- DEMO ONLY - DELETE -->
          <div class="row flex">
            <img
              src="http://www.gravatar.com/avatar/52af7ea41708106abb83a4127d092cb2?s=128"
              alt=""
              class=" h-12 w-12 rounded-full mr-2 align-middle hidden sm:flex"
            />
            <a
              href="/2"
              class="flex flex-1 justify-between items-center mx-2 font-medium text-green-500 bg-white shadow rounded mb-3 p-3 text-lg text-center mt-3 sm:mt-auto"
            >
              <p class="">
                Florian sent you 49 TKN
              </p>
              <!--               <i class="far fa-envelope mx-4 fa-lg"></i>
 -->✉️
            </a>
          </div>
          <div class="row flex">
            <img
              src="http://www.gravatar.com/avatar/63f22e9ed4ab5de271450af57df28c94?s=128"
              alt=""
              class=" h-12 w-12 rounded-full mr-2 align-middle hidden sm:flex"
            />
            <a
              href="/1"
              class="flex flex-1 justify-between items-center mx-2 font-medium text-green-500 bg-white shadow rounded mb-3 p-3 text-lg text-center mt-3 sm:mt-auto"
            >
              <p class="">
                Daryl sent you 1 TKN
              </p>
              ✉️
            </a>
          </div>

          <!-- DELETE END -->
        </div>
      </div>
      <%- include("partial/footer") %>
    </div>
  </body>
</html>
