{% extends "jocondelab/front_base.html" %}
{% load i18n %}

{% block js_import %}
    {{block.super}}
    <script type="text/javascript" src="{{STATIC_URL}}jocondelab/lib/jquery.mousewheel.js"></script>
    <script type="text/javascript" src="{{STATIC_URL}}jocondelab/lib/hammer.min.js"></script>
{% endblock %}

{% block js_declaration %}
    {{block.super}}
    <script type="text/javascript">
        urls.ajax_years = "{% url 'ajax_years' %}";
    </script>
    <script type="text/javascript" src="{{STATIC_URL}}jocondelab/js/front-timeline.js"></script>
{% endblock %}

{% block css_declaration %}
    {{block.super}}
    <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}jocondelab/css/front-timeline.css" />
{% endblock %}

{% block title %}JocondeLab &raquo; {% trans 'Chronologie' %}{% endblock %}

{% block breadcrumbs %}{% trans 'Chronologie' %}{% endblock %}

{% block main %}
            <h2 class="timeline-section-title">{% trans 'Recherche par période' %}</h2>
            <div class="timeline-section">
            <div class="timeline-wrapper">
                <div class="timeline-container">
                    <canvas class="timeline-canvas"></canvas>
                    <ul class="timeline-list"></ul>
                </div>
                <div class="timeline-slider-container">
                    <a class="timeline-zoom-button timeline-zoom-in" href="#"></a>
                    <div class="timeline-slider"></div>
                    <a class="timeline-zoom-button timeline-zoom-out" href="#"></a>
                </div>
            </div>
            <div class="timeline-arrows">
                <span class="timeline-span-from">0</span>
                &mdash;
                <span class="timeline-span-to">0</span>
                <a class="timeline-goleft" href="#" data-direction="{% if not current_lang.bidi %}-{% endif %}1">&larr;</a>
                <a class="timeline-goright" href="#" data-direction="{% if current_lang.bidi %}-{% endif %}1">&rarr;</a>
            </div>
            </div>
            <h2 class="timeline-section-title">{% trans 'Recherche par date' %}</h2>
            <div class="timeline-section">
            <div class="timeline-mill-slider"></div>
            <p class="timeline-mill-p"><button class="timeline-mill-submit">
                {% trans 'Afficher les contenus de ' %}
                <span class="timeline-mill-from-year">0</span>
                {% trans ' à ' %}
                <span class="timeline-mill-to-year">0</span>
                {% trans 'texte_post_timeline_years' %}
            </button></p>
            </div>
            
            <div class="results"></div>
            
            <div class="loading-please-wait"><img src="{{STATIC_URL}}jocondelab/img/loader.gif" /></div>
            <p class="load-more"><a href="#">{% trans 'Afficher plus de résultats' %}</a></p>
            
{% endblock %}