<%- include('includes/header', {username: admin[0].name,email: admin[0].email } ) %>

  <div class="body-wrapper">
    <div class="container-fluid">
      <div class="card bg-info-subtle shadow-none position-relative overflow-hidden mb-4">
        <div class="card-body px-4 py-3">
          <div class="row align-items-center">
            <div class="col-md-8 col-sm-7">
              <h4 class="fw-semibold mb-1">Login History</h4>

            </div>


          </div>

        </div>
      </div>

      <div class="d-flex align-items-center justify-content-between mt-4 mb-4">

        <!-- Successful Payment -->
        <a class="card shadow-sm rounded-3 p-3 flex-fill me-3 text-decoration-none text-dark">
          <div class="d-flex align-items-center justify-content-between">
            <div class="bg-success-subtle p-3 rounded me-3">
              <i class="fa-solid fa-users text-success fs-4"></i>
            </div>
            <div class="flex-grow-1">
              <div class="fw-bold">
                <%=totalUsers%>
              </div>
              <div class="small text-muted">Total User</div>
            </div>
          </div>
        </a>

        <a class="card shadow-sm rounded-3 p-3 flex-fill me-3 text-decoration-none text-dark">
          <div class="d-flex align-items-center justify-content-between">
            <div class="bg-warning-subtle p-3 rounded me-3">
              <i class="bi bi-android2 text-warning fs-6"></i>
            </div>
            <div class="flex-grow-1">
              <div class="fw-bold">
                <%=osCounts.Android%>
              </div>
              <div class="small text-muted">Mobile</div>
            </div>
          </div>
        </a>

        <a class="card shadow-sm rounded-3 p-3 flex-fill me-3 text-decoration-none text-dark">
          <div class="d-flex align-items-center justify-content-between">
            <div class="bg-danger-subtle p-3 rounded me-3">
              <i class="bi bi-windows text-danger"></i>
              </i>
            </div>
            <div class="flex-grow-1">
              <div class="fw-bold">
                <%=osCounts.Windows%>
              </div>
              <div class="small text-muted">Windows</div>
            </div>
          </div>
        </a>

        <a class="card shadow-sm rounded-3 p-3 flex-fill text-decoration-none text-dark">
          <div class="d-flex align-items-center justify-content-between">
            <div class="bg-primary-subtle p-3 rounded me-3">
              <i class="bi bi-recycle text-primary fs-6"></i>
            </div>
            <div class="flex-grow-1">
              <div class="fw-bold">
                <%=osCounts.Other%>
              </div>
              <div class="small text-muted">Other</div>
            </div>
          </div>
        </a>

      </div>

      <div class="datatables">


        <div class="card">
          <div class="card-body">
            <div class="table-responsive">
              <table id="zero_config" class="table table-striped table-bordered">
                <thead>
                  <tr>
                    <th>User</th>
                    <th> Email</th>
                    <th>IP</th>
                    <th>Location</th>
                    <th>Browser</th>
                    <th>OS</th>
                    <th>Login At</th>
                  </tr>
                </thead>
                <tbody></tbody>
              </table>

            </div>
          </div>
        </div>


      </div>



    </div>
  </div>
  </div>

  <%- include('includes/allscripts') %>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>

    <script src="/js/view/loginhistory.js"></script>