{% load i18n %}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="{{ site_base }}{{ STATIC_URL }}css/style.css">
    <link rel="shortcut icon" href="{{ site_base }}{{ STATIC_URL }}img/favicon.ico" />
    {% if theme_color %}
    <meta name="theme-color" content="{{theme_color}}">
    <meta name="msapplication-navbutton-color" content="{{theme_color}}">
    {% endif %}
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="{{ site_base }}{{ STATIC_URL }}css/font-awesome.css" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="{{ site_base }}{{ STATIC_URL }}css/bootstrap.min.css">
        <link rel="stylesheet" href="{{ site_base }}{{ STATIC_URL }}css/bootstrap-theme.css">
        <link rel="stylesheet" href="{{ site_base }}{{ STATIC_URL }}css/slick.css">
        <link rel="stylesheet" href="{{ site_base }}{{ STATIC_URL }}css/app.css">
        <link rel="stylesheet" href="{{ site_base }}{{ STATIC_URL }}css/hack.css">
        <link rel="stylesheet" href="{{ site_base }}{{ STATIC_URL }}css/entrouvert.css" >
        <link rel="stylesheet" href="{{ site_base }}{{ STATIC_URL }}css/surclass.css">
        <link rel="stylesheet" href="{{ site_base }}{{ STATIC_URL }}css/more.css">
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    <title>{% block title %}Compte Citoyen{% endblock %}</title>
    {{ openid_meta }}
    {% block extra_scripts %}
    {% endblock %}
   
</head>

<body {% block bodyargs %}class="{% block bodyclasses %}{% endblock %}" {% block bodyattrs %}{% endblock %}{% endblock %} style="background: url({{ site_base }}{{ STATIC_URL }}img/background-cours-Marigny.jpg) no-repeat;background-size: 100% auto; background-position: center top;">
  <div class="body">
    <div id="wrap" class="container">
   
     {% include "header.html" %}
                           
    <div class="row">     
    <div id="main-content-wrapper">
         <div id="single-title">Portail citoyen</div>
       
        <!-- colonne gauche -->
<div id="nav">
	<div class="col-sm-16">
		<div class="box box-full account-panel panel panel-default">
			<div class="panel-heading" id="toplinks">
				<span class="logged-in">
					<h4 class="panel-title user fullname">
						{% block user-name %}{% endblock %}
					</h4>
				</span>
			</div>
			<div class="panel-body">
				<ul>
					{% block left-menu-links %}
					{% endblock %}
				</ul>
			</div>
		</div>
	</div>

	<div class="col-sm-16">
		<div class="box box-full nav-panel panel panel-default">
			<div class="panel-heading">
				<h4 class="panel-title">
					Vos démarches
				</h4>
			</div>
			<div class="panel-body">
				<ul>
                    {% for item in services %}
                         <li><a href="{{ item.link }}">{{ item.title }}</a></li>
                         {% if item.sub_items %}
                             <ul>
                             {% for subitem in item.sub_items %}
                                <li><a href="{{ subitem.link }}">{{ subitem.title }}</a></li>
                             {% endfor %}
                             </ul>
                         {% endif %}
                     {% endfor %}
				</ul>
			</div>
		</div>
	</div>
	<div id="access" class="col-sm-5 col-md-16">
<div class="access panel-group" id="access-menu">
    <div class="box box-full access--directs panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#access-menu" href="#access-toggle">Accès directs<i class="fa fa-caret-square-o-down"></i></a></h4>
        </div>
        <div id="access-toggle" class="panel-collapse collapse in">
            <div class="panel-body">
                <ul>
                    {% for item in acces_directs %}
                     <li><a href="{{ item.link }}">{{ item.title }}</a></li>
                     {% if item.sub_items %}
                         <ul>
                         {% for subitem in item.sub_items %}
                            <li><a href="{{ subitem.link }}">{{ subitem.title }}</a></li>
                         {% endfor %} 
                         </ul>
                     {% endif %}
                     {% endfor %}
                </ul>
            </div>
        </div>
    </div>
    <div class="box box-full access--kiosque panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#access-menu" href="#kiosque-toggle">Kiosque<i class="fa fa-caret-square-o-down"></i></a></h4>
        </div>
        <div id="kiosque-toggle" class="panel-collapse collapse">
            <div class="panel-body">
                <ul>
                    {% for item in kiosque %}
                     <li><a href="{{ item.link }}">{{ item.title }}</a></li>
                     {% if item.sub_items %}
                         <ul>
                         {% for subitem in item.sub_items %}
                            <li><a href="{{ subitem.link }}">{{ subitem.title }}</a></li>
                         {% endfor %}
                         </ul>
                     {% endif %}
                     {% endfor %}
                </ul>
            </div>
        </div>
    </div>
    <div class="box box-full access--projects panel panel-default">
        <div class="panel-heading" id="projets">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#access-menu" href="#projects-toggle">Grands projets<i class="fa fa-caret-square-o-down"></i></a></h4>
        </div>
        <div id="projects-toggle" class="panel-collapse collapse">
            <div class="panel-body">
                <ul>
                    {% for item in grand_projets %}
                     <li><a href="{{ item.link }}">{{ item.title }}</a></li>
                     {% if item.sub_items %}
                         <ul>
                         {% for subitem in item.sub_items %}
                            <li><a href="{{ subitem.link }}">{{ subitem.title }}</a></li>
                         {% endfor %}
                         </ul>
                     {% endif %}
                     {% endfor %}
                </ul>
            </div>
        </div>
    </div>
</div>
	</div>
</div>


        <!-- fin colonne gauche -->
       

         <div id="main-content">
            <div id="content" class="large">
                <div id="real-content">
                    {% block messages %}
                      {% if messages %}
                      <ul class="messages">
                          {% for message in messages %}
                          <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
                          {% endfor %}
                      </ul>
                      {% endif %}
                    {% endblock %}
                    
                    {% block content %}{% endblock %}
                    
                </div><!-- real content -->
             </div> <!-- content -->
        </div> <!-- main content -->
        <!-- right colonne -->
        <div id="col-right" class="col-md-3 hidden-xs hidden-sm">
          <div class="row">
          {% block right-column %}
          {% endblock %}
          {% include "right-col.html" %}
          </div>
        </div>
    </div> <!-- #main-content-wrapper -->
 </div></div>
 <div id="footer" class="footer hidden-print">
    {% include "footer.html" %}   
 </div></div>
    <script src="{{ site_base }}{{ STATIC_URL }}js/jquery.stellar.min.js" ></script>
    <script src="{{ site_base }}{{ STATIC_URL }}js/bootstrap.min.js" ></script>
    <script src="{{ site_base }}{{ STATIC_URL }}js/app.js" ></script>
    <script src="{{ site_base }}{{ STATIC_URL }}js/combo.back.js" ></script>

<script>
gaProperty = '';

// Désactive le tracking si le cookie d’Opt-out existe déjà.
var disableStr = 'ga-disable-' + gaProperty;
if (document.cookie.indexOf('hasConsent=false') > -1) {window[disableStr] = true;}
//Cette fonction retourne la date d’expiration du cookie de consentement
function getCookieExpireDate() {
 var cookieTimeout = 34214400000;// Le nombre de millisecondes que font 13 mois
 var date = new Date();
date.setTime(date.getTime()+cookieTimeout);
var expires = "; expires="+date.toGMTString();
return expires;
}
// Cette fonction est appelée pour afficher la demande de consentement
function askConsent(){
    var bodytag = document.getElementsByTagName('body')[0];
    var div = document.createElement('div');
    div.setAttribute('id','cookie-banner');
    div.setAttribute('width','70%');
    // Le code HTML de la demande de consentement. Vous pouvez modifier le contenu ainsi que le style
    div.innerHTML =  '<div style="border-color:#f8c253;border-bottom:1px solid #ccc;background:#fefbc0;color:#C09853;padding:5px 0px 5px;font-size:13px;text-align:center">En poursuivant votre navigation sur ce site, vous acceptez l’utilisation de cookies à des fins de mesure d\'audience. <a href="javascript:closeMessage()">Accepter le suivi</a> / <a href="javascript:gaOptout()">M\'opposer au suivi</a> <button type="button" style="float: right;font-size: 21px;font-weight: 700;line-height: 1;color: #000;text-shadow: 0 1px 0 #fff;opacity: .2;filter: alpha(opacity=20);padding: 0;cursor: pointer;background: 0;border: 0;-webkit-appearance: none;top: -2px;right: 10px;position: relative;" onclick="javascript:closeMessage()" title="Utiliser ce bouton signifie acceptation du suivi">×</button></div>';
    //.
    //<a href="javascript:gaOptout()">
    // Ajoute la bannière juste au début de la page
    bodytag.insertBefore(div,bodytag.firstChild);
    document.getElementsByTagName('body')[0].className+=' cookiebanner';
}

function closeMessage(){
  var div = document.getElementById('cookie-banner');
  /* closing the message is accepting */
  document.cookie = 'hasConsent=true; '+ getCookieExpireDate() +' ; path=/';
  div.style.display = 'none';
}


// Retourne la chaine de caractère correspondant à nom=valeur
function getCookie(NomDuCookie)  {
    if (document.cookie.length > 0) {
        begin = document.cookie.indexOf(NomDuCookie+"=");
        if (begin != -1)  {
            begin += NomDuCookie.length+1;
            end = document.cookie.indexOf(";", begin);
            if (end == -1) end = document.cookie.length;
            return unescape(document.cookie.substring(begin, end));
        }
     }
    return null;
}
// Fonction d'effacement des cookies
function delCookie(name )   {
    path = ";path=" + "/";
    domain = ";domain=" + "."+document.location.hostname;
    var expiration = "Thu, 01-Jan-1970 00:00:01 GMT";
    document.cookie = name + "=" + path + domain + ";expires=" + expiration;
}
// Efface tous les types de cookies utilisés par Google Analytics
function deleteAnalyticsCookies() {
    var cookieNames = ["__utma","__utmb","__utmc","__utmz","_ga"]
    for (var i=0; i<cookieNames.length; i++)
        delCookie(cookieNames[i])
}
// La fonction d'opt-out
function gaOptout() {
    document.cookie = disableStr + '=true;'+ getCookieExpireDate() +' ; path=/';
    document.cookie = 'hasConsent=false;'+ getCookieExpireDate() +' ; path=/';
    var div = document.getElementById('cookie-banner');
    // Ci dessous le code de la bannière affichée une fois que l'utilisateur s'est opposé au dépôt
    // Vous pouvez modifier le contenu et le style
    if ( div!= null ) div.innerHTML = '<div id="cookie-refusal" style="border-color:#f8c253;border-bottom:1px solid #ccc;background:#fefbc0;color:#C09853;padding:5px 0px 5px;font-size:13px;text-align:center"> Vous vous êtes opposé \
    au dépôt de cookies de mesures d\'audience dans votre navigateur. </div>'
    window.setTimeout(function() { document.getElementById('cookie-refusal').style.display = 'none'; return true; }, 5000);
    window[disableStr] = true;
    deleteAnalyticsCookies();
}
//Ce bout de code vérifie que le consentement n'a pas déjà été obtenu avant d'afficher la baniére
var consentCookie =  getCookie('hasConsent');
if (!consentCookie) {//L'utilisateur n'a pas encore de cookie de consentement
 var referrer_host = document.referrer.split('/')[2];

   if ( referrer_host != document.location.hostname ) { //si il vient d'un autre site
   //on désactive le tracking et on affiche la demande de consentement
     window[disableStr] = true;
     window.onload = askConsent;
   } else { //sinon on lui dépose un cookie
      document.cookie = 'hasConsent=true; '+ getCookieExpireDate() +' ; path=/';
   }
}
</script>

<!-- Piwik and Google Tag Manager -->
<script type="text/javascript">
if (consentCookie) {
  var _paq = _paq || [];
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="//piwik.entrouvert.org/";
    _paq.push(['setTrackerUrl', u+'piwik.php']);
    _paq.push(['setSiteId', 3]);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
  })();

  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-5VBK28');

}
</script>
<!-- End Piwik and Google Tag Manager Code -->

</body>

</html>
