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

{% block title %}{{block.super}} > {% trans "Recherche par arbre" %}{% endblock %}

{% block css_import %}
{{block.super}}
        <link rel="stylesheet" type="text/css" href="{% static 'hdalab/css/ui-lightness/jquery-ui-1.10.4.min.css' %}" />
        <link rel="stylesheet" type="text/css" href="{% static 'hdalab/css/trees.css?refresh' %}" />
        <link rel="stylesheet" type="text/css" href="{% static 'hdalab/css/cattree.css?refresh' %}" />
{% endblock %}

{% block js_import %}
{{block.super}}
        <script src="{% static 'hdalab/lib/lodash.min.js' %}"></script>
        <script src="{% static 'hdalab/lib/mustache.js' %}"></script>
        <script src="{% static 'hdalab/lib/jquery-ui-1.10.4.min.js' %}"></script>
        <script type="text/javascript">
        endpoints = {
            cat_search: "{% url 'cat_search' %}",
            cat_tree: "{% url 'cat_tree' %}",
            fill_tree: "{% url 'fill_tree' %}",
            datasheet: "{% url 'notice' 'ID' %}"
        };
        </script>
        <script src="{% static 'hdalab/js/trees.js?refresh' %}"></script>
        <script src="{% static 'hdalab/js/cattree.js?refresh' %}"></script>
{% endblock %}

{% block categories_actif %}actif{% endblock %}

{% block main_content %}
	<div class="all-title">
        	<h1>{% trans "Explorer les domaines artistiques" %}</h1>
    </div>
    <div class="leftzone">
        <p>
            Choisissez un domaine artistique et découvrez le classement thématique des ressources offert par les <a href="http://fr.wikipedia.org/wiki/Cat%C3%A9gorie:Accueil" target="_blank">catégories Wikipédia</a>
        </p>
        <ul class="disciplist">
            <li><a id="cinema" href="#"><span>Cinéma</span></a></li>
            <li><a id="architecture" href="#"><span>Architecture</span></a></li>
            <li><a id="peinture" href="#"><span>Peinture</span></a></li>
            <li><a id="litterature" href="#"><span>Littérature</span></a></li>
            <li><a id="musique" href="#"><span>Musique</span></a></li>
            <li><a id="theatre" href="#"><span>Théâtre</span></a></li>
            <li><a id="photographie" href="#"><span>Photographie</span></a></li>
            <li><a id="poesie" href="#"><span>Poésie</span></a></li>
            <li><a id="sculpture" href="#"><span>Sculpture</span></a></li>
            <li><a id="arts-jardins" href="#"><span>Jardin</span></a></li>
            <li><a id="arts-cirque" href="#"><span>Cirque</span></a></li>
            <li><a id="arts-numeriques" href="#"><span>Arts Numériques</span></a></li>
            <li><a id="bd" href="#"><span>Bande Dessinée</span></a></li>
            <li><a id="chanson" href="#"><span>Chanson</span></a></li>
            <li><a id="danse" href="#"><span>Danse</span></a></li>
            <li><a id="design" href="#"><span>Design</span></a></li>
            <li><a id="dessin" href="#"><span>Dessin</span></a></li>
            <li><a id="mode" href="#"><span>Mode</span></a></li>
        </ul>
        <div id="morecategories">{% trans 'Voir plus ou moins de catégories' %}</div>

        <h3>Recherche de catégories de Wikipédia&nbsp;: </h3>
        <p>
            <form id="catform"><input id="catsearch" placeholder="{% trans 'Entrez une catégorie'%}"/></form>
        </p>
        <div class="results hidden">
            <h2>Résultats pour &laquo;&nbsp;<span class="label-name"></span>&nbsp;&raquo;&nbsp;:</h2>
            <p class="category-results"><span class="category-count"></span> sous-catégorie(s)</p>
            <p class="content-results"><span class="content-count"></span> contenu(s)</p>
        </div>
    </div>
    <div id="tree" class="cattree"></div>
{% endblock %}