<div class="box">
    <div class="box-title">
        <a ui-sref="root.user.mix({user: mix.user.slug, mix: mix.slug})"><h3><i class="fa fa-headphones"></i>{{mix.title}}</h3></a>
        <div class="actions">
            <btn clip-copy="getMixUrl(mix)" clip-click="copyUrl(mix)" class="btn btn-mini content-refresh" data-toggle="tooltip" data-title="Copy Link">
                <i class="fa fa-copy"></i>
            </btn>
            <a ng-show="mix.can_edit" ng-click="editMix(mix)" class="btn btn-mini content-refresh" data-toggle="tooltip" data-title="Edit">
                <i class="fa fa-pencil"></i>
            </a>
            <a ng-show="mix.can_edit" ng-click="deleteMix(mix)" class="btn btn-mini content-remove" data-toggle="tooltip" data-title="Delete">
                <i class="fa fa-times"></i>
            </a>
        </div>
    </div>
    <div class="box-content">
        <div class="col-md-4 image-container widget-advanced"
             style="background-image: url('{{mix.mix_image}}');">
            <div style="background-image: url('{{mix.user.profile_image_small}}')"
                 class="widget-image-container animation-hatch">
                <div ng-class="playState==1 ? 'pause' : 'play'" style="display: block" ng-click="play(mix)"
                     class="playbtn play"></div>
            </div>
        </div>
        <div class="col-md-7 pull-right">
            <div class="row">
                <h4></h4>
            </div>
            <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">
                <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>
                </div>
            </div>
        </div>
    </div>
</div>
