
{% load staticfiles %}
{% load notifications_tags %}
{% notifications_unread as notif_unread_count %}

<!DOCTYPE html>
<html lang="fr">
	<head>
	    <title>{% block title %}Backlog{% endblock %}</title>
	    <meta charset="utf-8" />
	    
	    <link rel="icon" type="image/png" href="{% static 'images/favicon.png' %}" />

		<link rel="stylesheet" type="text/css" href="{% static 'css/templated.css' %}"/>
	    <link rel="stylesheet" type="text/css" href="{% static 'jquery-ui-1.12.1/jquery-ui.css' %}">
	    
		<!-- From Martor plugin -->
		<link href="{% static 'plugins/css/ace.min.css' %}" type="text/css" media="all" rel="stylesheet" />
		<link href="{% static 'plugins/css/semantic.min.css' %}" type="text/css" media="all" rel="stylesheet" />
		<link href="{% static 'plugins/css/resizable.min.css' %}" type="text/css" media="all" rel="stylesheet" />
		<link href="{% static 'martor/css/martor.min.css' %}" type="text/css" media="all" rel="stylesheet" />

		<link rel="stylesheet" type="text/css" href="{% static 'css/custom.css' %}"/>

		<script src="{% static 'js/jquery.min.js' %}"></script>
		<script src="{% static 'js/jquery.scrolly.min.js' %}"></script>
		<script src="{% static 'js/skel.min.js' %}"></script>
		<script src="{% static 'js/util.js' %}"></script>
		<script src="{% static 'js/URI.js' %}"></script>
		<script src="{% static 'js/templated.js' %}"></script>
		<script src="{% static 'jquery-ui-1.12.1/external/jquery/jquery.js' %}"></script>
		<script src="{% static 'jquery-ui-1.12.1/jquery-ui.js' %}"></script>
		<script src="{% static 'jquery-ui-1.12.1/datepicker-fr.js' %}"></script>

		<!-- From Martor plugin -->
		<script type="text/javascript" src="{% static 'plugins/js/ace.js' %}"></script>
		<script type="text/javascript" src="{% static 'plugins/js/semantic.min.js' %}"></script>
		<script type="text/javascript" src="{% static 'plugins/js/mode-markdown.js' %}"></script>
		<script type="text/javascript" src="{% static 'plugins/js/ext-language_tools.js' %}"></script>
		<script type="text/javascript" src="{% static 'plugins/js/theme-github.js' %}"></script>
		<script type="text/javascript" src="{% static 'plugins/js/highlight.min.js' %}"></script>
		<script type="text/javascript" src="{% static 'plugins/js/resizable.min.js' %}"></script>
		<script type="text/javascript" src="{% static 'plugins/js/emojis.min.js' %}"></script>
		<script type="text/javascript" src="{% static 'martor/js/martor.min.js' %}"></script>
		<script type="text/javascript" src="{% static 'js/Chart.bundle.js' %}"></script>
		<script type="text/javascript" src="{% static 'js/common.js' %}"></script>
		<script type="text/javascript" src="{% static 'js/custom.js' %}"></script>
		
	</head>
	
	<body class="wrapper">
		<header id="header">
			<nav class="left">
				<a href="#menu"><span>Menu</span></a>
			</nav>
			
			<a href="{% url 'index' %}" class="logo">Backlog</a>
			
	        <nav class="right">
	        	{% if request.user.is_authenticated %}
	        	    <form id="search-bar" action="{% url 'search' %}" method="get" accept-charset="utf-8">
	        	    	<i class="fa fa-search"></i>
				    	<input name="q" type="text" placeholder="Rechercher...">
				    </form>
	        		
	        		<div id="notif-panel" class="dropdown">
	        			<a href="#" id="notif-show-btn">
	        				<i class="fa fa-bell"></i><span class="notif-count">{{ notif_unread_count }}</span> <i class="fa fa-caret-down" style="margin-left: 0.5em;"></i>
	        			</a>
	        		
						<div id="notif-dropdown" class="dropdown-content">
						
						{% if notif_unread_count > 0 %}
							<ul class="alt notif-list" style="">
							{% for notification in request.user.notifications.unread %}
								<li class="notif" data-id='{{ notification.id }}'>
									<span class="notif-head">
										<i class="flex-extend">Il y a {{ notification.timesince }}</i>
										<a href="" class="notif-seen"><i class="fa fa-times"></i></a>
									</span>
									<span class="notif-content">
										<span>{{ notification.verb|safe }}</span>
									</span>
								</li>
							{% endfor %}
							</ul>
							<div class="notif-footer">
								<a href="" class="notif-all-seen">Tout marquer comme vu</a>
							</div>
						{% else %}
							<div class="notif-footer">
								<i>Aucune notification à afficher</i>
							</div>
						{% endif %}
						</div>
					</div>
	        		
	        		<a class="tool-btn" href="{% url 'story_create' %}" style="margin-right: 1em;" title="Nouvelle Story">
	        			<i class="fa fa-plus" style="color:#4183c4;"></i><span class="hide-on-medium-screen"> Nouvelle Story</span>
	        		</a>
	        		
	        		<a class="tool-btn" href="{% url 'story_index' %}?assignee={{ request.user.id }}" style="margin-right: 1em;" title="Mes Stories">
	        			<i class="fa fa-check-square-o" style="color:#4183c4;"></i><span class="hide-on-medium-screen"> Mes Stories</span>
	        		</a>
	        		
	        		<div id="user-panel" class="dropdown">
	        			<a href="" id="user-show-btn"><i class="fa fa-user"></i><span class="hide-on-medium-screen"> {{ request.user.first_name }} {{ request.user.last_name }}</span> <i class="fa fa-caret-down" style="margin-left: 0.5em;"></i></a>
	        		
						<div id="user-dropdown" class="dropdown-content">
							<a href="{% url 'profile_update' %}">Mise à jour du profil</a>
							<a href="{% url 'change_password' %}">Changer de mot de passe</a>
							<a href="{% url 'logout' %}">Se déconnecter</a>
						</div>
					</div>
	        	{% else %}
	        		<a href="">Se Connecter</a>
	        	{% endif %}
			</nav>
		</header>
		
		<div id="breadcrumb"><ul>{% block breadcrumb %}{% endblock %}</ul></div>
		
	    <!-- Menu -->
		<nav id="menu">
			<ul class="links">
				<li><a href="{% url 'index' %}"><i class="fa fa-home"></i> Accueil</a></li>
				<li><a href="{% url 'story_index' %}"><i class="fa fa-check-square"></i> Stories</a></li>
				<li><a href="{% url 'sprint_end' %}"><i class="fa fa-flag"></i> Cloture de sprint</a></li>
				<li><a href="{% url 'report_projects' %}"><i class="fa fa-map"></i> Suivi de projets</a></li>
				<li><a href="{% url 'report_activity' %}"><i class="fa fa-line-chart"></i> Rapport d'Activité</a></li>
				<li><a href="{% url 'report_sprints' %}"><i class="fa fa-calendar"></i> Suivi des Sprints</a></li>
				<li><a href="{% url 'backlog_editor' %}"><i class="fa fa-pencil-square"></i> Modifier le Backlog</a></li>
				<li><a href="{% url 'admin:index' %}"><i class="fa fa-gear"></i> Administration</a></li>
			</ul>
		</nav>
		
		<section id="main">
			<div class="inner">
			{% block main %}
			
			{% endblock %}
			</div>
		</section>
		
		<!-- 	    
		<footer id="footer">
	    	Manche Numérique, 2018 - <a href="">Contact</a>
    	</footer> 
    	-->
    
	</body>
</html>