{% extends 'dashboard/base.html' %}
{% load static %}
{% load customtag %}
{% block title %}{{ title }} - {{ seo_settings.meta_title }}{% endblock title %}
{% block content %}
<style>
  @media screen and (max-width: 1400px) {
    .lghide1 {
      display: none;
    }
  }
  @media screen and (min-width: 1400px) {
    .lghide2 {
      display: none;
    }
  }

  #ww_7b6924a9addc2 {
    background-color: #9E9E9E;
    height: 337px !important;
    background-size: cover;
    background-repeat: no-repeat;
}
.ww-box {
  margin-top: 14% !important;
}

.ww_source {
  display: none !important;
}

#ww_7b6924a9addc2 {
  border-radius: 10px !important;
  background-color: #262932 !important;
}
  

  
</style>
        <div class="page-body">
          <div class="container-fluid">        
            <div class="page-title">
              <div class="row">
                <div class="col-6">
                  <h3>Dashboard</h3>
                </div>
                <div class="col-6">
                  <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="index.html">                                       
                        <svg class="stroke-icon">
                          <use href="{% static 'admin/assets/svg/icon-sprite.svg' %}#stroke-home"></use>
                        </svg></a></li>
                    <li class="breadcrumb-item">Dashboard</li>
                    <li class="breadcrumb-item active">Home</li>
                  </ol>
                </div>
              </div>
            </div>
          </div>
          <!-- Container-fluid starts-->
          <div class="container-fluid">
            <div class="row widget-grid">
              <div class="col-xxl-4 col-sm-6 box-col-6">
                <div class="card profile-box">
                  <div class="card-body">
                    <div class="media">
                      <div class="media-body"> 
                        <div class="greeting-user">
                          <h4 class="f-w-600">Welcome {% if request.user.is_authenticated %}{{request.user.userprofile.name}}{% if request.user.is_verified %}<svg xmlns="http://www.w3.org/2000/svg" class="verify-ico" width="18" height="18" fill="#fff" viewBox="0 0 512 512"><title>ionicons-v5-e</title><path d="M256,48C141.31,48,48,141.31,48,256s93.31,208,208,208,208-93.31,208-208S370.69,48,256,48ZM218,360.38,137.4,270.81l23.79-21.41,56,62.22L350,153.46,374.54,174Z"/></svg>{% endif %} {% else %}there {% endif %}</h4>
                          <p>Here whats happing in your account today</p>                          
                        </div>
                      </div>
                      <div>  
                        <div class="clockbox">
                          <svg id="clock" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
                            <g id="face">
                              <circle class="circle" cx="300" cy="300" r="253.9"></circle>
                              <path class="hour-marks" d="M300.5 94V61M506 300.5h32M300.5 506v33M94 300.5H60M411.3 107.8l7.9-13.8M493 190.2l13-7.4M492.1 411.4l16.5 9.5M411 492.3l8.9 15.3M189 492.3l-9.2 15.9M107.7 411L93 419.5M107.5 189.3l-17.1-9.9M188.1 108.2l-9-15.6"></path>
                              <circle class="mid-circle" cx="300" cy="300" r="16.2"></circle>
                            </g>
                            <g id="hour">
                              <path class="hour-hand" d="M300.5 298V142"></path>
                              <circle class="sizing-box" cx="300" cy="300" r="253.9"></circle>
                            </g>
                            <g id="minute">
                              <path class="minute-hand" d="M300.5 298V67"></path>
                              <circle class="sizing-box" cx="300" cy="300" r="253.9"></circle>
                            </g>
                            <g id="second">
                              <path class="second-hand" d="M300.5 350V55"></path>
                              <circle class="sizing-box" cx="300" cy="300" r="253.9">   </circle>
                            </g>
                          </svg>
                        </div>
                        <div class="badge f-10 p-0" id="txt"></div>
                      </div>
                    </div>
                    <div class="cartoon"><img class="img-fluid" src="{% static 'admin/assets/images/dashboard/cartoon.svg' %}" alt="vector women with leptop"></div>
                  </div>
                </div>
              </div>
              <div class="col-xxl-auto col-xl-3 col-sm-6 box-col-6"> 
                <div class="row"> 
                  <div class="col-xl-12"> 
                    <div class="col-xl-12"> 
                      <div class="card widget-1">
                        <div class="card-body"> 
                          <div class="widget-content">
                            <div class="widget-round primary">
                              <div class="bg-round">
                                <i class="fa fa-laptop" aria-hidden="true"></i>
                                <svg class="half-circle svg-fill">
                                  <use href="{% static 'admin/assets/svg/icon-sprite.svg' %}#halfcircle"></use>
                                </svg>
                              </div>
                            </div>
                            <div> 
                              <h4>{{ services.count }}</h4><span class="f-light">Services</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-xxl-auto col-xl-3 col-sm-6 box-col-6"> 
                <div class="row"> 
                  <div class="col-xl-12"> 
                    <div class="col-xl-12"> 
                      <div class="card widget-1">
                        <div class="card-body"> 
                          <div class="widget-content">
                            <div class="widget-round primary">
                              <div class="bg-round">
                                <i class="fa fa-laptop" aria-hidden="true"></i>
                                <svg class="half-circle svg-fill">
                                  <use href="{% static 'admin/assets/svg/icon-sprite.svg' %}#halfcircle"></use>
                                </svg>
                              </div>
                            </div>
                            <div> 
                              <h4>{{ product.count }}</h4><span class="f-light">Products</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="col-xxl-auto col-xl-3 col-sm-6 box-col-6"> 
                <div class="row"> 
                  <div class="col-xl-12"> 
                    <div class="col-xl-12"> 
                      <div class="card widget-1">
                        <div class="card-body"> 
                          <div class="widget-content">
                            <div class="widget-round warning">
                              <div class="bg-round">
                                <i class="fa fa-pie-chart" aria-hidden="true"></i>
                                <svg class="half-circle svg-fill">
                                  <use href="{% static 'admin/assets/svg/icon-sprite.svg' %}#halfcircle"></use>
                                </svg>
                              </div>
                            </div>
                            <div> 
                              <h4>{{ projects.count }}</h4><span class="f-light">Projects</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              {% if request.user.role == 'Admin' %}
              <div class="col-xxl-auto col-xl-12 col-sm-6 box-col-6">
                <div class="row"> 
                  <div class="col-xxl-12 col-xl-3 box-col-12">
                    <div class="card widget-1 widget-with-chart">
                      <div class="card-body"> 
                        <div class="widget-content">
                          <div class="widget-round warning">
                            <div class="bg-round">
                              <i class="fa fa-user-o" aria-hidden="true"></i>
                              <svg class="half-circle svg-fill">
                                <use href="{% static 'admin/assets/svg/icon-sprite.svg' %}#halfcircle"></use>
                              </svg>
                            </div>
                          </div>
                          <div> 
                            <h4>{{ clients.count }}</h4><span class="f-light">Clients</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  
                  <div class="col-xxl-12 col-xl-3 box-col-12 lghide2">
                    <div class="card widget-1 widget-with-chart">
                      <div class="card-body"> 
                        <div class="widget-content">
                          <div class="widget-round success">
                            <div class="bg-round">
                              <i class="fa fa-file-text-o" aria-hidden="true"></i>
                              <svg class="half-circle svg-fill">
                                <use href="{% static 'admin/assets/svg/icon-sprite.svg' %}#halfcircle"></use>
                              </svg>
                            </div>
                          </div>
                          <div> 
                            <h4>{{ contacts.count }}</h4><span class="f-light">Contacts</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              {% endif %}
            </div>
          </div>
          <!-- Container-fluid Ends-->
        </div>
{% endblock content %}