{% extends "base.html" %}
{% block main_content %}
{% load thumbnail %}
            <div class="home-header">
                <h1>Musitag</h1>
                <h2>Mets tes couleurs, tes émotions<br />et ta voix sur la musique !</h2>
            </div>
            
            {% for content in contents %}
            <div class="home-media">
                <a href="#">
                    {% thumbnail content.image "135x120" format="PNG" crop="center" as im %}<img class="home-media-image" src="{{im.url}}" width="{{ im.width }}" height="{{ im.height }}" />{% endthumbnail %}
                </a>
                <h3>
                    <a href="{% url player content.iri_id %}">{{content.title}}</a>
                </h3>
                <h4>
                    <a href="#">{{content.description}}</a>
                </h4>
                <ul class="home-dataviz home-dataviz-colors">
                    <li>
                        <div class="tag-container-50">
                            <div class="tag-shadow"></div>
                            <div class="tag-color tag-green"></div>
                        </div>
                    </li>
                    <li style="width: 40px">
                        <div class="tag-container-50" style="-webkit-transform-origin: bottom left; -webkit-transform: scale(.8); -moz-transform-origin: bottom left; -moz-transform: scale(.8);">
                            <div class="tag-shadow"></div>
                            <div class="tag-color tag-yellow"></div>
                        </div>
                    </li>
                    <li style="width: 25px">
                        <div class="tag-container-50" style="-webkit-transform-origin: bottom left; -webkit-transform: scale(.5); -moz-transform-origin: bottom left; -moz-transform: scale(.5);">
                            <div class="tag-shadow"></div>
                            <div class="tag-color tag-red"></div>
                        </div>
                    </li>
                    <li style="width: 10px">
                        <div class="tag-container-50" style="-webkit-transform-origin: bottom left; -webkit-transform: scale(.2); -moz-transform-origin: bottom left; -moz-transform: scale(.2);">
                            <div class="tag-shadow"></div>
                            <div class="tag-color tag-blue"></div>
                        </div>
                    </li>
                </ul>
                <ul class="home-dataviz home-dataviz-emoticon">
                    <li>
                        <div class="tag-container-50">
                            <div class="tag-shadow"></div>
                            <div class="tag-color"></div>
                            <div class="tag-emoticon tag-laughing"></div>
                        </div>
                    </li>
                    <li style="width: 40px">
                        <div class="tag-container-50" style="-webkit-transform-origin: bottom left; -webkit-transform: scale(.8); -moz-transform-origin: bottom left; -moz-transform: scale(.8);">
                            <div class="tag-color"></div>
                            <div class="tag-emoticon tag-happy"></div>
                        </div>
                    </li>
                    <li style="width: 25px">
                        <div class="tag-container-50" style="-webkit-transform-origin: bottom left; -webkit-transform: scale(.5); -moz-transform-origin: bottom left; -moz-transform: scale(.5);">
                            <div class="tag-color"></div>
                            <div class="tag-emoticon tag-surprised"></div>
                        </div>
                    </li>
                    <li style="width: 10px">
                        <div class="tag-container-50" style="-webkit-transform-origin: bottom left; -webkit-transform: scale(.2); -moz-transform-origin: bottom left; -moz-transform: scale(.2);">
                            <div class="tag-color"></div>
                            <div class="tag-emoticon tag-unhappy"></div>
                        </div>
                    </li>
                </ul>
            </div>
            {% endfor %}
{% endblock %}