{#
/**
 * @file
 * CSS-only horizontal bar chart showing votes cast per candidate.
 *
 * Variables:
 *   - candidates: array of candidate data, each containing:
 *     - name: formatted candidate name (Forename SURNAME)
 *     - party_name: full party name
 *     - colour: party background colour (hex)
 *     - votes: votes cast for this candidate
 */
#}
<table class="election-h-chart election-h-chart--area-vote">
  <tbody>
    {% for candidate in candidates %}
      {% if candidate.votes > 0 %}
        <tr style="--party-colour: {{ candidate.colour }};">
          <th scope="row" class="election-h-chart__label">
            <span class="election-h-chart__candidate">{{ candidate.name }}</span>
            <span class="election-h-chart__party">{{ candidate.party_name }}</span>
          </th>
          <td class="election-h-chart__bar-cell">
            <div class="election-h-chart__bar-inner">
              <div class="election-h-chart__bar" style="width: {{ candidate.share }}%; background-color: {{ candidate.colour }};"></div>
              <span class="election-h-chart__value">{{ candidate.votes|number_format }}</span>
            </div>
          </td>
        </tr>
      {% endif %}
    {% endfor %}
  </tbody>
</table>
