<div id="{{ stat.getUniqueId() }}" class="col-lg-12 col-md-12 col-sm-12 wrapper-data">  
  <div class="wrapper-stat-dataViews row d-none">
    
    <div class="col-sm-8 offset-sm-2 display-details show-data-summary">
      <h1 class="data-title data-title-details" style="background-image: url('/img/VISIONADOS.png');">
        <button type="button" class="btn btn-sm btn-danger show-data-summary" style="float: right">{{'close'|trans}}</button>
        {{'views'|trans}}
      </h1>
    </div>

    <div class="col-sm-2 offset-sm-3 display-summary text-center">
      <h1 class="data-title text-center">{{'views'|trans}}</h1>
      <p><img class="data-image" src="/img/VISIONADOS.png"></p>
      <p><button type="button" class="btn btn-sm btn-primary show-data-details">{{'more-info'|trans}}</button></p>
    </div>

    <div class="col-sm-2 display-details"></div>
    <div class="col-sm-2 display-details"></div>
    
    <div class="col-sm-4" style="padding-left: 40px;">
      <p><span class="stat-label">{{'total-month'|trans}}:</span> <span id="top-dataViews-total">0</span></p>
      <div class="col-sm-12 row" style="margin-bottom: 30px;">
        <div class="col-sm-6">
          <div class="row">
            <div class="col-sm-4 stat-image" style="background-image: url('/img/search.svg');">
            </div>
            <div class="col-sm-8">
              <span class="stat-label">{{'views-searchs'|trans}}:</span> <span id="top-dataViews-searches">0</span>
            </div>
          </div>
        </div>
        <div class="col-sm-6">
          <div class="row">
            <div class="col-sm-4 stat-image" style="background-image: url('/img/google.svg');"></div>
            <div class="col-sm-8">
              <span class="stat-label">{{'views-maps'|trans}}:</span> <span id="top-dataViews-maps">0</span>
            </div>
          </div>
        </div>
      </div>
      <p class="display-details"><span class="stat-label">{{'local-average'|trans}}:</span> <span id="top-dataViews-average">0</span></p>
      <p><span class="stat-label">{{'compare-last-month'|trans}}:</span> <span id="top-dataViews-compareMonth">0</span></p>
      <p><span class="stat-label">{{'compare-last-year'|trans}}:</span> <span id="top-dataViews-compareLastYear">0</span></p>
    </div>
    <div class="col-sm-4 display-details" style="padding-right: 40px;">
      <canvas class="dataViews-chart"></canvas>
    </div>

    <div class="col-sm-8 offset-sm-2 display-details" style="margin-top: 20px;">
      <table class="table table-striped table-sm" id="top-dataViews-ranking">
        <thead>
          <tr>
            <th>{{'ranking'|trans}}</th>
            <th>{{'code'|trans}}</th>
            <th>{% if colDescription %}{{colDescription}}{% else %}{{'description'|trans}}{% endif %}</th>
            <th>{{'views-total'|trans}}</th>
            <th>{{'views-searchs'|trans}}</th>
            <th>{{'views-maps'|trans}}</th>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
    <hr class="col-sm-12 display-summary">    
  </div>    
</div>
