@props(['label', 'name'])
<div class="flex items-center text-left" x-data="{checked: document.getElementById('{{ $name }}').checked}" >
<div class="w-4/12"></div>
<label class="w-8/12 pr-8 font-bold text-gray-100 cursor-pointer" for="{{ $name }}"
x-on:click="checked = document.getElementById('{{ $name }}').checked"
<x-svg.circle class="w-6" x-show="!checked"/>
<x-svg.circle-check class="w-6" x-show="checked" x-cloak/>
<input class="hidden mr-3" name="{{ $name }}" type="checkbox" id="{{ $name }}"/>
<span>{!! $label !!}</span>