<div class="widget" id="consent-view">
  <div class="cly-button-menu consent-users-menu" tabindex="1">
      <a class="item view-history"><i class="fa fa-arrow-right"></i><span data-localize="consent.go-history"></span></a>
      <a class="item export-user"><i class="fa fa fa-upload"></i><span data-localize="app-users.export-userdata"></span></a>
      <a class="item export-download"><i class="fa fa-download"></i><span data-localize="app-users.download-export"></span></a>
      <a class="item export-delete"><i class="fa fa-trash"></i><span data-localize="app-users.delete-export"></span></a>
      <a class="item delete-user"><i class="fa fa-user-times"></i><span data-localize="app-users.delete-userdata"></span></a>
  </div>
    <div id="tabs">
        <ul>
            <li><a href="#consent-metrics" data-localize="consent.metrics"></a></li>
            <li><a href="#consent-users" data-localize="users.title"></a></li>
            <li><a href="#consent-history" data-localize="consent.history"></a></li>
        </ul>
        <div id="consent-metrics" class='consent-tab'>
            <div class="widget-header include-dateselector">
                <div class="left">
                    <div style="overflow: auto">
                        <div class="title small" data-localize="consent.data-compliance"></div>
                    </div>
                    <div style="width:300px; display: block;">
                    <div class="cly-select float filter0-segmentation">
                        <div class="select-inner">
                            <div class="text-container">
                                <div class="text">{{active-filter0}}</div>
                            </div>
                            <div class="right combo"></div>
                        </div>
                        <div class="select-items square" style="width:220px;">
                            <div>
                                {{#eachOfObject filter0}}
                                <div data-value="{{property}}" class="segmentation-option item">{{value}}</div>
                                {{/eachOfObject}}
                            </div>
                        </div>
                    </div>
                    </div>
                </div>
                {{> date-selector }}
            </div>
            <div class="graph-description" style="line-height: 17px;" data-localize="consent.metrics-desc"></div>
            <div class="widget-content help-zone-vb" data-help-localize="{{{chart-helper}}}" style="height:320px; padding-top:20px;">
                <div id="dashboard-graph" class="graph" style="height:300px;"></div>
            </div>
            {{#if big-numbers}}
            <div class="widget-footer big-numbers-v2">
                <div id="big-numbers-container">
                    {{#each big-numbers.items}}
                    <div class="big-numbers two-columns help-zone-vs" data-help-localize="help.{{this.help}}">
                        <div class="inner">
                            <div class="color"></div>
                            <div class="select">{{this.title}}</div>
                            <div><div style='display:inline-block;position:relative;'>
                                <div class="number">{{getFormattedNumber this.total}}</div>
                                <div class="trend {{this.trend}} {{this.additionalStyle}}">
                                    {{#ifCond this.trend "==" "u"}}
                                    <i class="material-icons">trending_up</i>
                                    {{else}}
                                    <i class="material-icons">trending_down</i>
                                    {{/ifCond}}
                                    <span>{{this.change}}</span>
                                </div></div>
                            </div>
                        </div>
                    </div>
                    {{/each}}
                </div>
            </div>
            {{/if}}
            <div class="widget-content help-zone-vb" data-help-localize="{{{chart-helper}}}" style="height:395px; margin-top:20px;">
                <div id="dashboard-export-graph">
                    <div class="data">
                        <div class="name">{{exports.title}}</div>
                        <div class="trend {{exports.trend}}">
                            {{#ifCond exports.trend "==" "u"}}
                            <i class="material-icons">trending_up</i>
                            {{else}}
                            <i class="material-icons">trending_down</i>
                            {{/ifCond}}
                            <span>{{exports.change}}</span>
                        </div>
                        <div class="number">{{getFormattedNumber exports.total}}</div>
                    </div>
                    <div class="graph"></div>
                </div>
                <div id="dashboard-purge-graph">
                    <div class="data">
                        <div class="name">{{purges.title}}</div>
                        <div class="trend {{purges.trend}} inverse-trend">
                            {{#ifCond purges.trend "==" "u"}}
                            <i class="material-icons">trending_up</i>
                            {{else}}
                            <i class="material-icons">trending_down</i>
                            {{/ifCond}}
                            <span>{{purges.change}}</span>
                        </div>
                        <div class="number">{{getFormattedNumber purges.total}}</div>
                    </div>
                    <div class="graph"></div>
                </div>
            </div>
        </div>
        <div id="consent-users" class='consent-tab'>
            <div class="widget-header">
                <div class="left">
                    <div class="title" data-localize="users.title"></div>
                </div>
            </div>
            <div class="graph-description" style="border-bottom: none; line-height: 17px;" data-localize="consent.users-desc"></div>
            <table id="d-table-users" class="d-table sortable help-zone-vb" cellpadding="0" cellspacing="0" data-help-localize="{{{table-helper}}}"></table>
        </div>
        <div id="consent-history" class='consent-tab'>
            <div class="widget-header include-dateselector">
                <div class="left">
                    <div style="overflow: auto">
                        {{#if filter1}}
                        <div class="title small" data-localize="consent.history"></div>
                        {{else}}
                        <div class="title" data-localize="consent.history"></div>
                        {{/if}}
                    </div>
                    {{#if filter1}}
                    <div style="width:300px; display: block;">
                    <div class="cly-select float filter1-segmentation">
                        <div class="select-inner">
                            <div class="text-container">
                                <div class="text">{{active-filter1}}</div>
                            </div>
                            <div class="right combo"></div>
                        </div>
                        <div class="select-items square" style="width:220px;">
                            <div>
                                {{#eachOfObject filter1}}
                                <div data-value="{{property}}" class="segmentation-option item">{{value}}</div>
                                {{/eachOfObject}}
                            </div>
                        </div>
                    </div>
                    {{#if filter2}}
                    <div class="cly-select float filter2-segmentation">
                        <div class="select-inner">
                            <div class="text-container">
                                <div class="text">{{active-filter2}}</div>
                            </div>
                            <div class="right combo"></div>
                        </div>
                        <div class="select-items square" style="width:220px;">
                            <div>
                                {{#eachOfObject filter2}}
                                <div data-value="{{property}}" class="segmentation-option item">{{value}}</div>
                                {{/eachOfObject}}
                            </div>
                        </div>
                    </div>
                    {{/if}}
                    </div>
                    {{/if}}
                </div>
            </div>
            <div class="graph-description" style="border-bottom: none; line-height: 17px;" data-localize="consent.history-desc"></div>
            <table id="d-table-history" class="d-table sortable help-zone-vb" cellpadding="0" cellspacing="0" data-help-localize="{{{table-helper}}}"></table>
        </div>
    </div>
</div>
