<div class="panel" xmlns="http://www.w3.org/1999/html">
    <div class="panel-heading">
        <!--<a ui-sref="root.user.mix({user: mix.user.slug, mix: mix.slug})"><h3><i class="fa fa-headphones"></i>{{mix.title}}</h3></a>-->
        <a ui-sref="root.user.mix({user: mix.user.slug, mix: mix.slug})">
            <i class="fa fa-headphones"></i>&nbsp;
            <span>{{mix.title|truncate:50:true}}</span>
        </a>
        <div class="tools pull-right visible-md visible-lg">
            <btn clip-copy="getMixUrl(mix)" clip-click="copyUrl(mix)" class="btn-mini content-refresh" data-toggle="tooltip" data-title="Copy Link">
                <i class="fa fa-copy"></i>
            </btn>
            <a href="#" ng-show="mix.can_edit" ng-click="editMix(mix)" class="btn-mini content-refresh" data-toggle="tooltip" data-title="Edit">
                <i class="fa fa-pencil"></i>
            </a>
            <a href="#" ng-show="mix.can_edit" ng-click="deleteMix(mix)" class="btn-mini content-remove" data-toggle="tooltip" data-title="Delete">
                <i class="fa fa-times"></i>
            </a>
        </div>
    </div>
    <div class="panel-body">
        <dss-mix-image class="col-md-5 col-sm-12"></dss-mix-image>
        <div class="col-md-6 col-sm-12 pull-right">
            <div class="row">
                <aside>By <a ui-sref="root.user({user: mix.user.slug})">{{mix.user.display_name}}</a></aside>
            </div>
            <div class="row genre-wrapper visible-md visible-lg" style="display: none">
                <a ui-sref="root.mixes({genre: g.slug})" class="btn genre-btn" ng-repeat="g in mix.genres">{{g.description}}</a>
            </div>
            <div class="row">
                <div class="btn-group mix-tools" role="group" aria-label="Default button group">
                    <button ng-click="shareFacebook()" type="button" class="btn"
                            uib-tooltip="Share to facebook">
                        <i class="fa fa-2x fa-facebook-square"></i></button>
                    <button ng-click="shareTwitter()" type="button" class="btn"
                            uib-tooltip="Share to twitter">
                        <i class="fa fa-2x fa-twitter-square"></i></button>
                    <!--
                    <button type="button" class="btn" title="Add to" data-toggle="tooltip">
                        <i class="glyphicon glyphicon-plus"></i></button>
                    -->
                    <button ng-click="toggleLike()" type="button" class="btn"
                            uib-tooltip="{{mix.is_liked ? 'Unlike' : 'Like'}}">
                        <i class="fa fa-2x"
                           ng-class="mix.is_liked ? 'fa-heart' : 'fa-heart-o'"
                           ng-style="{'color': mix.is_liked ? 'red' : ''}">
                        </i>
                    </button>
                    <button ng-click="toggleFavourite()" type="button" class="btn"
                            uib-tooltip="{{mix.is_favourited ? 'Remove from favourites' : 'Add to favourites'}}">
                        <i class="fa fa-2x"
                           ng-class="mix.is_favourited ? 'fa-minus-square' : 'fa-plus-square-o'"
                           ng-style="{'color': mix.is_favourited ? 'red' : ''}">
                        </i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
