{% load thumbnail %}
<div class="row">
    <div class="span2 mix-profile-container">
        <div class="mix-image-container">
            <img alt="mix-logo" class="mix-image-image img-rounded img-polaroid" src="<%= mix_image %>"/>
        </div>
        <div class="mix-profile-insert">
            <h6>
                <a href="/<%= user_profile_url %>" id="<%= id %>">
                    <i class="icon-user"></i><%= user_name %>
                </a>
            </h6>
        </div>
    </div>
    <div class="span10 mix-container" id="mix-container-<%= id %>">
        <div class="row title-bar">
            <div class="pull-left title-bar-item">
                <a class="mix-link"
                   id="mix-link-<%= id %>"
                   href="<%= item_url %>"
                   title="<%= title %>"><%= title %>
                </a>
            </div>
            <div class="pull-right title-bar-item">
                <div id="genre-list" class="pull-right">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="player-seekhead" id="player-seekhead" style="display: none;">
                <span class="player-seekhead-time"></span>
            </div>
            <div class="player-progress">
                <div class="waveform" id="waveform-<%= id %>">
                    <label class="dss-time-display-label dss-time-display-label-total" id="player-duration-<%= id %>">00:00:00</label>
                    <img id="waveform-image-<%= id %>" class="waveform_image"
                         alt="Audio waveform"
                         src="<%= waveform_url %>">
                    <div class="download-progress-overlay" id="progress-player-<%= id %>"></div>
                    <div class="playhead" id="playhead-player-<%= id %>" style="width: 0px"></div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="player-footer">
                <div class="play-button footer-button">
                    <button class="play-button-small play-button-small-start"></button>
                </div>
                {% if user.is_authenticated %}
                    <div class="like-button footer-button">
                        <a class="btn btn-mini <% if (liked) { %> disabled <% } %>" id="like-<%= id %>"
                           data-id="<%= id %>">
                            <i class="icon-heart"></i> Like</a>
                    </div>
                    <div class="favourite-button footer-button">
                        <a class="btn btn-mini <% if (favourited) { %> disabled <% } %> " id="favourite-<%= id %>"
                           data-id="<%= id %>"><i
                                class="icon-star-empty"></i> Favourite</a>
                    </div>
                {% endif %}
                <div class="footer-button">
                    <div class="btn-group" id="share-dropdown-<%= id %>">
                        <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
                            <i class="icon-share"/>Share
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li>
                                <a data-mode="facebook"
                                   class="share-button share-button-facebook">
                                    Facebook
                                </a>
                            </li>
                            <li>
                                <a data-mode="twitter"
                                   class="share-button share-button-twitter">
                                    Twitter
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                {% if user.is_authenticated %}
                    <% if (download_allowed) { %>
                    <div class="download-button footer-button">
                        <a class="btn btn-mini" data-id="<%= id %>">
                            <i class="icon-download"></i> Download</a>
                    </div>
                    <% } %>
                {% endif %}
                <div class="footer-button">
                    <ul class="list-nostyle list-horiz">
                        <li title="<%= play_count %> Plays" class="stats-item bordered-right">
                            <span class="icon-play stats">Plays:</span> <%= play_count %>
                        </li>
                        <li title="<%= download_count %> Downloads" class="stats-item bordered-right">
                            <span class="icon-download-alt stats">Downloads:</span> <%= download_count %>
                        </li>
                        <li title="<%= comment_count %> Comments" class="stats-item bordered-right">
                            <span class="icon-pencil stats">Comments:</span> <%= comment_count %>
                        </li>
                        <li title="<%= like_count %> Likes" class="stats-item bordered-right">
                            <span class="icon-heart stats">Likes:</span> <%= like_count %>
                        </li>
                    </ul>
                </div>
                {% if user.is_staff %}
                    <div class="edit-button footer-button-right">
                        <a href="/mix/edit/<%= slug %>" class="btn btn-mini"
                           data-id="<%= id %>"><i
                                class="icon-edit"></i>Edit</a>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>