<div class="well">
    <div class="row">
        <div class="col-xs-12">
            <h3 class="playlist-title center-block">
                <a href="{{this.url}}">{{title}}</a>
            </h3>
        </div>
    </div>
    {{!-- Videos --}}
    <div class="row progress-block">
        <div class="col-xs-2">
            <div class="progress-indicator progress-indicator-lg center-block {{vid_status}}">
                <div class="sidebar-icon icon-Video icon-label icon-label-lg"><span class="progress-indicator content-counter label label-primary">{{#if n_pl_videos}}{{n_pl_videos}}{{/if}}</span></div>
            </div>
        </div>
        <div class="col-xs-10">
            <div class="progress playlist-progress-bar">
                {{#if vid_pct_complete}}
                    <div class="progress-bar progress-bar-success" title="% Completed" style="width: {{vid_pct_complete}}%">
                        <span>{{vid_pct_complete}}%</span>
                    </div>
                {{/if}}
                {{#if vid_pct_started}}
                    <div class="progress-bar inprogress" title="% In-Progress" style="width: {{vid_pct_started}}%">
                        <span>{{vid_pct_started}}%</span>
                    </div>
                {{/if}}
            </div>
        </div>
    </div>
    {{!-- Exercises --}}
    <div class="row progress-block">
        <div class="col-xs-2">
            <div class="progress-indicator progress-indicator-lg center-block {{ex_status}}">
                <div class="sidebar-icon icon-Exercise icon-label icon-label-lg"><span class="progress-indicator content-counter label label-primary">{{#if n_pl_exercises}}{{n_pl_exercises}}{{/if}}</span></div>
            </div>
        </div>
        <div class="col-xs-10">
            <div class="progress playlist-progress-bar">
                {{#if ex_pct_mastered}}
                    <div class="progress-bar progress-bar-success" title="% Mastered" style="width: {{ex_pct_mastered}}%">
                        <span>{{ex_pct_mastered}}%</span>
                    </div>
                {{/if}}
                {{#if ex_pct_incomplete}}
                    <div class="progress-bar inprogress" title="% In-Progress" style="width: {{ex_pct_incomplete}}%">
                        <span>{{ex_pct_incomplete}}%</span>
                    </div>
                {{/if}}
                {{#if ex_pct_struggling}}
                    <div class="progress-bar struggling" title="% Struggling" style="width: {{ex_pct_struggling}}%">
                        <span>{{ex_pct_struggling}}%</span>
                    </div>
                {{/if}}
            </div>
        </div>
    </div>
    {{!-- Quiz --}}
    {{#if quiz_exists}}
    <div class="row progress-block">
        <div class="col-xs-2">
            <div class="progress-indicator progress-indicator-lg center-block {{quiz_status}}">
                <span class="sidebar-icon icon-Quiz icon-label icon-label-lg"></span>
            </div>
        </div>
        <div class="col-xs-10">
            <div class="progress playlist-progress-bar">
                {{#if quiz_pct_score}}
                <div class="progress-bar {{quiz_status}}" title="% Score" style="width: {{quiz_pct_score}}%">
                    <span>{{quiz_pct_score}}%</span>
                </div>
                {{/if}}
            </div>
        </div>
    </div>
    {{/if}}
    <div class="row">
        <div class="col-xs-12">
            <button class="btn btn-sm btn-primary center-block toggle-details"><span class="expand-collapse glyphicon glyphicon-chevron-down"></span></button>
        </div>
    </div>
    <div class="row playlist-progress-details">
        <div class="col-xs-12">
            <img class="center-block" src="/static/images/loading.gif"/>    
        </div>
    </div>
</div>
