<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}{% endblock %}</title>
<link rel="shortcut icon" type="image/x-icon" href="{% nav public %}logopwp.png"/>
<!-- Bootstrap -->
<link href="{% nav public %}css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="{% nav public %}css/bootstrap-datetimepicker.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
{% block style %}{% endblock %}
<style media="screen" type="text/css">
    html,body{
        margin:0;
        padding:0;
        height:100%;
		background:#E9EAED;
    }
	#header{
		height:40px;
	}
	#menu{
		position:fixed;
		width:100%;
		z-index:9;
	}
    #container {
        min-height:100%;
        position:relative;
		background:#FFF;
    }
    #content{
        padding:10px;
    }
    #footer {
        position:absolute;
        bottom:0px;
        width:100%;
    }
    #conpage{padding-left:0px;padding-right:0px;}
	.navbar-default {
		background-color: #3A5897;
		border:none;
		border-radius:0px;
	}
	.navbar-default .navbar-toggle .icon-bar {
		background-color: #FFF;
	}
	.navbar-default .navbar-nav > li > a {
		color: #FFF;
	}
	.navbar-default .navbar-brand {
		color: #FFF;
	}
	.navbar-default .navbar-brand:hover{
		color: #FFF;
	}


	.navbar-default .navbar-nav > li > a:hover{
		color: #FFF;
		background-color:#354A78;
	}
	.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
		color: #FFF;
		background-color:#354A78;
	}
	.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
		color: #FFF;
		background-color:#354A78;
	}
	@media (max-width: 767px){
		.navbar-default .navbar-nav .open .dropdown-menu>li>a {
			 color: #fff;
		}
		.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover, .navbar-default .navbar-nav .open .dropdown-menu>li>a:focus {
			 color: #fff;
			 background-color: #576C9A;
		}
		html,body{
			background:#fff;
		}
	}
</style>
</head>
<body>
<div id="menu">
	<nav class="navbar navbar-default">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
					<ul class="nav navbar-nav">
						<li><a href="{% nav poli_home %}" style="float:left;width:40px;margin-left:15px;"><i class="fas fa-home"></i></a></li>
						<li class="dropdown">
							<label class="navbar-brand" style="margin-left:0px;height:40px;">
								{{ session.user.username }}</label>
						</li>
					</ul>
			</div>
			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				<ul class="nav navbar-nav navbar-right">
					<li class="dropdown ">
						<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
								Pasien <span class="caret"></span>
							</a>
						<ul class="dropdown-menu" role="menu">
							<li><a href="{% nav poli_kunjungan %}">Kunjungan</a></li>
						</ul>
					</li>
					<li class="dropdown">
						<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
							<i class="fas fa-user"></i><span class="caret"></span>
						</a>
						<ul class="dropdown-menu" role="menu">
							<li><a href="#">Ganti Password</a></li>
							<li><div class="g-signin2" data-onsuccess="onSignIn" style="display:none;"></div><a href="{% nav user_logout %}">Keluar</a></li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</nav>
</div>
<div id="container" class="container">
    <div id="header" class="row">
        <div class="col-sm-1"></div>
        <div class="col-sm-10">
                    </div>
        <div class="col-sm-1"></div>
    </div>
    
    <div id="menu" class="row">
        <div class="col-sm-1"></div>
        <div class="col-sm-10">
        </div>
        <div class="col-sm-1"></div>
    </div>
    
    <div id="content" class="row">
        <div class="col-sm-1"></div>
        <div class="col-sm-10" id="conpage">
			<div id="info" style="position:fixed;top:70px;right:0;width:200px;z-index:999;display:none;">
				<div class='alert alert-success' role='alert' style='width:100%;text-align:center;'>{{msg}}</div>
			</div>
			{% block content %}
				{% block subcontent %}{% endblock %}
			{% endblock %}
		</div>
        <div class="col-sm-1"></div>
    </div>
    
    <div id="footer" class="row">
        <div class="col-sm-1"></div>
        <div class="col-sm-10">
            <hr><label class="pull-right" style="color:#777;">Rumah Sehat At-Ta'awun &copy; 2019</label>        </div>
        <div class="col-sm-1"></div>
    </div>
</div>
</body>
</html>
<script>
    var hFooter= document.getElementById('footer').clientHeight;
    //var hFooter= document.getElementById('footer').offsetHeight;
    document.getElementById('content').style.paddingBottom = hFooter+"px";
</script>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="{% nav public %}js/jquery-1.8.3.min.js" type="text/javascript"></script>

<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="{% nav public %}js/bootstrap/bootstrap.min.js"></script>
<!-- date time picker -->
<script src="{% nav public %}js/bootstrap/moment-with-locales.js"></script>
<script src="{% nav public %}js/bootstrap/bootstrap-datetimepicker.js"></script>
<script>
$(document).ready(function () {
	if ("{{msg}}" != "") {
		$("#info").show();
		setTimeout("$('#info').fadeOut(); ", 3000);
	}
});
</script>
{% block script %}
{% endblock %}