<div class="c-election-live-results{{#if status}} c-election-live-results--{{status}}{{/if}}{{#if withinMajorityRange}} c-election-live-results--majority-range{{/if}}">

  {{#if heading}}
    <div class="c-election-live-results-heading">
      <h2 class="c-election-live-results-heading__main">live results: leading + elected</h2>
      <div class="c-election-live-results-heading__sub">{{headingSub}}</div>
      <div class="c-election-live-results__refresh">
        <input id="c-election-live-results-checkbox" class="c-form__control c-form__control--checkbox"
          type="checkbox" aria-describedby="c-election-live-results-checkbox" checked>
        <label for="c-election-live-results-checkbox" class="c-form__label">Auto refresh in: <abbr title="Thirty seconds">30s</abbr></label>
      </div>
    </div>
  {{/if}}

  {{#ifCond chart "==" true}}
    <div class="c-election-live-results__majority c-election-live-results__majority--chart">
      <div class="c-election-live-results__majority__triangle"></div>
      <div class="c-election-live-results__majority__text">Line of majority (170+ seats)</div>
    </div>
    <div class="c-election-live-results__chart">
      {{#each results}}
      {{!-- Chart uses number of seats won to determine the height of each bar, in pixels --}}
      <div class="c-election-live-results__chart-item c-election-live-results__chart-item--{{this.modifier}}" style="height:{{this.seats}}px"></div>
      {{/each}}
    </div>
  {{/ifCond}}

  <a href="#" class="c-election-live-results-link">
    <ul class="c-election-live-results__parties">
      {{#each results}}
        <li class="c-election-live-results__party c-election-live-results__party--{{this.modifier}}">
          <div class="c-election-live-results__party-name--full">{{@key}}</div>
          <abbr title="{{@key}}" class="c-election-live-results__party-name--abbr">{{this.abbr}}</abbr>
          <div class="c-election-live-results__party-seats">{{this.seats}}</div>
        </li>
      {{/each}}
    </ul>

    {{#ifCond rainbow "==" true}}
      <div class="c-election-live-results__rainbow">
        {{#each results}}
        <div class="c-election-live-results__rainbow__{{this.modifier}}" style="width:{{this.percent}}%"></div>
        {{/each}}
      </div>
      <div class="c-election-live-results__majority">
        <div class="c-election-live-results__majority__triangle"></div>
        <div class="c-election-live-results__majority__text">Line of majority (170+ seats)</div>
      </div>
    {{/ifCond}}

    {{#if seeFullResults}}
      <div class="c-election-live-results__full-results">See Full Results</div>
    {{/if}}
  </a>
</div>
