{% extends "authentic2/base-page.html" %}
{% load i18n %}

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

{% block breadcrumb-elements %}
  <li class="active">Connexion</li>
{% endblock %}

{% block messages %}
<!-- messages are moved to the "content" block -->
{% endblock %}

{% block content %}
<div>
<h2>Votre compte citoyen</h2>
</div>

{% if messages %}
<div id="messages" class="messages-login">
  <ul class="messages">
    {% for message in messages %}
    <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
    {% endfor %}
  </ul>
</div>
{% endif %}

{% for name, content in methods %}
<div id="{% if forloop.first %}left{% else %}right{% endif %}">
<div class="block">
        {{ content|safe }}
</div>
</div>
{% endfor %}

{% if methods|length == 1 %}<div id="right">{% else %}<div>{% endif %}
<div class="block">
<h2>Code de suivi</h2>
<form id="wcs-tracking-code" data-wcs-url="{{ demarches_url }}">
<p>Un code de suivi peut être associé à vos demandes, il vous facilite les
échanges avec les services. Pour retrouver une demande disposant d'un code de
suivi, indiquez ce dernier ci-dessous&nbsp;:
</p>
<input id="tracking-code" placeholder="ex: CNPHNTFB">
<input value="Valider" type="submit">
</form>
<script type="text/javascript">
$(function() {
  $('form#wcs-tracking-code').on('submit', function() {
    var url = $(this).data('wcs-url');
    window.location = url + 'code/' + $(this).find('input').val() + '/load';
    return false;
  });
});
</script>
</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="{{ site_base }}{{ STATIC_URL }}jquery/js/jquery.js"></script>
<script type="text/javascript" src="{{ site_base }}{{ STATIC_URL }}jquery/js/jquery.cookie.js"></script>
<script type="text/javascript" src="{{ site_base }}{{ STATIC_URL }}jquery/js/jquery-ui.js"></script>
<script type="text/javascript" src="{{ site_base }}{{ STATIC_URL }}jquery/js/jquery.simplemodal.js"></script>
{% endblock %}