{% for data in datas %}
{% set totalValue = data.prmotionRatio + data.socialRatio + data.entRatio %}
{% set prmotionRatioWid = 25 + ((data.prmotionRatio / totalValue) * 25) %}
{% set socialRatioWid = 25 + ((data.socialRatio / totalValue) * 25) %}
{% set entRatioWid = 25 + ((data.entRatio / totalValue) * 25) %}
{% set prmotionRatioValue = (data.prmotionRatio / totalValue) * 100 %}
{% set socialRatioValue = (data.socialRatio / totalValue) * 100 %}
{% set entRatioValue = (data.entRatio / totalValue) * 100 %}

{% set maxA = (prmotionRatioValue + socialRatioValue)|round %}
{% set valA = prmotionRatioValue|round %}
{% set minA = 0 %}
{% set widA = "calc(" ~ (maxA / 2) ~ "% - 4px + 9px)" %}
{% set minB = prmotionRatioValue|round %}
{% set maxB = 100 %}
{% set valB = (prmotionRatioValue|round + socialRatioValue)|round %}
{% set widB = "calc(" ~ ((maxB - minB) / 2) ~ "% - 4px + 9px)" %}
{% if maxB - minB == 0 %}
  {% set widB = "calc(4px + 9px + 5px)" %}
{% endif %}
<div id="contentTop">
  <h2>{{ data.locationTitle }}</h2>
</div>
<div class="block-location-ratio">
  <table id="golf-sliders">
    <tbody>
    <tr class="label-views-table">
      <td class="label-field-promotion-ratio-value" style="width: {{ entRatioWid ~ '%' }}">Promotional</td>
      <td class="label-field-social-ratio-value" style="width: {{ socialRatioWid ~ '%' }}">Social Media</td>
      <td class="label-field-ent-ratio-value" style="width: {{ entRatioWid ~ '%' }}">Entertainment</td>
    </tr>
    <tr class="percentage-views-table">
      <td class="percentage-field-promotion-ratio-value">{{ prmotionRatioValue|round ~ '%' }}</td>
      <td class="percentage-field-social-ratio-value">{{ socialRatioValue|round ~ '%' }}</td>
      <td class="percentage-field-ent-ratio-value">{{ entRatioValue|round ~ '%' }}</td>
    </tr>
    </tbody>
  </table>
  <div id="golf-range-container">
    <input type="range" id="golf-range-1" class="major-slider" min="{{ minA }}" max="{{ maxA }}" step="1" value="{{ valA }}" style="width: {{ widA }};">
    <input type="range" id="golf-range-2" class="major-slider" min="{{ minB }}" max="{{ maxB }}" step="1" value="{{ valB }}" style="width: {{ widB }};">
  </div>
</div>
{% endfor %}