<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: 12px;
}

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

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

.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: 5px 0px;
  background-color: #EFEFEF;
}

.reputation-reviews-data-wrapper {
  padding-top: 5px;
  font-size: 14px;
}

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

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

.arrow-icon {
  width: 15px;
  height: 15px;
}

.arrow-big .arrow-icon {
  width: 30px;
  height: 30px;
}

</style>

<page backimg="img/pdf/background.jpg">

  <table>
    <col style="width:1430">    
    <tr>
      <td style="height: 791px; color: #FFF; text-transform: uppercase; text-align: center;">
        <br />
        <br />
        <span style="font-size: 50px; font-weight: bold; text-transform: uppercase">{{'report'|trans}}</span>
        <br />
        <br />
        <span style="font-size: 45px;">{{data.date|localizeddate('none', 'none', actualLocale, null, 'MMMM yyyy')}}</span>
        <br />
        <br />
        <br />
        <span style="font-size: 45px;">{{data.title}}</span>
      </td>
    </tr>    
  </table>

</page>

{% for page in data.pagination %}

<page>

  <table>
    <col style="width:1430">    
    <tr>
      <td style="height: 53px; background-color: #0d2634; color: #FFF; text-transform: uppercase; text-align: center; font-size: 30px; line-height: 53px; font-weight: bold;">{{data.title}}</td>
    </tr>
    <tr>
      <td style="height: 673px;">
        <table style="margin: auto;" cellspacing="0">
          <col style="width:220;">
          <col style="width:220;">
          <col style="width:220;">
          <col style="width:220;">
          <col style="width:220;">
          {# TITLES #}          
          <tr>
            <td></td>
            <td>
              <table style="margin: auto;">
                <col style="width: 50">
                <tr>
                  <td style="height:60; text-align: center;">
                    <img width=55 src="img/pdf/reputation.png">
                  </td>
                  <td style="height:60">
                    <span style="font-size: 20px; font-weight: lighter; text-transform: uppercase">{{'reputation'|trans}}</span>
                  </td>
                </tr>
              </table>
            </td>
            <td >
              <table style="margin: auto;">
                <col style="width: 50">
                <tr>
                  <td style="height:60; text-align: center;">
                    <img width=55 src="img/pdf/reputation.png">
                  </td>
                  <td style="height:60">
                    <span style="font-size: 20px; font-weight: lighter; text-transform: uppercase">TIPOLOGÍA DE COMENTARIO</span>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          {# SUBTITLES #}
          <tr>
            <td style="height: 30px"></td>
            <td style="height: 30px">
              <table style="margin: auto">
                <col style="width: 90">
                <col style="width: 90">
                <tr>
                  <td style="text-align: center;"><span style="font-weight: bold;text-transform: uppercase;">{{'global'|trans}}</span></td>
                  <td style="text-align: center;"><span style="font-weight: bold;text-transform: uppercase;">{{'month'|trans}}</span></td>
                </tr>
              </table>
            </td>
            <td style="height: 30px">
              <table style="margin: auto">
                <col style="width: 90">
                <col style="width: 90">
                <tr>
                  {% for tipologia in data.pagination[0].groups[0].calculation['evolution-reputation-monthly-typology'].tipologiasUnicas %}
                  {% if tipologia != 'MEDIA' %}
                      <td style="text-align: center;padding:4px;width: 90px;">{{ tipologia | default("-") }}</td>
                  {% endif %}
                  {% endfor %}
                </tr>
              </table>
            </td>
          </tr>
          {# GROUPS #}
          {% for group in page.groups %}
            <tr>
              <td style="border-right: 2px solid #0d2634; height: 100px; text-align: center;">
                <span style="font-size: 25px; font-weight: bold; text-transform: uppercase">{{group.title}}</span>
              </td>
              <td style="border-right: 2px solid #0d2634; text-align: center;">
                <table style="margin: auto">
                  <col style="width: 90">
                  <col style="width: 90">
                  <tr>
                    <td style="text-align: center;">
                      <table>
                        <tr>
                          <td>
                            {% if group.calculation['reputation-reviews-global'].score.original > 0 %}
                            <img src="img/pdf/comparative-circle-{{group.calculation['reputation-reviews-global'].color}}.png" >
                            {% endif %}
                          </td>
                          <td><span style="font-size: 28px; font-weight: bold;">{{group.calculation['reputation-reviews-global'].score.formatted}}</span></td>
                        </tr>
                        <tr>
                          <td colspan="2"><span style="font-size: 20px; font-weight: bold;">{{group.calculation['reputation-reviews-global'].reviews.formatted}}</span></td>
                        </tr>
                      </table>
                    </td>
                    <td style="text-align: center;">
                      <table>
                        <tr>
                          <td>
                            {% if group.calculation['reputation-reviews-month'].score.original > 0 %}
                            <img src="img/pdf/comparative-circle-{{group.calculation['reputation-reviews-month'].color}}.png" >
                            {% endif %}
                          </td>
                          <td><span style="font-size: 28px; font-weight: bold;">{{group.calculation['reputation-reviews-month'].score.formatted}}</span></td>
                        </tr>
                        <tr>
                          <td colspan="2"><span style="font-size: 20px; font-weight: bold;">{{group.calculation['reputation-reviews-month'].reviews.formatted}}</span></td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
              <td style="border-right: 2px solid #0d2634;">
                <table style="margin: auto;">
                  <col style="width: 90">
                  <col style="width: 90">
                  <tr>
                  {% for tipologia in data.pagination[0].groups[0].calculation['evolution-reputation-monthly-typology'].tipologiasUnicas %}
                  {% if tipologia != 'MEDIA' %}
                  
                    <td style="text-align: center;width:105px;">
                      <span style="font-size: 24px; font-weight: bold;">{{group.calculation['evolution-reputation-monthly-typology'].data[12].tipologias[tipologia].averageScore | default("-")}}</span>
                      <br/>
                      <span style="font-size: 18px; font-weight: bold;">{{group.calculation['evolution-reputation-monthly-typology'].data[12].tipologias[tipologia].totalReviews | default("-")}}</span>
                    </td>

                    {% endif %}
                  {% endfor %}
                  </tr>
                </table>
              </td>
            </tr>
          {% endfor %}
        </table>        
      </td>
    </tr>
    <tr>
      <td style="height: 53px; background-color: #0d2634; color: #FFF; text-transform: uppercase; text-align: center; font-size: 25px; line-height: 53px; font-weight: bold;"><img src="img/pdf/logo.png" height="40"></td>
    </tr>
  </table>

</page>

{% endfor %}