<div>
    <div class="col-md-2">
        <dss-mix-image></dss-mix-image>
    </div>
    <div class="col-md-10">
        <div class="row skin-wave skin-wave-mode-normal audioplayer loaded">
            <div class="ap-controls">
                <dss-waveform class="hidden-xs"></dss-waveform>
            </div>
        </div>
        <div class="row">
            <div class="pull-left fb-user-details">
                <a ui-sref="root.user({user: mix.user.slug})">{{mix.user.display_name}}</a>
            </div>
            <div class="pull-right">
                <div class="btn-group" ng-show="$root.currentUser">
                    <dss-playlist mix="mix" dss-class="btn-default btn-xs"></dss-playlist>
                </div>
                <div class="audio-actions-button-bar btn-group btn-group-xs">
                    <button ng-click="shareEmbed()" class="btn btn-small" uib-tooltip="Get embed codes">
                        <i class="fa fa-wordpress blue"></i>
                    </button>
                    <button ng-click="shareFacebook()" class="btn btn-small" uib-tooltip="Share to Facebook">
                        <i class="fa fa-facebook-square blue"></i>
                    </button>
                    <button class="btn btn-small" uib-tooltip="Share to Twitter">
                        <i ng-click="shareTwitter()" class="fa fa-twitter-square"></i>
                    </button>
                </div>
                <div class="audio-actions-button-bar btn-group btn-group-xs">
                    <button uib-tooltip="Plays" class="btn btn-small">
                        <i class="fa fa-play-circle"></i>
                        {{ mix.plays.length }}
                    </button>
                    <button ng-show="mix.is_downloadable" ng-click="downloadFile()"
                            uib-tooltip="Download"
                            class="btn btn-sm">
                        <i class="fa fa-download"></i>
                        {{ mix.downloads.length }}
                    </button>
                </div>
                <div class="audio-actions-button-bar btn-group btn-group-xs" ng-show="$root.currentUser">
                    <a ng-click="toggleLike()"
                       ng-class="mix.is_liked ? 'btn-danger' : 'btn-success'"
                       uib-tooltip="{{mix.is_liked ? 'Unlike' : 'Like'}}"
                       class="btn btn-alt btn-sm btn-default">
                        <i class="fa fa-heart"></i>&nbsp;{{ mix.likes.length }}
                    </a>
                </div>
                <div class="btn-group btn-group-xs" ng-show="$root.currentUser">
                    <a ng-click="toggleFavourite()"
                       ng-class="mix.is_favourited? 'btn-danger' : 'btn-success'"
                       uib-tooltip="{{mix.is_favourited ? 'Remove from favourites' : 'Add to favourites'}}"
                       class="btn btn-alt btn-sm btn-default">
                        <i class="fa" ng-class="mix.is_favourited ? 'fa-minus-square' : 'fa-plus-square-o'"></i>&nbsp;{{
                        mix.favourites.length }}
                    </a>
                </div>
                <div class="audio-actions-button-bar btn-group btn-group-xs" ng-if="mix.can_edit">
                    <button ng-click="editMix(mix)" class="btn btn-small btn-success"><i
                        class="fa fa-pencil-square-o"></i>Edit
                    </button>
                    <button ng-click="deleteMix(mix)" class="btn btn-small btn-danger"><i class="fa fa-times"></i>Delete
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
