<div class="row justify-content-between align-items-center g-4">
  <div class="col-lg-3 col-12">
    <ul class="top-left-btn-wrapper">
      <li>
        <a href="javascript:;" data-bs-toggle="modal" data-bs-target="#sendPair">Send a Pair
          Now</a>
      </li>
      <li>
        <a href="/packages">Purchase Credits</a>
      </li>
    </ul>
    <div class="card-credits">
      <span>Credits</span>
      <strong>You have <%= user.credits %> Credits.</strong>
    </div>
  </div>
  <div class="col-lg-5 col-12">
    <div class="sec-title">
      <h3 class="theme-h3">Hello <span class="account-title"><%= user.firstName %> <%= user.lastName %></span> (not <span class="account-title"><%= user.firstName %></span>? <a href="/api/user/logout">Log
          out</a>)</h3>
      <p class="theme-p">From Your account dashboard you can view your recent items, <a href="javascript:;" data-bs-toggle="modal" data-bs-target="#editPassword">edit your
          password</a> and <a href="javascript:;" data-bs-toggle="modal" data-bs-target="#editAccountDetail">edit account details.</a></p>
    </div>
  </div>
  <div class="col-lg-3 col-12">
    <div class="card-summary">
      <div class="info-item">
        <div class="circular-progress" style="background-image: radial-gradient(closest-side, #f0f2f5 79%, transparent 80% 100%),
            conic-gradient(#1b74e4 <%= cardReceived.length + certificatesReceived.length %>%, #e4e6eb 0);">
        </div>
        <div class="info-data">
          <span class="info-qty"><%= cardReceived.length + certificatesReceived.length %></span>
          <span class="info-type">Total</span>
        </div>
      </div>
      <div class="info-item">
        <div class="circular-progress" style="background-image: radial-gradient(closest-side, #f0f2f5 79%, transparent 80% 100%),
            conic-gradient(#1b74e4 <%= certificatesReceived.length %>%, #e4e6eb 0);">
        </div>
        <div class="info-data">
          <span class="info-qty"><%= certificatesReceived.length %></span>
          <span class="info-type">Certificate Received</span>
        </div>
      </div>
      <div class="info-item">
        <div class="circular-progress" style="background-image: radial-gradient(closest-side, #f0f2f5 79%, transparent 80% 100%),
            conic-gradient(#1b74e4 <%= cardReceived.length %>%, #e4e6eb 0);">
        </div>
        <div class="info-data">
          <span class="info-qty"><%= cardReceived.length %></span>
          <span class="info-type">Card Received</span>
        </div>
      </div>
    </div>
  </div>
</div>