{% load static %}
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Propeller Admin Dashboard">
<meta content="width=device-width, initial-scale=1, user-scalable=no" name="viewport">

<title>DigiMED</title>
<meta name="description" content="Admin is a material design and bootstrap based responsive dashboard template created mainly for admin and backend applications."/>

<link rel="shortcut icon" type="image/x-icon" href="{% static 'themes/images/favicon.ico' %}">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{% static 'assets/css/bootstrap.min.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'assets/css/propeller.min.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'components/datetimepicker/css/bootstrap-datetimepicker.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'components/datetimepicker/css/pmd-datetimepicker.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'themes/css/propeller-theme.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'themes/css/propeller-admin.css' %}">

<style>
@import url("https://fonts.googleapis.com/css?family=Open+Sans");
body {
  margin: 0;
  width: 100vw;
  overflow-x: hidden;
  background-color: #f0f0f0;
  font-family: "Open Sans", sans-serif;
  font-size: 14.5px;
  line-height: 1.4em;
  color: #404646;
}

* {
  box-sizing: border-box;
}

.container {
  
  width: 100%;
  margin: auto;
  padding: 1.6em;
  
  -webkit-box-pack: center;
          justify-content: center;
  align-content: start;
  grid-gap: 1.6em;
  grid-template: auto/repeat(auto-fill, minmax(27em, 27em));
}

.card {
  margin: 0;
  height: 15em;
  display: -webkit-box;
  display: flex;
  background-color: white;
  box-shadow: 1px 3px 3px rgba(0, 10, 20, 0.06);
}
.card img {
  
  width: 25%;
 
}

.card-body {
  width: 12em;
  max-height: 100%;
  -webkit-box-flex: 1;
          flex: 1 1 auto;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-flow: column nowrap;
  -webkit-box-pack: start;
          justify-content: flex-start;
  padding: 1.6em;
}
.card-body button {
  min-width: 8.3em;
  -webkit-box-flex: 0;
          flex: none;
  align-self: flex-start;
  margin-top: 5px;
  margin-bottom: auto;
  padding: 0.6em 1.2em;
  font-size: 0.92em;
  color: #404646;
  background: none;
  border: 0.5px solid #777;
  border-radius: 2px;
}
.card-body button:hover {
  border-color: #d099a0;
}

.card-text {
  position: relative;
  -webkit-box-flex: 1;
          flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 0 0.8em 0;
  padding: 0;
}
.card-text h3,
.card-text p {
  margin-top: 0;
}
.card-text:after {
  position: absolute;
  bottom: 0;
  content: "";
  width: 100%;
  height: 2.8em;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(white));
  background: linear-gradient(rgba(255, 255, 255, 0), white);
}

a {
  color: #d07777;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

#btn{
	background-color:#ff1a1a;
}

@media (max-width: 570px) {
  .container {
    grid-template: auto / 1fr;
    padding: 1.0666666667em;
  }

  .card {
    -webkit-box-flex: 1;
            flex: 1 1 auto;
    display: -webkit-box;
    display: flex;
    background-color: white;
    box-shadow: 1px 3px 3px rgba(0, 10, 20, 0.06);
  }
  .card img {
    max-width: 45%;
  }
}

</style>

</head>

<body>
<nav class="navbar navbar-inverse navbar-fixed-top pmd-navbar pmd-z-depth">

	<div class="container-fluid">
		
		<!-- Brand and toggle get grouped for better mobile display -->
		<div class="navbar-header">
			<a href="javascript:void(0);" data-target="basicSidebar" data-placement="left" data-position="slidepush" is-open="true" is-open-width="1200" class="btn btn-sm pmd-btn-fab pmd-btn-flat pmd-ripple-effect pull-left margin-r8 pmd-sidebar-toggle"><i class="material-icons md-light">menu</i></a>	
		  <a href="{% url 'index' %}" class="navbar-brand">DigiMED</a>
		</div>
	</div>

</nav><!--End Nav bar -->
<!-- Header Ends -->

<!-- Sidebar Starts -->
<div class="pmd-sidebar-overlay"></div>

<!-- Left sidebar -->
<aside id="basicSidebar" class="pmd-sidebar  sidebar-default pmd-sidebar-slide-push pmd-sidebar-left pmd-sidebar-open bg-fill-darkblue sidebar-with-icons" role="navigation">
	<ul class="nav pmd-sidebar-nav">
		
		<!-- User info -->
		<li class="dropdown pmd-dropdown pmd-user-info visible-xs visible-md visible-sm visible-lg">
			<a aria-expanded="false" data-toggle="dropdown" class="btn-user dropdown-toggle media" data-sidebar="true" aria-expandedhref="javascript:void(0);">
				<div class="media-left">
					<img src="{% static 'themes/images/user-icon.png' %}" alt="New User">
				</div>
				<div class="media-body media-middle">Welcome {{user.username}}!</div>
				<div class="media-right media-middle"><i class="dic-more-vert dic"></i></div>
			</a>
			<ul class="dropdown-menu">
				<li><a href="{% url 'logout' %}">Logout</a></li>
			</ul>
		</li><!-- End user info -->
		
		<li> 
			<a class="pmd-ripple-effect" href="{% url 'doctorRequest' %}">	
				<i class="media-left media-middle">
				<svg version="1.1" x="0px" y="0px" width="18px" height="12.479px" viewBox="288.64 363.118 18 12.479" enable-background="new 288.64 363.118 18 12.479" xml:space="preserve">
					<g transform="translate(641.29613,1096.2351)">
						<path fill="#C9C8C8" d="M-352.656-726.466v-5.828l4.484,4.484c2.467,2.466,4.499,4.484,4.516,4.484s2.049-2.018,4.516-4.484
							l4.484-4.484v5.828v5.828h-9h-9V-726.466z M-347.854-728.929l-4.188-4.188h8.385h8.386l-4.188,4.188
							c-2.304,2.303-4.192,4.188-4.198,4.188S-345.551-726.626-347.854-728.929z"/>
					</g>
				</svg></i> 
				<span class="media-body">Request Persmission</span>
			</a> 
		</li>
		<li> 
			<a class="pmd-ripple-effect" href="{% url 'logout' %}">	
				<i class="media-left media-middle">
				<svg version="1.1" id="Layer_1" x="0px" y="0px" width="15.3px" height="18px" viewBox="289.99 337.535 15.3 18" enable-background="new 289.99 337.535 15.3 18" xml:space="preserve">
					<g>
						<g>
							<path fill="#C9C8C8" d="M297.64,355.535c0.99,0,1.8-0.81,1.8-1.8h-3.6C295.84,354.725,296.65,355.535,297.64,355.535z
								 M303.49,350.135v-4.95c0-2.79-1.891-5.041-4.501-5.67v-0.63c0-0.72-0.63-1.35-1.35-1.35c-0.72,0-1.35,0.63-1.35,1.35v0.63
								c-2.61,0.629-4.5,2.88-4.5,5.67v4.95l-1.8,1.8v0.9h15.3v-0.9L303.49,350.135z"/>
						</g>
					</g>
				</svg></i> 
				<span class="media-body">Log Out</span>
			</a> 
		</li>
		
	</ul>
</aside><!-- End Left sidebar -->
<!-- Sidebar Ends -->  
	
<!--content area start-->

<div id="content" class="pmd-content content-area dashboard">

	{% if user.is_authenticated and user.userprofile.profile_type == "Doctor" %}

		{% block content %}

		{% endblock %}
	
	{% else %}
  		<p>You are not logged in as a Doctor</p>
  		<a href="{% url 'register' %}">Log In</a>
	{% endif %}
</div>


<script src="{% static 'assets/js/jquery-1.12.2.min.js' %}"></script>
<script src="{% static 'assets/js/bootstrap.min.js' %}"></script>
<script src="{% static 'assets/js/propeller.min.js' %}"></script> 
<script src="{% static 'themes/js/circles.min.js' %}"></script>
<script src="{% static 'themes/js/highcharts.js' %}"></script>
<script src="{% static 'themes/js/highcharts-more.js' %}"></script>
<script type="text/javascript" language="javascript" src="{% static 'components/datetimepicker/js/moment-with-locales.js' %}"></script>
<script type="text/javascript" language="javascript" src="{% static 'components/datetimepicker/js/bootstrap-datetimepicker.js' %}"></script>

<!-- Footer Starts -->
<footer class="admin-footer">
	<div class="container-fluid">
		<ul class="list-unstyled list-inline">
			<li>
			   <span class="pmd-card-subtitle-text">Propeller &copy; <span class="auto-update-year"></span>. All Rights Reserved.</span>
			   <h3 class="pmd-card-subtitle-text">Licensed under <a href="https://opensource.org/licenses/MIT" target="_blank">MIT license.</a></h3>
		   </li>
		   
		   <li class="pull-right for-support">
			   <a href=" {% static 'mailto:support@propeller.in' %} ">
					 <div>
					   <svg x="0px" y="0px" width="38px" height="38px" viewBox="0 0 38 38" enable-background="new 0 0 38 38">
   <g><path fill="#A5A4A4" d="M25.621,21.085c-0.642-0.682-1.483-0.682-2.165,0c-0.521,0.521-1.003,1.002-1.524,1.523
		   c-0.16,0.16-0.24,0.16-0.44,0.08c-0.321-0.2-0.683-0.32-1.003-0.521c-1.483-0.922-2.726-2.125-3.809-3.488
		   c-0.521-0.681-1.002-1.402-1.363-2.205c-0.04-0.16-0.04-0.24,0.08-0.4c0.521-0.481,1.002-1.003,1.524-1.483
		   c0.721-0.722,0.721-1.524,0-2.246c-0.441-0.44-0.842-0.842-1.203-1.202c-0.441-0.441-0.842-0.842-1.243-1.243
		   c-0.642-0.642-1.483-0.642-2.165,0c-0.521,0.521-1.002,1.002-1.524,1.523c-0.481,0.481-0.722,1.043-0.802,1.685
		   c-0.08,1.042,0.16,2.085,0.521,3.047c0.762,2.085,1.925,3.849,3.328,5.532c1.884,2.286,4.17,4.05,6.815,5.333
		   c1.203,0.562,2.406,1.002,3.729,1.123c0.922,0.04,1.724-0.201,2.365-0.923c0.441-0.521,0.923-0.922,1.403-1.403
		   c0.682-0.722,0.682-1.563,0-2.245C27.265,22.729,26.423,21.927,25.621,21.085z"/>
	   <path fill="#A5A4A4" d="M32.437,5.568C28.869,2,24.098-0.005,19.005-0.005S9.182,2,5.573,5.568C2.005,9.177,0,13.908,0,19
		   s1.965,9.823,5.573,13.432c3.568,3.568,8.34,5.573,13.432,5.573s9.823-1.965,13.431-5.573
		   C39.854,25.014,39.854,12.985,32.437,5.568z M30.299,30.294c-3.003,3.045-7.021,4.695-11.293,4.695
		   c-4.272,0-8.291-1.65-11.294-4.695C4.666,27.29,3.016,23.271,3.016,19c0-4.272,1.649-8.291,4.695-11.294
		   c3.003-3.003,7.022-4.695,11.294-4.695c4.272,0,8.291,1.649,11.293,4.695C36.56,13.924,36.56,24.075,30.299,30.294z"/>
   </g></svg>
				   </div>
				   <div>
					 <span class="pmd-card-subtitle-text">For Support</span>
					 <h3 class="pmd-card-title-text">support@digiMED.in</h3>
				   </div>
			   </a>
		   </li>
	   </ul>
	</div>
   </footer>
   <!-- Footer Ends -->
   
   <!-- Scripts Starts -->
   <script src=" {% static 'assets/js/jquery-1.12.2.min.js' %} "></script>
   <script src=" {% static 'assets/js/bootstrap.min.js' %} "></script>
   <script src=" {% static 'assets/js/propeller.min.js' %} "></script>
   <script>
	   $(document).ready(function() {
		   var sPath=window.location.pathname;
		   var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
		   $(".pmd-sidebar-nav").each(function(){
			   $(this).find("a[href=' {% static '"+sPage+"' %} ']").parents(".dropdown").addClass("open");
			   $(this).find("a[href=' {% static '"+sPage+"' %} ']").parents(".dropdown").find('.dropdown-menu').css("display", "block");
			   $(this).find("a[href=' {% static '"+sPage+"' %} ']").parents(".dropdown").find('a.dropdown-toggle').addClass("active");
			   $(this).find("a[href=' {% static '"+sPage+"' %} ']").addClass("active");
		   });
		   $(".auto-update-year").html(new Date().getFullYear());
	   });
   </script> 

</body>
</html>