<div id="{{ stat.getUniqueId() }}" class="col-lg-12 col-md-12 col-sm-12 wrapper-data">  

  <div class="wrapper-stat-dataReputation row d-none">

    <div data-element="ranking" class="col-sm-8 offset-sm-2 display-details show-data-summary">
      <h1 class="data-title data-title-details" style="background-image: url('/img/REPUTACION.png');">
        <button type="button" class="btn btn-sm btn-danger show-data-summary" style="float: right">{{'close'|trans}}</button>
        {{'reputation'|trans}}
      </h1>
    </div>

    <div data-element="ranking" class="col-sm-2 offset-sm-3 display-summary text-center">
      <h1 class="data-title text-center">{{'reputation'|trans}}</h1>
      <p><img class="data-image" src="/img/REPUTACION.png"></p>
      <p><button type="button" data-element='ranking' class="btn btn-sm btn-primary show-data-details">{{'reputation'|trans}}</button></p>
      <p><button type="button" data-element='love' class="btn btn-sm btn-primary show-data-details">{{'social-listening'|trans}}</button></p>
    </div>

    <div data-element="ranking" class="col-sm-2 display-details"></div>
    <div data-element="ranking" class="col-sm-2 display-details"></div>

    <div data-element="ranking" class="col-sm-4 display-summary" style="padding-left: 40px;">

      <div class="row">        
        <div class="col-sm-6">          
          <p>
            <span class="stat-label">{{'reviews-total'|trans}}:</span>
            <span class="top-dataReputation-totalGlobal">0</span>
          </p>

          <p>
            <span class="stat-label">{{'average-global'|trans}}:</span>
            <span class="top-dataReputation-averageScoreGlobal">
              <span class="value">0</span>
              <span class="top-score-global score-wrapper">
                <span class="score fa fa-star"></span>
                <span class="score fa fa-star"></span>
                <span class="score fa fa-star"></span>
                <span class="score fa fa-star"></span>
                <span class="score fa fa-star"></span>
              </span>
            </span>
          </p>

        </div>

        <div class="col-sm-6">
          <p>
            <span class="stat-label">{{'reviews-total-month'|trans}}:</span>
            <span class="top-dataReputation-totalMonth">0</span>
          </p>

          <p>
            <span class="stat-label">{{'average-month'|trans}}:</span>
            <span class="top-dataReputation-averageScoreMonth">
              <span class="value">0</span>
              <span class="top-score-month score-wrapper">
                <span class="score fa fa-star"></span>
                <span class="score fa fa-star"></span>
                <span class="score fa fa-star"></span>
                <span class="score fa fa-star"></span>
                <span class="score fa fa-star"></span>
              </span>
            </span>
          </p>

        </div>
      </div>

    </div>

    <div data-element="ranking" class="col-sm-8 display-details">

      <div class="row">

        <div class="col-sm-6">          
          <p>
            <span class="stat-label">{{'reviews-total-global'|trans}}:</span>
            <span class="top-dataReputation-totalGlobal">0</span>
          </p>

          <p>
            <span class="stat-label">{{'average-global'|trans}}:</span>
            <span class="top-dataReputation-averageScoreGlobal">
              <span class="value">0</span>
              <span class="top-score-global score-wrapper">
                <span class="score fa fa-star"></span>
                <span class="score fa fa-star"></span>
                <span class="score fa fa-star"></span>
                <span class="score fa fa-star"></span>
                <span class="score fa fa-star"></span>
              </span>
            </span>
          </p>

          <div id="top-dataReputation-chartGlobal">
            <canvas class="reviewsScore-pie"></canvas>
          </div>

          <div id="top-dataReputation-rankingGlobal"></div>

        </div>

        <div class="col-sm-6">
          <p>
            <span class="stat-label">{{'reviews-total-month'|trans}}:</span>
            <span class="top-dataReputation-totalMonth">0</span>
          </p>

          <p>
            <span class="stat-label">{{'average-month'|trans}}:</span>
            <span class="top-dataReputation-averageScoreMonth">
              <span class="value">0</span>
              <span class="top-score-month score-wrapper">
                <span class="score fa fa-star"></span>
                <span class="score fa fa-star"></span>
                <span class="score fa fa-star"></span>
                <span class="score fa fa-star"></span>
                <span class="score fa fa-star"></span>
              </span>
            </span>
          </p>

          <div id="top-dataReputation-chartMonth">
            <canvas class="reviewsScore-pie"></canvas>
          </div>

          <div id="top-dataReputation-rankingMonth"></div>

        </div>
      </div>

      <div class="row" style="display: none;">
        <pre class="col-sm-6" id="log-global">
        </pre>
        <pre class="col-sm-6" id="log-month">
        </pre>
      </div>

    </div>

    <!-- Tipologias -->
    <div data-element="love" class="col-sm-8 offset-sm-2 display-details show-data-summary">
      <h1 class="data-title data-title-details" style="background-image: url('/img/REPUTACION.png');">
        <button type="button" class="btn btn-sm btn-danger show-data-summary" style="float: right">{{'close'|trans}}</button>
        {{'social-listening'|trans}}
      </h1>
    </div>

    <div data-element="love" class="col-sm-7 display-details" style="margin: auto; padding: 0px;">
      <h3 style="padding-left: 40px; margin-top: 10px;">{{'historic'|trans}}</h3>
      <canvas class="dataTipologiesGlobal-chart"></canvas>
    </div>

    <div data-element="love" class="col-sm-7 display-details" style="margin: auto; padding: 0px;">
      <h3 style="padding-left: 40px; margin-top: 10px;">{{'monthly'|trans}}</h3>
      <canvas class="dataTipologiesMonth-chart"></canvas>
    </div>

    <div data-element="love" class="col-sm-6 offset-sm-3 display-details" style="margin-top: 20px;">     

      <div class="col-sm-12">
        <table class="table table-sm">
          <thead>
            <tr>
              <th style="border-right: 2px solid #dee2e6;">Reviews Data</th>
              <th style="text-align: center;">{{'total-global'|trans}}</th>
              <th style="border-right: 2px solid #dee2e6; text-align: center;">{{'average-global-short'|trans}}</th>
              <th style="text-align: center;">{{'total-month'|trans}}</th>
              <th style="border-right: 2px solid #dee2e6; text-align: center;">{{'average-month-short'|trans}}</th>
            </tr>
          </thead>
          <tbody id="stats-tipologies">
          </tbody>
        </table>
      </div>

    </div>

  </div>

</div>



<script id="template-stat-rankings" type="text/x-handlebars-template">
  {% verbatim %}    
    {{#each rankings}}
    <table class="table table-sm table-bordered ranking col-md-12">
    <thead>
      <tr><th>Top</th><th>{% endverbatim %}{{'code'|trans}}{% verbatim %}</th><th>{% endverbatim %}{{'description'|trans}}{% verbatim %}</th><th>{% endverbatim %}{{'score'|trans}}{% verbatim %}</th><th>{% endverbatim %}{{'reviews'|trans}}{% verbatim %}</th></tr>
    </thead>
    <tbody>
      {{#each locations}}
        <tr class="{{../className}} {{#flagMedium}}medium-location{{/flagMedium}}">
          <td>{{inc @index}}</td>
          <td>{{code}}</td>
          <td>{{descriptionField}}</td>
          <td>{{scoreFormat}}</td>
          <td>{{totalReviews}}</td>          
        </tr>          
      {{/each}}        
     <tbody>
  </table>
  {{/each}}
  {% endverbatim %}
</script>

<script id="template-stat-tipology" type="text/x-handlebars-template">
{% verbatim %}  
<tr><td style='border-right: 2px solid #dee2e6;'><strong>{{tipology}}</strong></td><td style='text-align: center;'>{{totalGlobal}}</td><td style='border-right: 2px solid #dee2e6; text-align: center;'>{{scoreGlobal}}</td><td style='text-align: center;'>{{totalMonth}}</td><td style='border-right: 2px solid #dee2e6; text-align: center;'>{{scoreMonth}}</td></tr> 
{% endverbatim %}
</script>
