{% load static %}
<!DOCTYPE html>
<html>
  <head>
    <title>..:: SLM | {{ nom_page }} ::.. </title>
    <link rel="stylesheet" href="{% static 'css/gestion.css' %}"/>
    <script src="{% static 'js/jquery/jquery.js' %}"></script>
    <script src="{% static 'js/jquery-ui/jquery-ui.js' %}"></script>
    <link rel="stylesheet" href="{% static 'js/jquery-ui/themes/base/all.css' %}"/>
    <link rel="icon" href="{% static 'img/favicon.ico' %}" />
    <script src="{% static 'js/slm.js' %}"></script>
  </head>
  
  <body>
    <div class="page">
      {% block aide %}
      {% if aide %}
      <div id ="aide">
	<button onclick="aide('{{ aide }}')">
	  <img src="{% static '/img/aide.svg' %}" alt="aide" title="Aide contextuelle"/>
	</button>
      </div>
      {% endif %}
      {% endblock %}
      {% block page_header %}
      <div id="page_header">
	<!-- tête de page -->
	<div style="float: right; width: 80px;">
	  <a href="/" target="_new">
	    <img src="{% static "/img/slm.svg" %}" alt="By Berdea, Own work based on: File:Handshake icon.svg, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=18895159" style="width: 100%"/>
	    <span class="version">version {{ version }}</span>
	  </a>
	</div>
	{% if user.is_authenticated %}
	<div style="float: left;">
	   <img src="{% static '/img/logout.svg' %}" alt="logout", title="Se déconnecter" onclick="logout(location.href)" style="cursor: pointer"/>
	  <div style="display: inline-block">
	    Bienvenue, <br/>
	    <button onclick="location.replace('/donnees_utilisateur/')"
		    id="donnees_utilisateur"
		    title="modifier les données personnelles et le mot de passe">
	      {{ user.username }}
	    </button>
	    <script>
	      $("#donnees_utilisateur").on(
		  "click",
		  function(){
		      location.replace("/donnees_utilisateur?next=" + location.href);
		  });
	    </script>
	  </div>
	</div>
	{% endif %}
	<h1>..:: SLM : {{ nom_page }} ::..</h1>
	<div style="clear: both"></div>
	<div id="onglets">
	  <ul class="onglets">
	    {% for o in onglets %}
	    {% if user.is_authenticated or o.pour_tous %}
	    <li id="{{ o.page }}"><a href="#{{ o.page }}" onclick="gotolink(this)">{{ o.title }}</a></li>
	    {% endif %}
	    {% endfor %}
	  </ul>
	</div>
      </div>
      {% endblock %}
      <div id="contents">
	{% if user.is_authenticated or page_pour_tous %}
	{% block contents %}
	<!-- contenu de la page -->
	{% endblock %}
	{% else %}
	<p id="should_login" class="fond-blanc">
	  Le contenu de cette page n'est accessible qu'aux personnes
	  authentifiées,<br/>
	  <a href="/admin/login/">veuillez vous authentifier</a>.
	</p>
	<script>
	  $("#should_login a").attr(
	      {href: "/admin/login/?next=" + location.href,}
	  );
	  $("#should_login").css({
	      position: "absolute",
	      top: Math.max(0, (($("#contents").height() - $("#should_login").outerHeight()) / 2)) + "px",
	      left: Math.max(0, (($("#contents").width() - $("#should_login").outerWidth()) / 2))  + "px",
	  });
	</script>
	{% endif %}
      </div>
      <div id="page_footer">
	{% block page_footer %}
	<!-- pied de page -->
	<span class="mini">
	  SLM est un logiciel libre :
	</span>
	<a href="https://fr.wikipedia.org/wiki/Licence_publique_g%C3%A9n%C3%A9rale_GNU">
	  <img src="{% static '/img/GPLv3_Logo.svg' %}" alt="gpl-v3+" class="mini" title="GPL-V3+">
	</a>
	<span class="mini">
	  ; il est propulsé par :
	</span>
	<a href="https://fr.wikipedia.org/wiki/Django_(framework)">
	  <img src="{% static '/img/logo-django.svg' %}" alt="django" class="mini" title="Django">
	</a>
	<a href="https://fr.wikipedia.org/wiki/Python_(langage)">
	  <img src="{% static '/img/python-logo-generic.svg' %}" alt="python" class="mini" title="Python">
	</a>
	<a href="https://fr.wikipedia.org/wiki/SQLite">
	  <img src="{% static '/img/sqlite370_banner.gif' %}" alt="SQLite3" class="mini" title="SQLite3">
	</a>
	<a href="https://fr.wikipedia.org/wiki/JQuery">
	  <img src="{% static '/img/logo-jquery.png' %}" alt="jquery" class="mini" title="jQuery">
	</a>
	<a href="https://fr.wikipedia.org/wiki/JQuery_UI">
	  <img src="{% static '/img/logo-jquery-ui.png' %}" alt="jquery-ui" class="mini" title="jQuery-UI">
	</a>
	<a href="https://getpelican.com/">
	  <img src="{% static '/img/logo-pelican.svg' %}" alt="pelican" class="mini" title="Pelican">
	</a>
	{% endblock %}
      </div>
    </div>
  </body>
</html>
