{% extends "mashup_home.html" %}
{% load static %}
{% load i18n %}
{% load analytics %}
{% load thumbnail %}
    {% block title %}Profil de '{{username}}'{% endblock %}
    {% block css_page %}
    <link rel="stylesheet" href="{% static 'hashcut' %}/{{branding}}/css/profil.css" />
    {% endblock %}

{% block wrap_header %}
<div class="wrap-header"> 
    <div class="header">
    {% include 'partial/mashup_popin_user.html' %}
    {% include 'partial/hashcut_logo.html' %}
        <div class="title-video-wrap">
            <p class="title-video" href="#">
                <span class="category">Profil</span>
                <span class="separator">&raquo;</span>
                {{username}}
            </p>
        </div>
    {% include 'partial/hashcut_social.html' %}
        <div class="profil-wrap">
            <ul>
                <li><a href="{% url mashup_home branding=branding %}" class="all-hashcut">Accueil</a></li>
                <li><a href="{% url mashup_edit branding=branding %}" class="new-hashcut">Créer un Hashcut</a></li>
                <li><a href="#user" class="my-profil open-popin">Mon profil</a></li>
            </ul>
        </div>
    </div><!-- header -->
</div> <!-- wrap-header -->
{% endblock %}

{% block content %}
<div class="content">

    <div class="hashcut-video-wrap profil">
        {% for m in mashups %}
        <div class="video-item">
            <a href="{% url mashup_hashcut branding=branding ldt_id=m.project.ldt_id %}" class="screenshot">{% thumbnail m.project.image "302x202" crop="center" format="PNG" as im %}<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" alt=""/>{% empty %}&nbsp;{% endthumbnail %}</a>
            <h3><a class="title" href="{% url mashup_hashcut branding=branding ldt_id=m.project.ldt_id %}">{% if m.project.title|length > 30 %}{{m.project.title|slice:":30"}}...{% else %}{{m.project.title}}{% endif %}</a> par {{ m.creator }} | <span class="duration">02:24</span> </h3>
        </div>
        {% endfor %}
    </div>
    <!--div class="pagination">
            <a href="#" class="active">1</a>
            <a href="#">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
            <a href="#">5</a>
            <a href="#">6</a>
            <a href="#">Suivant</a>
    </div-->
</div><!-- content -->
{% endblock %}
{% block js_import %}
{{block.super}}
<script type="text/javascript">
    $(function() {
        social({
            swf: "{% static 'hashcut/lib/ZeroClipboard.swf' %}"
        });
    });
</script>
{% endblock %}