<div class="row">
    <div class="col-md-12">
        <div id="breakdown" class="panel panel-default">
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-7">
                        <h6>{{trans "View by"}}:</h6>
                        <div class="btn-group btn-multiselect" id="btn_wrap">
                        {{#each filters}}
                            {{> filter-button this}}
                        {{/each}}
                        </div>
                    </div>
                    {{#if insightsSurveyEnabled}}
                        <div class="col-md-5">
                            <div class="insights-survey">
                                <img src="{{cdnBasePath}}/images/icons/megaphone.png"/>
                                <div class="insights-survey-info">
                                    <span>{{trans "We could use your feedback!"}}</span>
                                    <a href="{{survey_url}}" target="_blank">
                                        {{trans "Let us know why you’re still using Workstation Analytics."}}
                                    </a>
                                </div>
                            </div>
                        </div>
                    {{/if}}
                </div>
                <br>
                <div class="row">
                    <div class="col-md-12">
                        <div id="dim_wrap" class="well well-blue clearfix">
                            <div class="card-1" id="vendor_wrap"></div>
                            <div class="hidden" id="subaccount_ids_wrap"></div>
                            <div class="hidden" id="genre_ids_wrap"></div>
                            <div class="hidden" id="imprint_ids_wrap"></div>
                            <div class="hidden" id="artist_ids_wrap"></div>
                            <div class="hidden" id="catalog_ids_wrap"></div>
                            <div class="hidden" id="product_ids_wrap"></div>
                            <div class="hidden" id="isrc_ids_wrap"></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div id="date-picker"class="date-picker col-md-12">
                        <div class="pull-left">
                            <h6>{{trans "Start Date"}}:</h6>
                            <input class="btn btn-default" type="text" id="from_date">
                        </div>
                        <div class="pull-left">
                            <div class="btn-group btn-multiselect">
                                <button type="button" class="btn btn-default date-shift {{activeMonthRange from_date to_date 1}}" data-month="1">{{trans "1 Month"}}</button>
                                <button type="button" class="btn btn-default date-shift {{activeMonthRange from_date to_date 3}}" data-month="3">{{trans "3 Month"}}</button>
                                <button type="button" class="btn btn-default date-shift {{activeMonthRange from_date to_date 6}}" data-month="6">{{trans "6 Month"}}</button>
                                <button type="button" class="btn btn-default date-shift {{activeMonthRange from_date to_date 12}}" data-month="12">{{trans "1 Year"}}</button>
                                <button type="button" class="btn btn-default date-shift {{activeMonthRange from_date to_date 36}}" data-month="36">{{trans "3 Year"}}</button>
                                <button type="button" class="btn btn-default date-shift {{activeMonthRange from_date to_date allmonths}}" data-month="{{allmonths}}">{{trans "All"}}</button>
                            </div>
                        </div>
                        <div class="pull-left">
                            <h6>{{trans "End Date"}}:</h6>
                            <input class="btn btn-default" type="text" id="to_date">
                        </div>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div id="filter-by" class="col-md-12">
                        <h6>{{trans "Filter by"}}
                          <div class="paidTooltip handPointer">
                            <img src="https://cdn.theorchard.io/assets/workstation/images/redesign/info-tooltip.svg" class="info-icon">
                            <div class="tooltip top-arrow tooltip-top-position notDisplay">
                              <p>{{trans "All units include free units, which is activity by listeners who did not pay for the music (i.e. promos, free trials, non-paying subscribers). Viewing only paid units provides a better way to specifically analyze and predict where revenue is coming from."}}</p>
                            </div>
                          </div>
                        </h6>
                        <div class="row">
                            <div class="col-xs-10">
                                <div id="paid_free_ids_wrap" class="pull-left">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-default paid-free-btn {{isPaidActive paid_vs_free_ids 0}}" data-paid-free="0">{{trans "All Units"}}</button>
                                        <button type="button" class="btn btn-default paid-free-btn {{isPaidActive paid_vs_free_ids 1}}" data-paid-free="1">{{trans "Paid Units"}}</button>
                                    </div>
                                </div>
                                <div id="source_type_ids_wrap" class="pull-left"></div>
                                <div id="country_ids_wrap" class="pull-left"></div>
                            </div>
                            <div class="col-xs-2 text-right">
                            <button id="update" class="btn btn-primary">{{trans "Apply"}}</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
