{% load static %}
{% load i18n %}
<!DOCTYPE html>
<html>
 <head>
  <title>
   {% translate "..:: SLM |" %} {{ nom_page }} {% translate "::.." %}
  </title>
  <link href="{% static 'css/gestion.css' %}" rel="stylesheet"/>
  <script src="{% static 'js/jquery/jquery.js' %}">
  </script>
  <script src="{% static 'js/jquery-ui/jquery-ui.js' %}">
  </script>
  <link href="{% static 'js/jquery-ui/themes/base/all.css' %}" rel="stylesheet"/>
  <link href="{% static 'img/favicon.ico' %}" rel="icon"/>
  <script src="/jsi18n">
  </script>
  <script src="{% static 'js/slm.js' %}">
  </script>
 </head>
 <body>
  <div class="page">
   {% block aide %}
      {% if aide %}
   <div id="aide">
    <button onclick="aide('{{ aide }}','{{ lalangue }}')">
     <img alt="aide" src="{% static '/img/aide.svg' %}" title="{% translate '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 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" src="{% static 'img/slm.svg' %}" style="width: 100%"/>
      <span class="version">
       {% translate "version" %} {{ version }}
      </span>
     </a>
    </div>
    <div id="langs" style="float: right; width: 80px; margin: 0 50px;">
      languages
    </div>
    <script>$("#langs").ready(function(){init_langs();})</script>
    {% if user.is_authenticated %}
    <div style="float: left;">
     <img ,="" alt="logout" onclick="logout(location.href)" src="{% static '/img/logout.svg' %}" style="cursor: pointer" title="{% translate 'Se déconnecter' %}"/>
     <div style="display: inline-block">
      {% translate "Bienvenue" %}
      <br/>
      <button id="donnees_utilisateur" onclick="location.replace('/donnees_utilisateur/')" title="{% translate '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>
     {% translate "..:: SLM :" %} {{ nom_page }}{% translate " ::.." %}
    </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 class="fond-blanc" id="should_login">
     {% translate "Le contenu de cette page n'est accessible qu'aux personnes authentifiées," %}
     <br/>
     <a href="/admin/login/">
      {% translate "veuillez vous authentifier" %}
     </a>
     {% translate "." %}
    </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">
     {% translate "SLM est un logiciel libre :" %}
    </span>
    <a href="https://fr.wikipedia.org/wiki/Licence_publique_g%C3%A9n%C3%A9rale_GNU">
     <img alt="gpl-v3+" class="mini" src="{% static '/img/GPLv3_Logo.svg' %}" title="{% translate 'GPL-V3+' %}"/>
    </a>
    <span class="mini">
     {% translate "; il est propulsé par :" %}
    </span>
    <a href="https://fr.wikipedia.org/wiki/Django_(framework)">
     <img alt="django" class="mini" src="{% static '/img/logo-django.svg' %}" title="{% translate 'Django' %}"/>
    </a>
    <a href="https://fr.wikipedia.org/wiki/Python_(langage)">
     <img alt="python" class="mini" src="{% static '/img/python-logo-generic.svg' %}" title="{% translate 'Python' %}"/>
    </a>
    <a href="https://fr.wikipedia.org/wiki/SQLite">
     <img alt="SQLite3" class="mini" src="{% static '/img/sqlite370_banner.gif' %}" title="{% translate 'SQLite3' %}"/>
    </a>
    <a href="https://fr.wikipedia.org/wiki/JQuery">
     <img alt="jquery" class="mini" src="{% static '/img/logo-jquery.png' %}" title="{% translate 'jQuery' %}"/>
    </a>
    <a href="https://fr.wikipedia.org/wiki/JQuery_UI">
     <img alt="jquery-ui" class="mini" src="{% static '/img/logo-jquery-ui.png' %}" title="{% translate 'jQuery-UI' %}"/>
    </a>
    <a href="https://getpelican.com/">
     <img alt="pelican" class="mini" src="{% static '/img/logo-pelican.svg' %}" title="{% translate 'Pelican' %}"/>
    </a>
    {% endblock %}
   </div>
  </div>
 </body>
</html>

