{% extends "base.html" %}
{% load i18n %}

{% block title %}
{% trans "Log in" %}
{% endblock %}

{% block content %}
<ol class="box-breadcrumb breadcrumb">
    <li><a href="{{wcs_url}}">Démarches en ligne</a></li>                   
    <li class="active">Connexion</li>
</ol>
<div id="left">
    <div class="block">
        <div id="tabs">
        <h2> connexion </h2>
        <ul>
        {% for name, content in methods %}
        <!--li><a href="#tabs-{{ forloop.counter }}">{% trans name %}</a></li-->
        {% endfor %}
        </ul>
        {% for name, content in methods %}
        <div id="tabs-{{ forloop.counter }}">
        {{ content|safe }}
        </div>
        {% endfor %}
        </div>
    </div>
</div>
<div id="right">
    <div class="block">
        <h2>Votre compte citoyen</h2>

<p>Le compte citoyen personnalisé est une porte d’entrée unique vers vos démarches administratives. Votre compte citoyen va vous permettre d’accéder, à partir d’un guichet unique, à vos services en ligne auprès de la ville 24h/24 (bouquet de démarches en ligne, accès direct à l'Espace famille, à l'Espace bibliothèque) et de suivre le traitement de votre demande après avoir rempli un formulaire en ligne, qu’il s’agisse par exemple de la prise de rendez-vous auprès de nos services, d’une demande de carte de stationnement ou de demandes d’intervention du service collecte et propreté...</p>

    </div>

</div>

<div>
<p>
<h2> Avantages du compte </h2>
<b>Vous n’aurez plus besoin de réécrire vos coordonnées dans les formulaires, ces informations seront directement pré-remplies à partir de celles que vous aurez indiquées sur votre compte. </p><p>Votre compte citoyen vous permettra d'accéder directement à vos espaces personnalisés, sans avoir à saisir à chaque connexion vos identifiants et mots de passe.</b>
</p>
<div id="leonard">
    <object width="480" height="270">
<param value="https://www.dailymotion.com/swf/xmou30&amp;colors=background:000969;foreground:FFFFFF;special:B80909;&amp;autoPlay=1&amp;related=0" name="movie" />
<param value="true" name="allowFullScreen" />
<param value="always" name="allowScriptAccess" /><embed width="480" height="270" allowscriptaccess="always" allowfullscreen="true" type="application/x-shockwave-flash" src="https://www.dailymotion.com/swf/xmou30&amp;colors=background:000969;foreground:FFFFFF;special:B80909;&amp;autoPlay=0&amp;related=1"></embed></object></div>
</div>
<script type="text/javascript">
$( "#tabs" ).tabs({cookie: {path: '/'}});
</script>
{% endblock %}

{% block extra_scripts %}
<script type="text/javascript" src="{{ STATIC_URL }}jquery/js/jquery.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}jquery/js/jquery.cookie.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}jquery/js/jquery-ui.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}jquery/js/jquery.simplemodal.js"></script>
{% endblock %}
