<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="{{ LANGUAGE_CODE|default:"en-us" }}"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
    <title>{% block head_title %}DocEngine{% endblock %}</title>
    <meta name="description" content="{% block head_description %}{% endblock %}">
    <meta name="keywords" content="{% block keywords %}{% endblock %}" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {% block bots %}<meta name="robots" content="NONE,NOARCHIVE" />{% endblock %}
    <!-- mobile stuff -->
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
	{# default favicon.ico should simply be placed directly in /htdocs/ folder #}
    <link rel="apple-touch-icon" href="{{STATIC_URL}}img/apple-touch-icon.png">
    <!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
    <link rel="apple-touch-icon-precomposed" href="{{STATIC_URL}}common/img/apple-touch-icon-precomposed.png">
    <!-- For first- and second-generation iPad: -->
    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="{{STATIC_URL}}common/img/apple-touch-icon-57x57-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="{{STATIC_URL}}common/img/apple-touch-icon-72x72-precomposed.png">
    <!-- For iPhone with high-resolution Retina display: -->
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="{{STATIC_URL}}common/img/apple-touch-icon-114x114-precomposed.png">
    <!-- For third-generation iPad with high-resolution Retina display: -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="{{STATIC_URL}}common/img/apple-touch-icon-144x144-precomposed.png">
    <!-- END mobile stuff -->

    <link rel="stylesheet" href="{{STATIC_URL}}common/css/bootstrap.min.css" media="screen">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="{{STATIC_URL}}common/css/base.css">
    <link rel="stylesheet" href="{{STATIC_URL}}css/base.css">
    <style>
    body {padding-top: 70px;}
    </style>
    <script src="{{STATIC_URL}}common/js/jquery.js"></script>
    <script src="{{STATIC_URL}}common/js/moment.js"></script>
    <script src="{{STATIC_URL}}common/js/bootstrap.min.js"></script>
    {% block extrahead %}{% endblock %}
</head>

<body {% block onloadjs %}{% endblock %}>
<!-- Header -->
<div id="top-nav" class="navbar navbar{% block nav_inverse %}-inverse{% endblock %} navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
        <a class="navbar-brand" href="/">{% block brand %}{{client_project}}{% endblock %}</a>
  </div>
  <div class="navbar-collapse collapse navbar-responsive-collapse">
    <ul class="nav navbar-nav pull-right">
      {% block menu %}
      <li><a href="/docs/">Documentation</a></li>
		  {% if user.is_staff %}<li><a href="/dashboard/">Dashboard</a></li>{% endif %}
	  <li><a href="/about/">About</a></li>
      {% endblock %}
	  {% if user.username %}
	  <li class="btn-group"><a class="btn dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span> <strong>{% firstof user.get_full_name user.email %}</strong> <span class="caret"></span></a>
	  <ul class="dropdown-menu" role="menu">
		  {% block loggedin_options %}{% endblock%}
		  {% if HAS_PROFILE %}<li><a href="{% url 'accounts_profile' %}">My profile</a></li>{% endif %}
		  <li><a href='/accounts/change_password/'>Change Password</a></li>
		  <li><a href='{% url 'accounts_logout' %}'>Logout</a></li>
	  </ul>
	  </li>
	  {% else %}
		  <li><a href="{% url 'accounts_login'%}">Login</a></li>
	  {% endif %}
    </ul>
  </div>
  </div>
</div>
<div id="alert_placeholder" style="position: fixed; top: 40px; margin: 0 40%; z-index: 1600"></div>
<!-- /Header -->

<div class="container-fluid">
<!--[if lt IE 7]>
	<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
	<!-- Header -->
{% block outer_content %}
	<div class="page-header">
		<h1>{% block title %}{% endblock %}<small> {% block tagline %}{% endblock %}</small></h1>
		{% block about %}{% endblock %}
	</div>
	<ul class="breadcrumb {% block breadclass %}hidden-xs{% endblock %}">{% block breadcrumb %}{% endblock %}</ul>
	<!-- END Header -->
	<div class="row" id="main">
		<div class="col-md-9"><div id="messages"></div>
      {% if messages %}
          {% for message in messages %}
        <div class="alert{% if message.tags %} {{ message.tags|lower }}{% endif %}">{{ message }}</div>
          {% endfor %}
      {% endif %}
			{% block content %}{%endblock%}</div>
		<div class="col-md-3 sidebar-nav">{% block sidebar %}{%endblock%}</div>
	</div>
{% endblock %}
</div>
<div id="footer"> 
    <div class="container">
		<p class="muted credit pull-right">{% block footer %}powered by &nbsp; <a href="http://www.reportlab.com/" target="_blank" class="reportlab"> Rep<span>o</span>rtLab</a>{% endblock %}</p>
    </div>
</div>
{% block extrajs %}{% endblock %}
{% block analytics %}
	{% if analytics_key %}
<script>
$(document).ready(function(){
  	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
		(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
	  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
	})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

	ga('create', '{{ analytics_key }}', 'auto');
	ga('send', 'pageview');
});
</script>
	{% endif %}
{% endblock %}
</body>
</html>
