<div class="colour-swatches">
  <div class="colour-swatches__container">
    {{#ifCond type "==" "swatches"}}
      {{#each swatches}}
        <div 
          class="
            colour-swatch 
            {{#ifCond ../currentId "==" id}}colour-swatch--active{{/ifCond}}
            {{#ifCond colourInFilter "==" "White"}}colour-swatch--bordered{{/ifCond}}
            {{#if ../shouldCollapse}}{{#ifCond @index '>=' 6}}colour-swatch--hidden{{/ifCond}}{{/if}}
          "
          style="background-color: {{colourSwatch}};"
          data-id="{{@index}}"
          data-toggle="tooltip" 
          title="{{colourName}}"
        ></div>
      {{/each}}
      {{#if shouldCollapse}}
        <div 
            class="swatch-more" 
            id="more-swatch">
            +{{math swatches.length '-' 6}}
        </div>     
      {{/if}}
    {{/ifCond}}
    {{#ifCond type "==" "wheel"}}
      {{#each swatches}}
        <div class="colour-wheel">
          <img src="{{wheelImage}}" alt="">
        </div>
      {{/each}}
    {{/ifCond}}
  </div>
  {{#ifCond type "==" "wheel"}}
    <div class="colour-swatches__text">{{text}}</div>
  {{/ifCond}}
  {{#ifCond type "==" "swatches"}}
    <div class="colour-swatches__text">in {{text}}</div>
  {{/ifCond}}
</div>
