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

{% block js_declaration %}
    {{block.super}}
    <script type="text/javascript" src="{{STATIC_URL}}jocondelab/js/front-termlist.js"></script>
{% endblock %}

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

{% block title %}JocondeLab &raquo; {% trans 'Mots-clés' %}{% endblock %}

{% block breadcrumbs %}{% trans 'Mots-clés' %}{% endblock %}

{% block main %}
            
            <ul class="term-tabs">
                <li class="term-tab{% if thesaurus == None %} active{% endif %}">
                    <h2><a href="{% url 'front_termlist' %}">{% trans "Nuage" %}</a></h2>
                </li>
                <li class="term-tab{% if thesaurus == 'AUTR' %} active{% endif %}">
                    <h2><a href="{% url 'front_termlist' %}?thesaurus=AUTR">{% trans "Artistes" %}</a></h2>
                </li>
                <li class="term-tab{% if thesaurus == 'REPR' %} active{% endif %}">
                    <h2><a href="{% url 'front_termlist' %}?thesaurus=REPR">{% trans "Sujets représentés" %}</a></h2>
                </li>
                <li class="term-tab{% if thesaurus == 'DOMN' %} active{% endif %}">
                    <h2><a href="{% url 'front_termlist' %}?thesaurus=DOMN">{% trans "Catégories" %}</a></h2>
                </li>
                <li class="term-tab{% if thesaurus == 'EPOQ' %} active{% endif %}">
                    <h2><a href="{% url 'front_termlist' %}?thesaurus=EPOQ">{% trans "Époques" %}</a></h2>
                </li>
            </ul>
            
            <div class="term-contents">
        {% if thesaurus %}
                <p class="term-filter{% if not alpha_sort %} active{% endif %}">
                    <a href="{% url 'front_termlist' %}?thesaurus={{thesaurus}}">{% trans "Termes les plus fréquents" %}</a>
                </p>
            {% if show_alphabet %}
                <ul class="term-filter letter-list">
                {% for letter in alphabet %}
                    <li class="letter{% if letter == current_letter %} active{% endif %}"><a href="{% url 'front_termlist' %}?thesaurus={{thesaurus}}&letter={{letter|urlencode}}">{{letter}}</a></li>
                {% endfor %}
                </ul>
            {% else %}
                <p class="term-filter{% if alpha_sort %} active{% endif %}">
                    <a href="{% url 'front_termlist' %}?thesaurus={{thesaurus}}&alphabet=1">{% trans "Classer par ordre alphabétique" %}</a>
                </p>
            {% endif %}
                <ul class="terms clearfix">
                {% for term in terms %}
                    <li class="term" data-dbpedia-uri="{{term.dbpedia_uri}}">
                        <div class="term-image-wrap">
                            <img class="term-image" src="{{JOCONDE_IMAGE_BASE_URL}}{{term.image_url}}" />
                        </div>
                        <h3 data-dbpedia-uri="{{term.dbpedia_uri}}"><a href="{% url 'front_search' %}?dbpedia_uri={{term.dbpedia_uri|urlencode}}&thesaurus={{thesaurus}}">{{term.label}}</a></h3>
                            {% if term.abstract %}<p>{{term.abstract|truncatechars:100}}</p>{% endif %}
                    </li>
                {% endfor %}
                </ul>
        {% else %}
                <ul class="term-cloud">
                {% for word in words %}
                    <li style="font-size: {{word.font_size}}em">
                        <a href="{% url 'front_search' %}?dbpedia_uri={{word.uri|urlencode}}" data-dbpedia-uri="{{word.uri}}">{{word.label}}</a>
                    </li>
                {% endfor %}
                </ul>
        {% endif %}
            </div>
            
            <div class="loading-please-wait"><img src="{{STATIC_URL}}jocondelab/img/loader.gif" /></div>
            <script>$(function() { dbpediaBox.bind(".term h3");});</script>
            
{% endblock %}