<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title> SERVPORT | VEHICLE SERVICE AUTOMATION  </title>


    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.css">

    <style>

    .row{
        padding: 5px;
    }
    .fa-tint{     
        color: red;    
    }
    .blood{
        float: right;
    }
    .fa-users{     
        color: blue; 
        font-size: 3ex;   
    }
    .fa-spinner{     
        color: blue; 
        font-size: 3ex;   
    }
    .fa-check-circle{     
        color: blue; 
        font-size: 3ex;   
    }
    .xyz{     
        color: blue; 
        font-size: 3ex;   
    }

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  font-family: 'Josefin Sans', sans-serif;
}

body{
   background-color: #f3f5f9;
}
.bg-danger {
    background-color: #747578 !important;

}

.wrapper{
  display: flex;
  position: relative;
}

.wrapper .sidebar{
  width: 200px;
  height: 100%;
  background: #747578;
  padding: 30px 0px;
  position: fixed;
}

.wrapper .sidebar h2{
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 30px;
}

.wrapper .sidebar ul li{
  padding: 15px;
  border-bottom: 1px solid #dedede;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  border-top: 1px solid rgba(255,255,255,0.05);
}    

.wrapper .sidebar ul li a{
  color: #dedede;
  display: block;
}

.wrapper .sidebar ul li a .fas{
  width: 25px;
}

.wrapper .sidebar ul li:hover{
  background-color: #02111f;
}
    
.wrapper .sidebar ul li:hover a{
  color: #fff;
}
 
.wrapper .sidebar .social_media{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.wrapper .sidebar .social_media a{
  display: block;
  width: 40px;
  background: #594f8d;
  height: 40px;
  line-height: 45px;
  text-align: center;
  margin: 0 5px;
  color: #dedede;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.wrapper .main_content{
  width: 100%;
  margin-left: 200px;
}

.wrapper .main_content .header{
  padding: 20px;
  background: #fff;
  color: #717171;
  border-bottom: 1px solid #e0e4e8;
}

.wrapper .main_content .info{
  margin: 20px;
  color: #717171;
  line-height: 25px;
}

.wrapper .main_content .info div{
  margin-bottom: 20px;
}

@media (max-height: 500px){
  .social_media{
    display: none !important;
  }
}
.fa-sign-out-alt{
    color: white;
    font-size: 2ex;
}

    </style>
</head>
<body>

    <nav class="navbar navbar-expand-lg navbar-light fixed-top bg-danger">
        <a style="color:white;" class="navbar-brand" href="#">
            <img src="/static/image/logo.png" width="40" height="40" alt="">
            <font face = "Comic sans MS" size ="5" class="">ServPort </font>
        </a>

        <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" style="color: white;" href="../../../Admin/AdminLogin/">User : Admin | Logout &nbsp; <i class="fa fa-power-off"></i></a>
                </li>
                
            </ul>
        </div>
      </nav>
<br><br>
<div class="wrapper">
    <div class="sidebar">
        
        <ul>
            <li><a style="text-decoration:none;" href="/Admin/AdminHome/"><i class="fas fa-desktop"></i>Home</a></li>
            <li><a style="text-decoration:none;" href="#"><i class="fas fa-car "></i>  Customer Registration    </a>
            <li><a style="text-decoration:none;" href="/Admin/Employee_Efficiency/"><i class="fas fa-barcode"></i> Employee Efficiency  </a>

            <li><a style="text-decoration:none;" href="/Admin/Employee_Data/"><i class="fas fa-paper-plane "></i>  Employee Data    </a>
            <li><a style="text-decoration:none;" href="/Admin/EmployeeStatus_Update/"><i class="fas fa-upload"></i> Assign Employee     </a>
            </li>
            <li><a style="text-decoration:none;" href="/Admin/Forecasting/"><i class="fas fa-bullseye "></i> Demand Forecasting        </a>
            <li><a style="text-decoration:none;" href="#"><i class="fas fa-eye"></i>  Highest Demand      </a>
            <li><a style="text-decoration:none;" href="/Admin/PurchaseHistory/"><i class="fas fa-cubes"></i>  Purchase History    </a>
            <li><a style="text-decoration:none;" href="/Admin/Customer_Data/"><i class="fas fa-user"></i>  Customer Data    </a>
            <li><a style="text-decoration:none;" href="/Admin/Customer_Frequency/"><i class="fas fa-chart-bar"></i>  Customer Frequency   </a>
        </ul> 

    </div>
    <div class="main_content">


{% block content %}

{% endblock content %}



    </div>
</div>

<!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</body>
</html>
