{#
/**
 * @file
 * CSS-only horizontal bar chart showing seats won per party.
 *
 * Variables:
 *   - parties: array of party data, each containing:
 *     - full_name: full party name
 *     - abbr: party abbreviation in uppercase
 *     - colour: bar background colour (hex)
 *     - seats: number of seats won
 *   - max_seats: highest seat count, used to scale bar widths
 */
#}
<table class="election-h-chart election-h-chart--results">
  <thead>
    <tr>
      <th scope="col">{{ "Party"|t }}</th>
      <td></td>
      <th scope="col" class="election-h-chart__seats-col">{{ "Seats"|t }}</th>
    </tr>
  </thead>
  <tbody>
    {% for party in parties %}
      {% set is_winner = party.seats == max_seats %}
      <tr>
        <th scope="row" class="election-h-chart__label">
          <span class="election-h-chart__name-full">{{ party.full_name }}</span>
          <span class="election-h-chart__name-abbr" aria-hidden="true">{{ party.abbr }}</span>
        </th>
        {% set pct = (party.seats / max_seats * 100)|round(4) %}
        <td class="election-h-chart__bar-cell" style="background: linear-gradient(to right, {{ party.colour }} {{ pct }}%, #f5f5f5 {{ pct }}%);">
        </td>
        <td class="election-h-chart__seats{{ is_winner ? ' election-h-chart__seats--winner' : '' }}">
          {{ party.seats }}
        </td>
      </tr>
    {% endfor %}
  </tbody>
</table>
