<import-sjs
  from="../index.sjs"
  name="componentUtils" />

<list
  className="ant-checkbox-group {{ className ? className : '' }} ant-checkbox-group-{{ position }}"
  style="{{ style }}">
  <checkbox-group
    name="{{ name }}"
    value="{{ mixin.value }}">
    <view class="ant-checkbox-group-body">
      <block a:if="{{ position === 'vertical' }}">
        <block
          a:for="{{ options }}"
          a:for-index="index"
          a:for-item="item">
          <list-item>
            <ant-checkbox
              color="{{ color }}"
              checked="{{ componentUtils.getCheckboxChecked(item, mixin.value) }}"
              data-index="{{ index }}"
              value="{{ item.value }}"
              disabled="{{ disabled || item.disabled }}"
              onChange="onChange">
              <slot
                name="label"
                value="{{ item }}"
                index="{{ index }}">
                <view class="ant-checkbox-group-item-label-default">
                  {{ item.label }}
                </view>
              </slot>
            </ant-checkbox>
          </list-item>
        </block>
      </block>
      <block a:else>
        <block
          a:for="{{ options }}"
          a:for-index="index"
          a:for-item="item">
          <ant-checkbox
            color="{{ color }}"
            checked="{{ componentUtils.getCheckboxChecked(item, mixin.value) }}"
            data-index="{{ index }}"
            value="{{ item.value }}"
            disabled="{{ disabled || item.disabled }}"
            onChange="onChange">
            <slot
              name="label"
              value="{{ item }}"
              index="{{ index }}">
              <view class="ant-checkbox-group-item-label-default">
                {{ item.label }}
              </view>
            </slot>
          </ant-checkbox>
        </block>
      </block>
    </view>
  </checkbox-group>
</list>