<table style="margin: auto">
  <tr>
    <td style="height: 460px; text-align: center;">
      {% if data['typology-data-graph'].img %}
        <img src="{{data['typology-data-graph'].img}}">
      {% endif %}
    </td>
  </tr>
  <tr>
    <td>
      <table cellpadding=0 cellspacing=0 style="margin: auto">
        <tr>
          <td style="height:60px; vertical-align: middle;padding-right:20px;text-transform:uppercase;">{{'global'|trans}}</td>
        {% for typology in data['typology-global'] |slice(0, 8)%}
          <td style="height:80px; vertical-align: bottom;">
            <table>
              <tr>
                <td style="text-align: center;">
                  <img src="img/pdf/typologies/{% if typology.image %}{{typology.name}}{% else %}typology{% endif %}_{{typology.color}}.png" style="width: 20px">
                  <span style="font-weight: bold; text-transform: uppercase; font-size: 15px;">
                    {{typology.transName|length > 10 ? typology.transName|replace({' ': '<br>','_': '<br>'})|raw : typology.transName}}
                  </span>
                </td>
              </tr>
              <tr>
                <td style="width: 130;">
                  <table cellspacing=0 cellpadding=0 style="border-radius: 5px; background-color: #f2f2f2">
                    <tr>
                      <td style="text-align: center; width: 110px; padding: 5px 10px 0px 10px">
                        <span style="font-size:30px; font-weight:bold;">{{typology.reviews.formatted}}</span>
                      </td>
                    </tr>
                    <tr>
                      <td style="text-align: center; padding: 5px 10px 5px 10px">
                        <span style="font-size:16px; font-weight: bold;">{{typology.score.formatted}}</span>
                        <span style="margin-top: 3px">
                          {% if typology.stars.fill > 0 %}
                            {% for i in range(1, typology.stars.fill) %}
                              <img style="width: 12px" src="img/pdf/star-small-grey.png">
                            {% endfor %}
                          {% endif %}
                          {% if typology.stars.unfill > 0 %}
                            {% for i in range(1, typology.stars.unfill) %}
                              <img style="width: 12px" src="img/pdf/star-small-unfill-grey.png">
                            {% endfor %}
                          {% endif %}
                        </span>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
         {% endfor %}
        </tr>
        <tr>
          <td style="height:80px; padding-right:20px;text-transform:uppercase;">{{'monthly'|trans}}</td>
          {% for typology in data['typology-month'] |slice(0, 8)%}
          <td style="height:80px">
            <table>
              <tr>
                <td style="width: 130;">
                  <table cellspacing=0 cellpadding=0 style="border-radius: 5px; background-color: #f2f2f2">
                    <tr>
                      <td style="text-align: center; width: 110px; padding: 5px 10px 0px 10px">
                        <span style="font-size:30px; font-weight:bold;">{{typology.reviews.formatted}}</span>
                      </td>
                    </tr>
                    <tr>
                      <td style="text-align: center; padding: 5px 10px 5px 10px">
                        <span style="font-size:16px; font-weight: bold;">{{typology.score.formatted}}</span>
                        <span style="margin-top: 3px">
                          {% if typology.stars.fill > 0 %}
                            {% for i in range(1, typology.stars.fill) %}
                              <img style="width: 12px" src="img/pdf/star-small-grey.png">
                            {% endfor %}
                          {% endif %}
                          {% if typology.stars.unfill > 0 %}
                            {% for i in range(1, typology.stars.unfill) %}
                              <img style="width: 12px" src="img/pdf/star-small-unfill-grey.png">
                            {% endfor %}
                          {% endif %}
                        </span>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
         {% endfor %}
        </tr>
      </table>
    </td>
  </tr>
</table>