<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Transactions</title>
    <link rel="stylesheet" href="/stylesheets/user/mytransaction.css" />
  </head>
  <body>
    <%- include('../../templates/header') %>
    <section>
      <h1>Latest Transactions</h1>
      <h2>Today</h2>
      <% transactions.slice().reverse().forEach(element => { %>
      <details>
        <summary>
          <div>
            <span>
              <!-- <svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="currentColor" viewBox="0 0 256 256">
                                <rect width="256" height="256" fill="none"></rect>
                                <rect x="32" y="80" width="192" height="48" rx="7.99999" stroke-width="16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"></rect>
                                <path d="M208,128v72a8,8,0,0,1-8,8H56a8,8,0,0,1-8-8V128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path>
                                <line x1="128" y1="80" x2="128" y2="208" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
                                <path d="M173.25483,68.68629C161.94113,80,128,80,128,80s0-33.94113,11.31371-45.25483a24,24,0,0,1,33.94112,33.94112Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path>
                                <path d="M82.74517,68.68629C94.05887,80,128,80,128,80s0-33.94113-11.31371-45.25483A24,24,0,0,0,82.74517,68.68629Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path>
                            </svg> -->
            </span>
            <h3>
              <strong>Subscription: <%= element.plan.toUpperCase() %> |</strong>
              <% if (element.status=='failed') { %>
              <small
                style="
                  background-color: red;
                  color: aliceblue;
                  border-radius: 3px;
                  padding: 2px;
                "
                ><%= element.status %></small
              >
              <% } %> <% if (element.status=='success') { %>
              <small
                style="
                  background-color: rgb(22, 189, 0);
                  color: aliceblue;
                  border-radius: 3px;
                  padding: 2px;
                "
                ><%= element.status %></small
              >
              <% } %> <% if (element.status=='initiated') { %>
              <small
                style="
                  background-color: rgb(0, 66, 189);
                  color: aliceblue;
                  border-radius: 3px;
                  padding: 2px;
                "
                ><%= element.status %></small
              >
              <% } %>
            </h3>
            <span class="plus"><%= element.amount %> Rs</span>
          </div>
        </summary>
        <div>
          <dl>
            <div>
              <dt>Time</dt>
              <dd><%= element.time %></dd>
            </div>

            <div>
              <dt>Reference ID</dt>
              <dd><%= element.trId %></dd>
            </div>
          </dl>
        </div>
      </details>
      <% }) %>
    </section>
  </body>
</html>
