{% extends 'base.html' %}

{% block content %}

<div class="content container-fluid">
    <div class="page-header">
       <div class="row">
          <div class="col-sm-12">
             <h3 class="page-title">Welcome Programers International !</h3>
             <ul class="breadcrumb">
                <li class="breadcrumb-item active">Dashboard</li>
             </ul>
          </div>
       </div>
    </div>
    <div class="row">
       <div class="col-xl-3 col-sm-6 col-12 d-flex">
          <div class="card bg-one w-100">
             <div class="card-body">
                <div class="db-widgets d-flex justify-content-between align-items-center">
                   <div class="db-icon">
                      <i class="fas fa-user-graduate"></i>
                   </div>
                   <div class="db-info">
                      <h4>0</h4>
                      <h6>Suppliers</h6>
                   </div>
                </div>
             </div>
          </div>
       </div>
       <div class="col-xl-3 col-sm-6 col-12 d-flex">
          <div class="card bg-two w-100">
             <div class="card-body">
                <div class="db-widgets d-flex justify-content-between align-items-center">
                   <div class="db-icon">
                      <i class="fas fa-crown"></i>
                   </div>
                   <div class="db-info">
                      <h4>0</h4>
                      <h6>Customers</h6>
                   </div>
                </div>
             </div>
          </div>
       </div>
       <div class="col-xl-3 col-sm-6 col-12 d-flex">
          <div class="card bg-three w-100">
             <div class="card-body">
                <div class="db-widgets d-flex justify-content-between align-items-center">
                   <div class="db-icon">
                      <i class="fas fa-building"></i>
                   </div>
                   <div class="db-info">
                      <h4>0</h4>
                      <h6>Products</h6>
                   </div>
                </div>
             </div>
          </div>
       </div>
       <div class="col-xl-3 col-sm-6 col-12 d-flex">
          <div class="card bg-four w-100">
             <div class="card-body">
                <div class="db-widgets d-flex justify-content-between align-items-center">
                   <div class="db-icon">
                      <i class="fas fa-file-invoice-dollar"></i>
                   </div>
                   <div class="db-info">
                      <h3>0</h3>
                      <h6>Staffs</h6>
                   </div>
                </div>
             </div>
          </div>
       </div>
    </div>
    
    <div class="row">
       <div class="col-md-6 d-flex">
          <div class="card flex-fill">
             <div class="card-header">
                <h5 class="card-title">Demo Data</h5>
             </div>
             <div class="card-body">
                <div class="table-responsive">
                   <table class="table table-hover table-center">
                      <thead class="thead-light">
                         <tr>
                            <th>Table</th>
                            <th>Table</th>
                            <th class="text-center">Table</th>
                            <th class="text-center">Table</th>
                            <th class="text-right">Table</th>
                         </tr>
                      </thead>
                      <tbody>
                         <tr>
                             <td class="text-nowrap">
                                <div>Nil</div>
                             </td>
                             <td class="text-nowrap">Nil</td>
                             <td class="text-center">Nil</td>
                             <td class="text-center">Nil</td>
                             <td class="text-right">
                                <div>Nil</div>
                             </td>
                          </tr>
                         
                        
                        
                         
                      </tbody>
                   </table>
                </div>
             </div>
          </div>
       </div>
       <div class="col-md-6 d-flex">
          <div class="card flex-fill">
             <div class="card-header">
                <h5 class="card-title">Demo Data</h5>
             </div>
             <div class="card-body">
                <ul class="activity-feed">
                   <li class="feed-item">
                      <div class="feed-date">Nil</div>
                      <span class="feed-text"><a>Nil</a>Nil<a>"Nil"</a></span>
                   </li>
                  
                   
                   
                   
                </ul>
             </div>
          </div>
       </div>
    </div>
    
 </div>

{% endblock %}