<div class="panel panel-default">
    <div class="panel-heading">
        <div class="btn-group btn-multiselect" id="breakdown__pills">
            {{#if isSocial}}
                <button type="button" class="btn btn-default breakdown" data-breakdownby="artist">{{trans "Artists"}}</button>
            {{else}}
            {{#if isDistributionVendor}}
                <button type="button" class="btn btn-default breakdown" data-breakdownby="subaccount">{{trans "Subaccounts"}}</button>{{/if}}
                {{#if isAudioUser}}
                    <button type="button" class="btn btn-default breakdown" data-breakdownby="catalog">
                        {{trans "Projects"}}
                    </button>
                   <button type="button" class="btn btn-default breakdown" data-breakdownby="product">
                       {{trans "Products"}}
                   </button>
                {{/if}}
                <button type="button" class="btn btn-default breakdown" data-breakdownby="genre">{{trans "Genres"}}</button>
                {{#if isAudioUser}}
                        <button type="button" class="btn btn-default breakdown" data-breakdownby="imprint">{{trans "Imprints"}}</button>
                        <button type="button" class="btn btn-default breakdown" data-breakdownby="artist">{{trans "Artists"}}</button>
                {{else}}
                    <button type="button" class="btn btn-default breakdown" data-breakdownby="imprint">{{trans "Studios"}}</button>
                    {{#if isFilmUser}}
                        <button type="button" class="btn btn-default breakdown" data-breakdownby="artist">{{trans "Collections"}}</button>
                    {{else}}
                        <button type="button" class="btn btn-default breakdown" data-breakdownby="artist">{{trans "Volumes"}}</button>
                    {{/if}}
                {{/if}}
                {{#unless isAudioUser}}
                    <button type="button" class="btn btn-default breakdown" data-breakdownby="catalog">
                        {{trans "Releases"}}
                    </button>
                {{/unless}}
                {{#if isAudioUser}}
                    <button type="button" class="btn btn-default breakdown {{#if isAlbumDownload}}hidden{{/if}}" data-breakdownby="isrc">
                        {{trans "Tracks"}}
                    </button>
                {{/if}}
                <button type="button" class="btn btn-default breakdown" data-breakdownby="sources">{{trans "Sources"}}</button>
                {{#if doIncludeContinentDetails}}
                    <button type="button" class="btn btn-default breakdown" data-breakdownby="continent">{{trans "Continents"}}</button>
                {{/if}}
                {{#if doIncludeCountryDetails}}
                    <button type="button" class="btn btn-default breakdown" data-breakdownby="country">{{trans "Countries"}}</button>
                {{/if}}
                {{#if showPaidVsFree}}
                    <button type="button" class="btn btn-default breakdown" data-breakdownby="paid_vs_free">{{trans "Paid vs Free"}}</button>
                {{/if}}
                {{#if showFormat}}
                    <button type="button" class="btn btn-default breakdown" data-breakdownby="format">{{trans "Format"}}</button>
                {{/if}}
            {{/if}}
        </div>
    </div>
    {{#if analyticsLoaderStateEnabled}}
        <div class="row analytics-loader-wrapper">
    {{/if}}
    <table class="table" id="bars">
        <thead class="default-breakdown-header">
            <tr>
                <th>&nbsp;</th>
                <th class="breakdown-type hidden" data-breakdown="sources">{{trans "Source"}}</th>
                {{#if doIncludeCountryDetails}}
                    <th class="breakdown-type hidden" data-breakdown="country">{{trans "Country"}}</th>
                    {{#if doIncludeContinentDetails}}
                        <th class="breakdown-type hidden" data-breakdown="country">{{trans "Continent"}}</th>
                    {{/if}}
                {{/if}}
                {{#if doIncludeContinentDetails}}
                    <th class="breakdown-type hidden" data-breakdown="continent">{{trans "Continent"}}</th>
                {{/if}}
                {{#if isDistributionVendor}}<th class="breakdown-type hidden" data-breakdown="subaccount">{{trans "Subaccount"}}</th>{{/if}}
                <th class="breakdown-type hidden" data-breakdown="genre">{{trans "Genre"}}</th>
                {{#if isAudioUser}}
                    <th class="breakdown-type hidden" data-breakdown="imprint">{{trans "Imprint"}}</th>
                    <th class="breakdown-type hidden" data-breakdown="artist">{{trans "Artist"}}</th>
                    <th class="breakdown-type hidden" data-breakdown="isrc">{{trans "Track"}}</th>
                {{else}}
                    <th class="breakdown-type hidden" data-breakdown="imprint">{{trans "Studio"}}</th>
                    {{#if isFilmUser}}
                        <th class="breakdown-type hidden" data-breakdown="artist">{{trans "Collection"}}</th>
                    {{else}}
                        <th class="breakdown-type hidden" data-breakdown="artist">{{trans "Volume"}}</th>
                    {{/if}}
                {{/if}}
                <th class="breakdown-type hidden" data-breakdown="catalog">
                    {{#if isAudioUser}}{{trans "Project"}}{{else}}{{trans "Release"}}{{/if}}
                </th>
                {{#if showPaidVsFree}}
                    <th class="breakdown-type hidden" data-breakdown="paid_vs_free">{{trans "Paid vs Free"}}</th>
                {{/if}}
                {{#if showFormat}}
                    <th class="breakdown-type hidden" data-breakdown="format">{{trans "Format"}}</th>
                {{/if}}
                <th class="text-right">
                    {{#if unit.url}}
                        <a href="{{unit.url}}"  target="_blank">{{trans unit.text}}</a>
                    {{else}}
                        {{trans unit.text}}
                    {{/if}}</th>
                <th>&nbsp;</th>
                <th>%</th>
            </tr>
            <tr class="breakdown__all-line-holder">
                <td align="center">
                    <div class="checkbox">
                        <input class="checkbox breakdown__show-all-lines" type="checkbox" id="allCheck"></input>
                        <label for="allCheck">&nbsp</label>
                    </div>
                </td>
                <td class="breakdown-title"><div>{{trans "All"}}</div></td>
                {{#if showContinentInCountry}}
                    <td class="breakdown-title"><div>{{trans "All"}}</div></td>
                {{/if}}
                <td align="right"><div class="grand-total"></div></td>
                <td width="345px"></td>
                <td>{{per 100}}</td>
            </tr>
        </thead>
        {{#if isAudioUser}}
            <thead class="project-breakdown-header hidden">
                <tr>
                    <th class="col-sm-1">&nbsp;</th>
                    <th class="breakdown-type hidden col-sm-4" data-breakdown="catalog">
                        {{trans "Project"}}
                    </th>
                    <th class="breakdown-type hidden col-sm-3" data-breakdown="catalog">{{trans "Project Code"}}</th>
                    <th class="col-sm-1">
                        {{#if unit.url}}
                            <a href="{{unit.url}}"  target="_blank">{{trans unit.text}}</a>
                        {{else}}
                            {{trans unit.text}}
                        {{/if}}
                    </th>
                </tr>
                <tr class="breakdown__all-line-holder">
                    <td align="center" class="col-sm-1">
                        <div class="checkbox">
                            <input class="checkbox breakdown__show-all-lines" type="checkbox" id="allCheckProject"></input>
                            <label for="allCheckProject">&nbsp</label>
                        </div>
                    </td>
                    <td class="breakdown-title col-sm-3" >{{trans "All"}}</td>
                    <td class="breakdown-type hidden col-sm-3" data-breakdown="catalog">&nbsp;</td>
                    <td class="col-sm-3"><div class="grand-total"></div></td>
                </tr>
            </thead>
        {{/if}}
        {{#if isAudioUser}}
            <thead class="product-breakdown-header hidden">
                <tr>
                    <th class="col-sm-1">&nbsp;</th>
                    {{#if searchProductCodeEnabled}}
                        <th class="breakdown-type hidden col-sm-3" data-breakdown="product">
                    {{else}}
                        <th class="breakdown-type hidden col-sm-5" data-breakdown="product">
                    {{/if}}
                        {{trans "NAME"}}
                    </th>
                    {{#if searchProductCodeEnabled}}
                        <th class="breakdown-type hidden col-sm-2" data-breakdown="product">
                            {{trans "Product Code"}}
                        </th>
                    {{/if}}
                    <th class="breakdown-type hidden col-sm-2" data-breakdown="product">
                        {{trans "UPC"}}
                    </th>
                    <th class="col-sm-2">
                        {{#if unit.url}}
                            <a href="{{unit.url}}"  target="_blank">{{trans unit.text}}</a>
                        {{else}}
                            {{trans unit.text}}
                        {{/if}}
                    </th>
                    <th class="col-sm-2">%</th>
                </tr>
                    <tr class="breakdown__all-line-holder">
                        <td align="center" class="col-sm-1">
                            <div class="checkbox">
                                <input class="checkbox breakdown__show-all-lines" type="checkbox" id="allCheckProduct"></input>
                                <label for="allCheckProduct">&nbsp;</label>
                            </div>
                        </td>
                        {{#if searchProductCodeEnabled}}
                            <td class="breakdown-title col-sm-3">{{trans "All"}}</td>
                        {{else}}
                            <td class="breakdown-title col-sm-5">{{trans "All"}}</td>
                        {{/if}}
                        <td class="col-sm-2">&nbsp;</td>
                        {{#if searchProductCodeEnabled}}
                            <td class="col-sm-2"></td>
                        {{/if}}
                        <td class="col-sm-2"><div class="grand-total"></div></td>
                        {{#if searchProductCodeEnabled}}
                            <td class="col-sm-2 text-nowrap">{{per 100}}</td>
                        {{else}}
                            <td class="col-sm-2">{{per 100}}</td>
                        {{/if}}
                    </tr>
            </thead>
        {{/if}}
        <tbody id="bars_table_body">

        </tbody>
    </table>
    {{#if analyticsLoaderStateEnabled}}
        <div class="loading analytics-loader" id="loading_bars">
            <div class="LoadingIndicator">
                <div class="LoadingIndicator-outer">
                    <div class="LoadingIndicator-dots">
                        <div class="LoadingIndicator-loader-dot"></div>
                        <div class="LoadingIndicator-loader-dot"></div>
                        <div class="LoadingIndicator-loader-dot"></div>
                        <div class="LoadingIndicator-loader-dot"></div>
                        <div class="LoadingIndicator-loader-dot"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{else}}
        <div id="loading_bars" class="progress progress-striped active">
            <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" role="progressbar" class="progress-bar"></div>
            <div>{{trans "Loading"}}</div>
        </div>
    {{/if}}
    <div class="panel-footer">
        <ul class="pagination">
            <li class="disabled pagination__previous"><a href="#"><span>&laquo;</span></a></li>
            <li class="pagination__next"><a href="#"><span>&raquo;</span></a></li>
        </ul>
    </div>
</div>
