<div class="form-field form-field-options form-field-inline form-field-swatch{{#if required}} form-required{{/if}}"
  data-swatch-selector
  data-product-attribute="swatch">
  <div class="form-field-title">
    {{display_name}}
    {{#if required}}<span class="required-text">{{lang 'common.required'}}</span>{{/if}}
  </div>

  <div class="form-field-control">
    {{#each values}}
      <label class="swatch-wrap" data-swatch-value="{{label}}" data-product-attribute-value="{{id}}">
        <span class="form-label-text">{{label}}</span>

        <input
          class="form-input swatch-radio"
          id="attribute-{{id}}"
          type="radio"
          name="attribute[{{../id}}]"
          value="{{id}}"
          {{#if selected}}checked{{/if}}
          {{#if ../required}}required{{/if}}
          aria-required="{{required}}">

        <span class="swatch {{#if data.[1]}}two-colors{{/if}}{{#if data.[2]}} three-colors{{/if}}">
          {{#if pattern}}
            <span class="swatch-color swatch-pattern" style="background-image: url('{{getImage image 'product_thumbnail'}}');"></span>
          {{/if}}

          {{#if data.[0]}}
            <span class="swatch-color" style="background-color: #{{data.[0]}}"></span>
          {{/if}}

          {{#if data.[1]}}
            <span class="swatch-color secondary" style="background-color: #{{data.[1]}}"></span>
          {{/if}}

          {{#if data.[2]}}
            <span class="swatch-color tertiary" style="background-color: #{{data.[2]}}"></span>
          {{/if}}
        </span>

        {{#if pattern}}
          <span class="swatch-pattern-expanded">
            <img class="swatch-pattern-image" src="{{getImage image 'product_item'}}">
          </span>
        {{/if}}

      </label>
    {{/each}}
  </div>

  <span class="swatch-value" data-swatch-value>{{lang 'forms.swatches_none_selected'}}</span>

</div>
