<style>
table.ranking-gmb {
  border-collapse: separate;
}

table.ranking-gmb td {
  padding: 5px 5px;
}

table.ranking-gmb th {
  padding: 10px 5px;
  font-weight: normal;
  font-size: 13px;
}

.reputation-ranking td,
.reputation-ranking th {
  padding: 3px;
  text-align: center;
  font-size: 11px;
}

.reputation-ranking td {
  font-size: 11px;
}

.reputation-ranking tr.red {
  background-color: #F5426E;
}

.reputation-ranking tr.redsemi {
  background-color: #FCDBE3;
}

.reputation-ranking tr.green {
  background-color: #49DBA2;
}

.reputation-ranking tr.greensemi {
  background-color: #D2F6E9;
}

.reputation-ranking tr.yellow {
  background-color: #F7C202;
}

.reputation-ranking tr.yellowsemi {
  background-color: #FFF7D8;
}

.reputation-reviews-number-green {
  padding: 2px 10px;
  border-radius: 10px;
  text-align: center;
  background-color: #D2F6E9;
  color: #49DBA2;
}

.reputation-reviews-number-yellow {
  padding: 2px 10px;
  border-radius: 10px;
  text-align: center;
  background-color: #FFF7D8;
  color: #F7C202;
}

.reputation-reviews-number-red {
  padding: 2px 10px;
  border-radius: 10px;
  text-align: center;
  background-color: #FCDBE3;
  color: #F5426E;
}

.reputation-reviews-title-wrapper {
  padding: 20px 0px;
  background-color: #EFEFEF;
}

.reputation-reviews-data-wrapper {
  padding-top: 10px;
  font-size: 16px;
}

.reputation-reviews-title {
  font-weight: bold;
  font-size: 16px;
}

.reputation-reviews-quantity {
  font-weight: bold;
  font-size: 50px;
}

</style>

<table style="margin: auto;">
  <col style="width:690;">
  <col style="width:690;">
  <tr>
      <td>
        <!-- GLOBAL -->
        <table style="margin: auto;">
          <col style="width:325">
          <col style="width:325">
          <tr>
            <td style="height: 400px; text-align: center;">
              {% if data['reputation-global-data-graph'].img %}
                <img src="{{data['reputation-global-data-graph'].img}}" style="display: block;">
              {% endif %}
            </td>
            <td style="height: 400px;">
              <table class="reputation-reviews-title-wrapper">
                <col style="width:320">
                <tr>
                  <td>
                    <table>
                      <col style="width:310">
                      <tr>
                        <td class="reputation-reviews-title" style="text-align: center;">{{'reviews-total-global'|trans}}</td>
                      </tr>
                      <tr>
                        <td class="reputation-reviews-quantity" style="text-align: center;">{{data['reputation-reviews-global'].reviews.formatted}}</td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
              <div class="reputation-reviews-data-wrapper">
                <table>
                  <col style="width:160">
                  <col style="width:150">
                  <tr>
                    <td style="color: #666">
                      <table><tr><td><table><tr><td><img src="img/pdf/circle-green.png" >  {{'positive'|trans}}</td></tr></table></td></tr></table>
                    </td>
                    <td>
                      <div style="text-align: right;">
                        <table cellpadding="0" cellspacing="0">
                          <col style="width: 80">
                          <col style="width: 70">
                          <tr>
                            <td style="text-align: right;">
                              <table style="width: 100%"><tr><td class="reputation-reviews-number-green">{{data['reputation-global-data-graph'].data.positive.value.formatted}}</td></tr></table>
                            </td>
                            <td style="text-align: right; padding-left: 5px;">
                              <table><tr><td>
                                / {{data['reputation-global-data-graph'].data.positive.percent.formatted}}
                              </td></tr></table>
                            </td>
                          </tr>
                        </table>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td style="color: #666">
                      <table><tr><td><table><tr><td><img src="img/pdf/circle-yellow.png" >  {{'neutral'|trans}}</td></tr></table></td></tr></table>
                    </td>
                    <td>
                      <div>
                        <table cellpadding="0" cellspacing="0">
                          <col style="width: 80">
                          <col style="width: 70">
                          <tr>
                            <td>
                              <table><tr><td class="reputation-reviews-number-yellow">{{data['reputation-global-data-graph'].data.neutral.value.formatted}}</td></tr></table>
                            </td>
                            <td style="text-align: right; padding-left: 5px;">
                              <table><tr><td>
                                / {{data['reputation-global-data-graph'].data.neutral.percent.formatted}}
                              </td></tr></table>
                            </td>
                          </tr>
                        </table>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td style="color: #666">
                      <table><tr><td><table><tr><td><img src="img/pdf/circle-red.png" >  {{'negative'|trans}}</td></tr></table></td></tr></table>
                    </td>
                    <td>
                      <div style="text-align: right;">
                        <table cellpadding="0" cellspacing="0">
                          <col style="width: 80">
                          <col style="width: 70">
                          <tr>
                            <td style="text-align: right;">
                              <table style="width: 100%"><tr><td class="reputation-reviews-number-red">{{data['reputation-global-data-graph'].data.negative.value.formatted}}</td></tr></table>
                            </td>
                            <td style="text-align: right; padding-left: 5px;">
                              <table><tr><td>
                                / {{data['reputation-global-data-graph'].data.negative.percent.formatted}}
                              </td></tr></table>
                            </td>
                          </tr>
                        </table>
                      </div>
                    </td>
                  </tr>
                </table>
              </div>
            </td>
          </tr>
          <tr>
            <td style="text-align: center;font-size:11px;">{{'best-of-the-global'|trans}}</td>
            <td style="text-align: center;font-size:11px;">{{'worst-of-the-global'|trans}}</td>
          </tr>
          <tr>
            <td style="height: 200px; vertical-align: top; padding-right: 5px; border-right: 1px solid #ccc">
              {% include 'pdf/tables/reputation/'~ data["table_format"] ~'.twig' with {'locations': data['reputation-global-ranking'].top, 'color': 'green' } %}
            </td>
            <td style="height: 200px; vertical-align: top">
              {% include 'pdf/tables/reputation/'~ data["table_format"] ~'.twig' with {'locations': data['reputation-global-ranking'].noTop, 'color': 'red' } %}
            </td>
          </tr>
        </table>
      </td>
      <td>
        <!-- MENSUAL -->
        <table style="margin: auto;">
          <col style="width:325">
          <col style="width:325">
          <tr>
            <td style="height: 400px; text-align: center">
              {% if data['reputation-month-data-graph'].img %}
                <img src="{{data['reputation-month-data-graph'].img}}" style="display: block;">
              {% endif %}
            </td>
            <td style="height: 400px;">
              <table class="reputation-reviews-title-wrapper">
                <col style="width:320">
                <tr>
                  <td>
                    <table>
                      <col style="width:310">
                      <tr>
                        <td class="reputation-reviews-title" style="text-align: center;">{{'reviews-total-month'|trans}}</td>
                      </tr>
                      <tr>
                        <td class="reputation-reviews-quantity" style="text-align: center;">{{data['reputation-reviews-month'].reviews.formatted}}</td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
              <div class="reputation-reviews-data-wrapper">
                <table>
                  <col style="width:160">
                  <col style="width:150">
                  <tr>
                    <td style="color: #666">
                      <table><tr><td><table><tr><td><img src="img/pdf/circle-green.png" >  {{'positive'|trans}}</td></tr></table></td></tr></table>
                    </td>
                    <td>
                      <div style="text-align: right;">
                        <table cellpadding="0" cellspacing="0">
                          <col style="width: 80">
                          <col style="width: 70">
                          <tr>
                            <td>
                              <table style="float: right;"><tr><td class="reputation-reviews-number-green">{{data['reputation-month-data-graph'].data.positive.value.formatted}}</td></tr></table>
                            </td>
                            <td style="text-align: right; padding-left: 5px;">
                              <table><tr><td>
                                / {{data['reputation-month-data-graph'].data.positive.percent.formatted}}
                              </td></tr></table>
                            </td>
                          </tr>
                        </table>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td style="color: #666">
                      <table><tr><td><table><tr><td><img src="img/pdf/circle-yellow.png" >  {{'neutral'|trans}}</td></tr></table></td></tr></table>
                    </td>
                    <td>
                      <div>
                        <table cellpadding="0" cellspacing="0">
                          <col style="width: 80">
                          <col style="width: 70">
                          <tr>
                            <td>
                              <table><tr><td class="reputation-reviews-number-yellow">{{data['reputation-month-data-graph'].data.neutral.value.formatted}}</td></tr></table>
                            </td>
                            <td style="text-align: right; padding-left: 5px;">
                              <table><tr><td>
                                / {{data['reputation-month-data-graph'].data.neutral.percent.formatted}}
                              </td></tr></table>
                            </td>
                          </tr>
                        </table>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td style="color: #666">
                      <table><tr><td><table><tr><td><img src="img/pdf/circle-red.png" >  {{'negative'|trans}}</td></tr></table></td></tr></table>
                    </td>
                    <td>
                      <div style="text-align: right;">
                        <table cellpadding="0" cellspacing="0">
                          <col style="width: 80">
                          <col style="width: 70">
                          <tr>
                            <td style="text-align: right;">
                              <table style="width: 100%"><tr><td class="reputation-reviews-number-red">{{data['reputation-month-data-graph'].data.negative.value.formatted}}</td></tr></table>
                            </td>
                            <td style="text-align: right; padding-left: 5px;">
                              <table><tr><td>
                                / {{data['reputation-month-data-graph'].data.negative.percent.formatted}}
                              </td></tr></table>
                            </td>
                          </tr>
                        </table>
                      </div>
                    </td>
                  </tr>
                </table>
              </div>
            </td>
          </tr>
          <tr>
            <td style="text-align: center;font-size:11px;">{{'best-of-the-month'|trans}}</td>
            <td style="text-align: center;font-size:11px;">{{'worst-of-the-month'|trans}}</td>
          </tr>
          <tr>
            <td style="height: 200px; vertical-align: top; padding-right: 5px; border-right: 1px solid #ccc">
              {% include 'pdf/tables/reputation/'~ data["table_format"] ~'.twig' with {'locations': data['reputation-month-ranking'].top, 'color': 'green' } %}
            </td>
            <td style="height: 200px; vertical-align: top">
              {% include 'pdf/tables/reputation/'~ data["table_format"] ~'.twig' with {'locations': data['reputation-month-ranking'].noTop, 'color': 'red' } %}
            </td>
          </tr>
        </table>
      </td>
  </tr>
</table>
