<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<span hawksearch-facet-toggle class='"link facet__toggle'">{{toggleText}}</a>span>
    {{/if}}
</div>