<!--<footer class="footer-main">-->
<!--    <div class="container">-->
<!--        <div class="row justify-content-center">-->
<!--            <div class="col-xl-10 col-12 px-xl-5">-->
<!--                <div class="footer-content">-->
<!--                    <h2 class="theme-h2">Tell Them How You Feel With A Pair Of Virtual Ballz</h2>-->
<!--                    <h5 class="footer-h5">Virtual (adjective).</h5>-->
<!--                    <ol class="footer-ol">-->
<!--                        <li>Created by computer technology and appearing to exist but not existing in the physical-->
<!--                            world:</li>-->
<!--                        <li>Existing, seen, or happening online or on a computer screen, rather than in person or in the-->
<!--                            physical world:</li>-->
<!--                        <li>Something that exists in the mind, exists in essence but not in fact or created by a-->
<!--                            computer:</li>-->
<!--                    </ol>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--    <div class="bg-shapes">-->
<!--        <figure>-->
<!--            <img src="<%= baseUrl %>images/banner-top-left.png" alt="">-->
<!--        </figure>-->
<!--        <figure>-->
<!--            <img src="<%= baseUrl %>images/banner-shape-lefft.png" alt="">-->
<!--        </figure>-->
<!--        <figure>-->
<!--            <img src="<%= baseUrl %>images/banner-shape-rgt.png" alt="">-->
<!--        </figure>-->
<!--    </div>-->
<!--    <div class="floating-shapes">-->
<!--        <span data-parallax='{"x": -180, "y": -20, "rotateZ":500}'>-->
<!--            <img src="<%= baseUrl %>images/floating-dot.png" alt="">-->
<!--        </span>-->
<!--        <span data-parallax='{"x": 150, "y": -20, "rotateX":2000}'>-->
<!--            <img src="<%= baseUrl %>images/floating-dot2.png" alt="">-->
<!--        </span>-->
<!--        <span data-parallax='{"x": -20, "y": -100, "rotateZ":500,"rotateX":2000}'>-->
<!--            <img src="<%= baseUrl %>images/floating-dot3.png" alt="">-->
<!--        </span>-->
<!--        <span data-parallax='{"x": 50, "y": -30}'>-->
<!--            <img src="<%= baseUrl %>images/floating-circle-dots.png" alt="">-->
<!--        </span>-->
<!--        <span data-parallax='{"x": -20, "y": -100, "rotateZ":500}'>-->
<!--            <img src="<%= baseUrl %>images/floating-dot5.png" alt="">-->
<!--        </span>-->
<!--    </div>-->
<!--</footer>-->
<div class="offcanvas offcanvas-end viewcart-offcanvas" tabindex="-1" id="view-cart-offcanvas" aria-labelledby="view-cart-offcanvasLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="view-cart-offcanvasLabel">Your Items in Cart</h5>
    <button type="button" class="close-canvas" data-bs-dismiss="offcanvas" aria-label="Close"><i class="fas fa-times"></i></button>
  </div>
  <div class="offcanvas-body">
    <div class="no-items d-none">
      <img class="img-fluid" src="images/hungry-emoji.png" alt="hungry">
      <p>Add items in cart to Show here!</p>
    </div>
    <div class="cart-listing">
      <% let totalAmount = 0; if(user?.cart?.length > 0){ %>
      <ul class="cart-ul">
        <% user.cart.forEach((cartItem,ind) => { %>
        <li class="cart-item">
          <ul>
            <li>
              <h4><%= cartItem.packageNo %></h4>
              <form action="/api/user/remove-from-cart" method="post">
                <input type="hidden" name="ind" value="<%= ind %>">
                <button class="remove-cart-item" type="submit"><i class="fas fa-trash"></i></button>
              </form>
            </li>
            <li>
              <h5><span>Credits:</span><span><%= cartItem.credits %></span></h5>
              <h5><span>Price:</span><span>$<%= cartItem.price %></span></h5>
              <% totalAmount += cartItem.price %>
            </li>
            <li>
              <p><%= cartItem.message %></p>
            </li>
          </ul>
        </li>
        <% }) %>
      </ul>
      <% } else { %>
      <div>
        <p class="theme-p">Add items in cart to Show here!</p>
        <a class="theme-btn" href="/packages">Shop Now</a>
      </div>
      <% } %>
    </div>
    <div class="offcanvas-footer">
      <h3 class="total-amount py-3">
        <span>Total Amount:</span>
        <span>$<%= totalAmount.toFixed(2) %></span>
      </h3>
      <form action="/api/payment/create-payment" method="POST">
        <button class="theme-btn w-100" <%= totalAmount == 0 ? 'disabled' : '' %> type="submit">Purchase</button>
      </form>
    </div>
  </div>
</div>
<div class="copyright">
  <p class="theme-p">Copyright &copy; 2023. All Right Reserved</p>
</div>
<div class="toast-container">
  <% if (message) { %>
  <div class="toast success align-items-center show" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="d-flex">
      <div class="toast-body"><%= message %></div>
      <button type="button" class="close-btn me-2 m-auto" data-bs-dismiss="toast" aria-label="Close">
        <i class="fa-regular fa-xmark"></i>
      </button>
    </div>
  </div>
  <% } %>
  <% if (error) { %>
  <div class="toast error align-items-center show" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="d-flex">
      <div class="toast-body"><%= error %></div>
      <button type="button" class="close-btn me-2 m-auto" data-bs-dismiss="toast" aria-label="Close">
        <i class="fa-regular fa-xmark"></i>
      </button>
    </div>
  </div>
  <% } %>
</div>