{% extends "base.html" %}
{% load thumbnail %}
{% load i18n %}
{% load l10n %}
{% block js_import %} 
        <script type="text/javascript" src="{{STATIC_URL}}tralalere/js/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $(".home-media").click(function() {
                    document.location.href = $(this).find("a").attr("href");
                    return false;
                });
            });
        </script>
{% endblock %}
{% block main_content %}
            <div class="home-header">
                <h1>Musitag</h1>
                <h2>{% trans "Mets tes couleurs, tes émotions<br />et ta voix sur la musique !" %}</h2>
            </div>
            
            {% for content in contents %}
            <div class="home-media">
                <a href="{% url player content.iri_id %}">
                    {% thumbnail content.image "135x120" format="PNG" crop="center" as im %}<img class="home-media-image" src="{{im.url}}" width="{{ im.width|unlocalize }}" height="{{ im.height|unlocalize }}" />{% endthumbnail %}
                </a>
                <h3>
                    <a href="{% url player content.iri_id %}">{{content.title}}</a>
                </h3>
                <h4>
                    <a href="{% url player content.iri_id %}">{{content.description}}</a>
                </h4>
                {% if content.tags_stats %}
                {% if content.tags_stats.colors %}
                <ul class="home-dataviz home-dataviz-colors">
                {% for tag in content.tags_stats.colors %}
                    <li style="width: {{tag.width}}px" title="{{tag.score}}x {% trans tag.tag %}">
                    {% if tag.scale == 1 %}
                        <div class="tag-container-50" >
                    {% else %}
                        <div class="tag-container-50" style="-webkit-transform-origin: bottom left; -webkit-transform: scale({{tag.scale|unlocalize}}); -moz-transform-origin: bottom left; -moz-transform: scale({{tag.scale|unlocalize}});">
                    {% endif %}
                            <div class="tag-shadow"></div>
                            <div class="tag-color tag-{{tag.tag}}"></div>
                        </div>
                    </li>
                {% endfor %}                      
                </ul>
                {% endif %}
                {% if content.tags_stats.emoticons %}
                <ul class="home-dataviz home-dataviz-emoticon">
                {% for tag in content.tags_stats.emoticons %}
                    <li style="width: {{tag.width}}px" title="{{tag.score}}x {% trans tag.tag %}">
                    {% if tag.scale == 1 %}
                        <div class="tag-container-50">
                    {% else %}
                        <div class="tag-container-50" style="-webkit-transform-origin: bottom left; -webkit-transform: scale({{tag.scale|unlocalize}}); -moz-transform-origin: bottom left; -moz-transform: scale({{tag.scale|unlocalize}});">
                    {% endif %}
                            <div class="tag-shadow"></div>
                            <div class="tag-color"></div>
                            <div class="tag-emoticon tag-{{tag.tag}}"></div>
                        </div>
                    </li>
                {% endfor %}
                </ul>
                {% endif %}
                {% endif %}
            </div>
            {% endfor %}
{% endblock %}