<div class="color-facet">
<div class="row row--tight color-facet__items">
{{#each values}}
{{#if visible}}
<div hawksearch-facet-value="{{value}}" class="column column--2 color-facet__item{{attribute ' color-facet__item--selected' selected}}">
{{#if color.imageUrl}}
<img src="{{color.imageUrl}}" class="color-facet__item__image" alt="{{color.name}}" title="{{color.name}}" />
{{else}}
<div class="color-facet__item__box" style="background: {{color.hex}};"></div>
{{/if}}
<span class="color-facet__item__actions">
{{#if excluded}}
<span hawksearch-facet-value-include="{{value}}" class="color-facet__item__actions__item" title="Include">
<hawksearch-icon name="plus"></hawksearch-icon>
</span>
{{else}}
<span hawksearch-facet-value-exclude="{{value}}" class="color-facet__item__actions__item" title="Exclude">
<hawksearch-icon name="minus"></hawksearch-icon>
</span>
{{/if}}
</span>
</div>
{{/if}}
{{/each}}
</div>
{{#if showToggle}}
<a hawksearch-facet-toggle rel="nofollow" class="facet__toggle">{{toggleText}}</a>
{{/if}}
</div> |