<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>
    Dashboard
  </title>

  {% include 'admin/includes/imports.top.html' %}
</head>

<body class="g-sidenav-show  bg-gray-100">
  {% include 'admin/includes/part.menu.html' %}
  <main class="main-content position-relative max-height-vh-100 h-100 border-radius-lg ">
    <!-- Navbar -->
    {% include 'admin/includes/part.header.html' %}
    <!-- End Navbar -->
    <div class="container-fluid py-4" style="overflow: visible !important;">
      <div class="row g-3">
        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
          <div class="card">
            <div class="card-body p-3">
              <div class="row">
                <div class="col-8">
                  <div class="numbers">
                    <p class="text-sm mb-0 text-capitalize font-weight-bold">Total Listings</p>
                    <h5 class="font-weight-bolder mb-0">
                      {{"{:,.0f}".format(total_listings)}}
                    </h5>
                  </div>
                </div>
                <div class="col-4 text-end">
                  <a href="{{url_for('all_listing')}}" class="icon icon-shape bg-primary shadow text-center border-radius-md">
                    <i class="ni ni-money-coins text-lg opacity-10" aria-hidden="true"></i>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
          <div class="card">
            <div class="card-body p-3">
              <div class="row">
                <div class="col-8">
                  <div class="numbers">
                    <p class="text-sm mb-0 text-capitalize font-weight-bold">Vehicle Requests</p>
                    <h5 class="font-weight-bolder mb-0">
                      {{"{:,.0f}".format(listing_requests)}}
                    </h5>
                  </div>
                </div>
                <div class="col-4 text-end">
                  <a href="{{url_for('admin_requests')}}" class="icon icon-shape bg-primary shadow text-center border-radius-md">
                    <i class="ni ni-world text-lg opacity-10" aria-hidden="true"></i>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        {% if current_user.admin %}
        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
          <div class="card">
            <div class="card-body p-3">
              <div class="row">
                <div class="col-8">
                  <div class="numbers">
                    <p class="text-sm mb-0 text-capitalize font-weight-bold">Departments</p>
                    <h5 class="font-weight-bolder mb-0">
                      {{"{:,.0f}".format(department)}}
                    </h5>
                  </div>
                </div>
                <div class="col-4 text-end">
                  <a href="{{url_for('admin_departments')}}" class="icon icon-shape bg-primary shadow text-center border-radius-md">
                    <i class="ni ni-building text-lg opacity-10" aria-hidden="true"></i>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        {% endif %}
        {% if current_user.admin %}
        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
          <div class="card">
            <div class="card-body p-3">
              <div class="row">
                <div class="col-8">
                  <div class="numbers">
                    <p class="text-sm mb-0 text-capitalize font-weight-bold">Staff</p>
                    <h5 class="font-weight-bolder mb-0">
                     {{"{:,.0f}".format(staff)}}
                    </h5>
                  </div>
                </div>
                <div class="col-4 text-end">
                  <a href="{{url_for('admin_staff')}}" class="icon icon-shape bg-primary shadow text-center border-radius-md">
                    <i class="ni ni-single-copy-04 text-lg opacity-10" aria-hidden="true"></i>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        {% endif %}
        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
          <div class="card">
            <div class="card-body p-3">
              <div class="row">
                <div class="col-8">
                  <div class="numbers">
                    <p class="text-sm mb-0 text-capitalize font-weight-bold">Sold Vehicles</p>
                    <h5 class="font-weight-bolder mb-0">
                     {{"{:,.0f}".format(total_sold)}}
                    </h5>
                  </div>
                </div>
                <div class="col-4 text-end">
                  <div class="icon icon-shape bg-primary shadow text-center border-radius-md">
                    <i class="ni ni-credit-card text-lg opacity-10" aria-hidden="true"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
          <div class="card">
            <div class="card-body p-3">
              <div class="row">
                <div class="col-8">
                  <div class="numbers">
                    <p class="text-sm mb-0 text-capitalize font-weight-bold">Blog Articles</p>
                    <h5 class="font-weight-bolder mb-0">
                      {{"{:,.0f}".format(blog)}}
                    </h5>
                  </div>
                </div>
                <div class="col-4 text-end">
                  <a href="{{url_for('admin_news')}}" class="icon icon-shape bg-primary shadow text-center border-radius-md">
                    <i class="ni ni-paper-diploma text-lg opacity-10" aria-hidden="true"></i>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        
      </div>
      {% include 'admin/includes/part.footer.html' %}
    </div>
  </main>
</body>
{% include 'admin/includes/imports.bottom.html' %}
<script>
  var win = navigator.platform.indexOf('Win') > -1;
  if (win && document.querySelector('#sidenav-scrollbar')) {
    var options = {
      damping: '0.5'
    }
    Scrollbar.init(document.querySelector('#sidenav-scrollbar'), options);
  }
</script>

</html>