{% extends 'LayoutMain.html' %}
{% load static %}

{% block content %}
<div>

  <!-- ======= Header ======= -->


  <!-- ======= Sidebar ======= -->



  <main id="main" class="main">
    {% if messages %}
    <div class="messages">
      {% for message in messages %}
      <div class="alert alert-{{ message.tags }}">{{ message }}</div>
      {% endfor %}
    </div>
    {% endif %}
    <div class="pagetitle">
      <nav>
        <ol class="breadcrumb"></ol>
        <a href="http://"><i class="bi bi-laptop">|</i></a>
        <span><b>Dashboard</b></span>
        </ol>
      </nav>
      <!-- <nav> 
          <li class="breadcrumb-item"><a href="index.html">Home</a></li>
          <li class="breadcrumb-item active">Dashboard</li>     
      </nav> -->
    </div>


    <div class="row">
      <div class="col-md-3">
        <div class="card card-metric">
          <div class="icon"><i class="fas fa-users"></i></div>
          <h6>Usergroup</h6>
          <p>3</p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card card-metric">
          <div class="icon"><i class="far fa-user"></i></div>
          <h6>Users</h6>
          <p>1</p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card card-metric">
          <div class="icon"><i class="far fa-file-alt"></i></div>
          <h6>Pages</h6>
          <p>6</p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card card-metric">
          <div class="icon"><i class="far fa-comments"></i></div>
          <h6>Enquiries</h6>
          <p>37</p>
        </div>
      </div>
      <!-- </div>
          <div class="row mt-3"> -->
      <div class="col-md-3">
        <div class="card card-metric">
          <div class="icon"><i class="fas fa-cogs"></i></div>
          <h6>Services</h6>
          <p>6</p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card card-metric">
          <div class="icon"><i class="fas fa-briefcase"></i></div>
          <h6>Jobs</h6>
          <p>4</p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card card-metric">
          <div class="icon"><i class="far fa-newspaper"></i></div>
          <h6>News</h6>
          <p>1</p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card card-metric">
          <div class="icon"><i class="fas fa-pencil-alt"></i></div>
          <h6>Usergroup</h6>
          <p>0</p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card card-metric">
          <div class="icon"><i class="fas fa-pencil-alt"></i></div>
          <h6>Job Applicants</h6>
          <p>0</p>

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

    <!-- {% with a=1 %}
    <h1>Hello {{ a }}, how are you?</h1>

    {% if a == 1 %}
    <p>Admin Panel</p>
    {% endif %}

    {% endwith %} -->



  </main>

</div>

<script>
  toastr.options = {
    "closeButton": true,
    "progressBar": true,
    "positionClass": "toast-top-right",
    "showDuration": "300",
    "hideDuration": "1000",
    "timeOut": "5000",
    "extendedTimeOut": "1000",
    "showEasing": "swing",
    "hideEasing": "linear",
    "showMethod": "fadeIn",
    "hideMethod": "fadeOut"
  };

  {% if messages %}
  {% for message in messages %}
  toastr.{ { message.tags } } ("{{ message|escapejs }}");
  {% endfor %}
  {% endif %}
</script>



<!-- End Recent Sales -->




<!-- </main> -->
<!-- End #main -->

<!-- ======= Footer ======= -->


<a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i
    class="bi bi-arrow-up-short"></i></a>



</div>
{% endblock %}