<div class="c-election-bubble-chart{{#if error}} c-election-error-wrapper{{/if}}">

  {{#if error}}
    {{> election/error}}
  {{/if}}

  <h3 class="c-election-bubble-chart__hed">Provincial Breakdown</h3>

  <div class="u-visually-hidden">
    <p>Bubble charts by Canadian provinces and territories listed from east to west.</p>
  </div>

  <div class="c-election-bubble-chart__grid-container c-election-bubble-chart__grid-container--east">

    <div class="c-election-bubble-chart__province c-election-bubble-chart__province--nl">
      <h4 class="c-election-bubble-chart__subhed"><abbr class="c-election-bubble-chart__abbr" title="Newfoundland">NL</abbr></h4>

      <div class="c-election-bubble-chart__bubble-group" aria-describedby="c-election-bubble-chart__bubble-group--nl__description">
        <div class="u-visually-hidden" id="c-election-bubble-chart__bubble-group--nl__description">
          <p>Results for Newfoundland:</p>
          <ul>
            {{#each NL.resultsText}}
            <li>{{ this }}</li>
            {{/each}}
          </ul>
        </div>

        {{#each NL.results}}
          <div
            class="c-election-bubble-chart__bubble{{#ifCond this.classModifier "!==" ""}} c-election-bubble-chart__bubble--{{ this.classModifier }}{{/ifCond}}"></div>
        {{/each}}
      </div>
    </div>

    <div class="c-election-bubble-chart__province c-election-bubble-chart__province--ns">
      <h4 class="c-election-bubble-chart__subhed"><abbr class="c-election-bubble-chart__abbr" title="Nova Scotia">NS</abbr></h4>

      <div class="c-election-bubble-chart__bubble-group c-election-bubble-chart__bubble-group--ns" aria-describedby="c-election-bubble-chart__bubble-group--ns__description">
        <div class="u-visually-hidden" id="c-election-bubble-chart__bubble-group--ns__description">
          <p>Results for Nova Scotia:</p>
          <ul>
            {{#each NS.resultsText}}
            <li>{{ this }}</li>
            {{/each}}
          </ul>
        </div>

        {{#each NS.results}}
        <div
          class="c-election-bubble-chart__bubble{{#ifCond this.classModifier "!==" ""}} c-election-bubble-chart__bubble--{{ this.classModifier }}{{/ifCond}}">
        </div>
        {{/each}}
      </div>
    </div>

    <div class="c-election-bubble-chart__province c-election-bubble-chart__province--pe">
      <h4 class="c-election-bubble-chart__subhed"><abbr class="c-election-bubble-chart__abbr" title="Prince Edward Island">PE</abbr></h4>
      <div class="c-election-bubble-chart__bubble-group c-election-bubble-chart__bubble-group--PE" aria-describedby="c-election-bubble-chart__bubble-group--pe__description">
        <div class="u-visually-hidden" id="c-election-bubble-chart__bubble-group--pe__description">
          <p>Results for Prince Edward Island:</p>
          <ul>
            {{#each PE.resultsText}}
            <li>{{ this }}</li>
            {{/each}}
          </ul>
        </div>

        {{#each PE.results}}
        <div
          class="c-election-bubble-chart__bubble{{#ifCond this.classModifier "!==" ""}} c-election-bubble-chart__bubble--{{ this.classModifier }}{{/ifCond}}"></div>
        {{/each}}
      </div>
    </div>

    <div class="c-election-bubble-chart__province c-election-bubble-chart__province--nb">
      <h4 class="c-election-bubble-chart__subhed"><abbr class="c-election-bubble-chart__abbr" title="New Brunswick">NB</abbr></h4>

      <div class="c-election-bubble-chart__bubble-group c-election-bubble-chart__bubble-group--nb" aria-describedby="c-election-bubble-chart__bubble-group--nb__description">
        <div class="u-visually-hidden" id="c-election-bubble-chart__bubble-group--nb__description">
          <p>Results for New Brunswick:</p>
          <ul>
            {{#each NB.resultsText}}
            <li>{{ this }}</li>
            {{/each}}
          </ul>
        </div>

        {{#each NB.results}}
        <div
          class="c-election-bubble-chart__bubble {{#ifCond this.classModifier "!==" ""}}c-election-bubble-chart__bubble--{{ this.classModifier }}{{/ifCond}}">
        </div>
        {{/each}}
      </div>
    </div>

    <div class="c-election-bubble-chart__province c-election-bubble-chart__province--qc">
      <h4 class="c-election-bubble-chart__subhed"><abbr class="c-election-bubble-chart__abbr" title="Quebec">QC</abbr></h4>

      <div class="c-election-bubble-chart__bubble-group c-election-bubble-chart__bubble-group--qc" aria-describedby="c-election-bubble-chart__bubble-group--qc__description">
        <div class="u-visually-hidden" id="c-election-bubble-chart__bubble-group--qc__description">
          <p>Results for Quebec:</p>
          <ul>
            {{#each QC.resultsText}}
            <li>{{ this }}</li>
            {{/each}}
          </ul>
        </div>

        {{#each QC.results}}
        <div
          class="c-election-bubble-chart__bubble{{#ifCond this.classModifier "!==" ""}} c-election-bubble-chart__bubble--{{ this.classModifier }}{{/ifCond}}"></div>
        {{/each}}
      </div>
    </div>

  </div>{{!-- End .c-election-bubble-chart__grid-container--east --}}

    <div class="c-election-bubble-chart__province c-election-bubble-chart__province--on">
      <h4 class="c-election-bubble-chart__subhed"><abbr class="c-election-bubble-chart__abbr" title="Ontario">ON</abbr></h4>

      <div class="c-election-bubble-chart__bubble-group c-election-bubble-chart__bubble-group--on" aria-describedby="c-election-bubble-chart__bubble-group--on__description">
        <div class="u-visually-hidden" id="c-election-bubble-chart__bubble-group--on__description">
          <p>Results for Ontario:</p>
          <ul>
            {{#each ON.resultsText}}
            <li>{{ this }}</li>
            {{/each}}
          </ul>
        </div>

        {{#each ON.results}}
        <div
          class="c-election-bubble-chart__bubble{{#ifCond this.classModifier "!==" ""}} c-election-bubble-chart__bubble--{{ this.classModifier }}{{/ifCond}}">
        </div>
        {{/each}}
      </div>
    </div>

  <div class="c-election-bubble-chart__grid-container c-election-bubble-chart__grid-container--west">
    <div class="c-election-bubble-chart__province c-election-bubble-chart__province--mb">
      <h4 class="c-election-bubble-chart__subhed"><abbr class="c-election-bubble-chart__abbr" title="Manitoba">MB</abbr></h4>

      <div class="c-election-bubble-chart__bubble-group c-election-bubble-chart__bubble-group--mb" aria-describedby="c-election-bubble-chart__bubble-group--mb__description">
        <div class="u-visually-hidden" id="c-election-bubble-chart__bubble-group--mb__description">
          <p>Results for Manitoba:</p>
          <ul>
            {{#each MB.resultsText}}
            <li>{{ this }}</li>
            {{/each}}
          </ul>
        </div>

        {{#each MB.results}}
        <div
          class="c-election-bubble-chart__bubble{{#ifCond this.classModifier "!==" ""}} c-election-bubble-chart__bubble--{{ this.classModifier }}{{/ifCond}}">
        </div>
        {{/each}}
      </div>
    </div>

    <div class="c-election-bubble-chart__province c-election-bubble-chart__province--sk">
      <h4 class="c-election-bubble-chart__subhed"><abbr class="c-election-bubble-chart__abbr" title="Saskatchewan">SK</abbr></h4>

      <div class="c-election-bubble-chart__bubble-group c-election-bubble-chart__bubble-group--sk" aria-describedby="c-election-bubble-chart__bubble-group--sk__description">
        <div class="u-visually-hidden" id="c-election-bubble-chart__bubble-group--sk__description">
          <p>Results for Saskatchewan:</p>
          <ul>
            {{#each SK.resultsText}}
            <li>{{ this }}</li>
            {{/each}}
          </ul>
        </div>

        {{#each SK.results}}
        <div
          class="c-election-bubble-chart__bubble{{#ifCond this.classModifier "!==" ""}} c-election-bubble-chart__bubble--{{ this.classModifier }}{{/ifCond}}"></div>
        {{/each}}
      </div>
    </div>

    <div class="c-election-bubble-chart__province c-election-bubble-chart__province--ab">
      <h4 class="c-election-bubble-chart__subhed"><abbr class="c-election-bubble-chart__abbr" title="Alberta">AB</abbr></h4>

      <div class="c-election-bubble-chart__bubble-group c-election-bubble-chart__bubble-group--ab" aria-describedby="c-election-bubble-chart__bubble-group--ab__description">
        <div class="u-visually-hidden" id="c-election-bubble-chart__bubble-group--ab__description">
          <p>Results for Alberta:</p>
          <ul>
            {{#each AB.resultsText}}
            <li>{{ this }}</li>
            {{/each}}
          </ul>
        </div>

        {{#each AB.results}}
        <div
          class="c-election-bubble-chart__bubble{{#ifCond this.classModifier "!==" ""}} c-election-bubble-chart__bubble--{{ this.classModifier }}{{/ifCond}}"></div>
        {{/each}}
      </div>
    </div>

    <div class="c-election-bubble-chart__province c-election-bubble-chart__province--bc">
      <h4 class="c-election-bubble-chart__subhed"><abbr class="c-election-bubble-chart__abbr" title="British Columbia">BC</abbr></h4>

      <div class="c-election-bubble-chart__bubble-group c-election-bubble-chart__bubble-group--bc" aria-describedby="c-election-bubble-chart__bubble-group--bc__description">
        <div class="u-visually-hidden" id="c-election-bubble-chart__bubble-group--bc__description">
          <p>Results for British Columbia:</p>
          <ul>
            {{#each BC.resultsText}}
            <li>{{ this }}</li>
            {{/each}}
          </ul>
        </div>

        {{#each BC.results}}
        <div
          class="c-election-bubble-chart__bubble{{#ifCond this.classModifier "!==" ""}} c-election-bubble-chart__bubble--{{ this.classModifier }}{{/ifCond}}"></div>
        {{/each}}
      </div>
    </div>

    <div class="c-election-bubble-chart__province c-election-bubble-chart__province--nu">
      <h4 class="c-election-bubble-chart__subhed"><abbr class="c-election-bubble-chart__abbr" title="Nunavut">NU</abbr></h4>
      <div class="c-election-bubble-chart__bubble-group c-election-bubble-chart__bubble-group--nu" aria-describedby="c-election-bubble-chart__bubble-group--nu__description">
        <div class="u-visually-hidden" id="c-election-bubble-chart__bubble-group--nu__description">
          <p>Results for Nunavut:</p>
          <ul>
            {{#each NU.resultsText}}
            <li>{{ this }}</li>
            {{/each}}
          </ul>
        </div>

        {{#each NU.results}}
        <div
          class="c-election-bubble-chart__bubble{{#ifCond this.classModifier "!==" ""}} c-election-bubble-chart__bubble--{{ this.classModifier }}{{/ifCond}}"></div>
        {{/each}}
      </div>
    </div>

    <div class="c-election-bubble-chart__province c-election-bubble-chart__province--nt">
      <h4 class="c-election-bubble-chart__subhed"><abbr class="c-election-bubble-chart__abbr" title="Northwest Territories">NT</abbr></h4>

      <div class="c-election-bubble-chart__bubble-group c-election-bubble-chart__bubble-group--nt" aria-describedby="c-election-bubble-chart__bubble-group--nt__description">
        <div class="u-visually-hidden" id="c-election-bubble-chart__bubble-group--nt__description">
          <p>Results for Northwest Territories:</p>
          <ul>
            {{#each NT.resultsText}}
            <li>{{ this }}</li>
            {{/each}}
          </ul>
        </div>

        {{#each NT.results}}
        <div
          class="c-election-bubble-chart__bubble{{#ifCond this.classModifier "!==" ""}} c-election-bubble-chart__bubble--{{ this.classModifier }}{{/ifCond}}"></div>
        {{/each}}
      </div>
    </div>

    <div class="c-election-bubble-chart__province c-election-bubble-chart__province--yt">
      <h4 class="c-election-bubble-chart__subhed"><abbr class="c-election-bubble-chart__abbr" title="Yukon Territory">YT</abbr></h4>
      <div class="c-election-bubble-chart__bubble-group c-election-bubble-chart__bubble-group--yt">
        <div class="u-visually-hidden" id="c-election-bubble-chart__bubble-group--yt__description">
          <p>Results for Yukon Territory:</p>
          <ul>
            {{#each YT.resultsText}}
            <li>{{ this }}</li>
            {{/each}}
          </ul>
        </div>

        {{#each YT.results}}
        <div
          class="c-election-bubble-chart__bubble{{#ifCond this.classModifier "!==" ""}} c-election-bubble-chart__bubble--{{ this.classModifier }}{{/ifCond}}"></div>
        {{/each}}
      </div>
    </div>
  </div>{{!-- End .c-election-bubble-chart__grid-container--west --}}
</div>
