{#
/**
 * @file
 * CSS-only horizontal bar chart showing vote share per party.
 *
 * Variables:
 *   - parties: array of party data, each containing:
 *     - full_name: full party name
 *     - abbr: party abbreviation in uppercase (decorative, mobile display)
 *     - colour: bar background colour (hex)
 *     - votes: total votes cast for this party
 *     - share: percentage share of total votes (float, 1 decimal)
 *   - total_votes: pre-formatted total vote count string
 */
#}
<figure class="vote-share-chart">

  <h2>{{ "Overall vote share"|t }}</h2>
  <p class="vote-share-chart__total">{{ "Total votes @total"|t({'@total': total_votes}) }}</p>

  <table class="election-h-chart election-h-chart--vote-share">
    <thead>
      <tr>
        <th scope="col">{{ "Party"|t }}</th>
        <th scope="col">{{ "Vote share"|t }}</th>
        <th scope="col" class="election-h-chart__votes-col">{{ "Votes"|t }}</th>
      </tr>
    </thead>
    <tbody>
      {% for party in parties %}
        <tr>
          <th scope="row" class="election-h-chart__label">
            {# Full name always in accessibility tree; abbreviation decorative. #}
            <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>
          <td class="election-h-chart__bar-cell">
            <div class="election-h-chart__bar-inner">
              <div class="election-h-chart__bar" style="width: {{ party.share }}%; background-color: {{ party.colour }};"></div>
              <span class="election-h-chart__value">{{ party.share }}%</span>
            </div>
          </td>
          <td class="election-h-chart__votes">{{ party.votes|number_format }}</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>

</figure>
