<div>
    @if($option)
        @if($option->type == \App\Models\Option::TYPE_RADIO)
            <div class="c-product__variants">
                <span>{{ $option->name }}: </span>
                <ul class="js-product-variants">
                    @foreach($optionValues as $value)
                        <li class="js-c-ui-variant " >
                            <label class="c-ui-variant c-ui-variant--color" data-code="{{ $value->color }}">
                                <span class="c-ui-variant__shape" style="background-color: {{ $value->color }};"></span>
                                <input wire:model="value_id"
                                       type="radio"
                                       name="option{{ $option->id }}"
                                       value="{{ $value->id }}"
                                       class="js-variant-selector">
                                <span class="c-ui-variant__check">{{ $value->name }}</span>
                            </label>
                        </li>
                    @endforeach
                </ul>
            </div>
        @elseif($option->type == \App\Models\Option::TYPE_SELECT)
            <div class="d-block mt-3">
                <div class="col-12 p-0">
                    <span>{{ $option->name }}: </span>
                    <select class="form-control form-select" wire:model="value_id">
                        @foreach($optionValues as $value)
                            <option value="{{ $value->id }}">
                                {{ $value->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>
        @endif
    @endif
</div>