<div class="c-election-riding-card{{#if expanded}} c-election-riding-card--expanded{{/if}} c-election-riding-card--{{party}}{{#if status}} c-election-riding-card--{{status}}{{/if}}">
  <a href="#" class="c-election-riding-card__link">

    {{#if expanded}}
      <div class="c-election-riding-card__shape">
        <svg class="c-election-riding-card__art" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{basePath}}/assets/patterns/images/{{id}}.svg#riding-{{id}}"></use>
        </svg>
      </div>
    {{/if}}

    {{#if expanded}}
    <div class="c-election-riding-card__content">
    {{/if}}

    <div class="c-election-riding-card__name">{{name}}</div>
    {{#if expanded}}
      <div class="c-election-riding-card__results">
        {{percent}}% Polls in: <span class="c-election-riding-card__polls">{{pollsReported}}/{{pollsTotal}}</span>
      </div>
    {{/if}}

    {{#if condensed}}
    <div class="c-election-riding-card__party">
      {{#ifCond status "==" "partial"}}
        <span class="c-election-riding-card__party__circle"></span>
      {{/ifCond}}
      {{#ifCond status "==" "complete"}}
        <span class="c-indicator-icon">
          <svg class="c-indicator-icon__art" role="img" pointer-events="none" focusable="false" aria-hidden="true">
            <use xlink:href="{{generatedSvgSpritePath}}#icon-checkmark"></use>
          </svg>
        </span>
      {{/ifCond}}
      {{party}}
      <span class="c-election-riding-card__party-candidate">{{candidate}}</span>
    </div>
    <div class="c-election-riding-card__percent">{{percent}}%</div>
    {{/if}}

    {{#if condensed}}
    <div class="c-election-riding-card__key{{#ifCond key '==' 'false'}}--hidden{{/ifCond}}"></div>
    {{/if}}

    {{#if expanded}}
    </div>
    {{/if}}
  </a>
</div>

{{#if expanded}}
  <div class="c-election-riding-card__rainbow">
    {{#each rainbow}}
      <div class="c-election-riding-card__rainbow__{{@key}}" style="width:{{this}}%"></div>
    {{/each}}
  </div>
{{/if}}
