<div class="user-content-header user-content-header-media">
    <div class="user-header-section">
        <img ng-src="{{user.profile_image_small}}" alt="Avatar" class="pull-right img-circle"/>

        <h1>
            {{user.display_name}}
            <a class="btn" href="{{userPodcastUrl}}" target="_blank" title="{{user.display_name}}'s Podcast">
                <i class="fa fa-rss orange"></i>
            </a>
        </h1>
        <small>{{user.title}}</small>
    </div>
    <img ng-src="{{user.profile_image_header}}" alt="header image" class="animation-pulseSlow"/>
</div>

<br/>

<div class="col-md-6">
    <div class="panel">
        <div class="panel-heading">About</div>
        <div class="panel-body" ng-bind-html="user.description"></div>
    </div>
</div>

<div class="col-md-6">
    <div ng-show="user.mix_count != 0">
        <section class="panel">
            <header class="panel-heading tab-bg-dark-navy-blue">
                <ul class="nav nav-tabs" id="mixes-tabs">
                    <li class="active"><a href="#latest" data-toggle="tab" data-dss-ordering="-id">Latest mixes</a></li>
                    <li><a href="#popular" data-toggle="tab" data-dss-ordering="-play_count">Popular mixes</a></li>
                </ul>
            </header>
            <div class="panel-body">
                <!-- Tab panes -->
                <div class="tab-content tasi-tab">
                    <div class="tab-content">
                        <div class="tab-pane active" id="latest">
                            <ul ng-repeat="mix in mixes" class="grid cs-style-3">
                                <dss-audio-player template="views/templates/audioGallery.html"></dss-audio-player>
                            </ul>
                        </div>
                        <div class="tab-pane" id="popular">
                            <ul ng-repeat="mix in mixes" class="grid cs-style-3">
                                <dss-audio-player template="views/templates/audioGallery.html"></dss-audio-player>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>