@props([
    'folderDocs' => collect()
])

@foreach($folderDocs->groupBy('category') as $category => $docs)
<div class="card card-bordered card-inner">
    <h6 class="tw-text-gray-600">{{ $category }}</h6>
    @foreach($docs->sortBy('order') as $i => $document)
        <div 
            class="d-flex justify-between align-items-center  flex-wrap border-light mb-2 p-2 ps-3 br-1" 
            x-data="{selected: @entangle('documents.' . $document['index'] . '.selected').defer}"
            x-bind:class="{'border-light': !selected, 'border-success shadow-sm': selected}" 
            x-on:click="selected = !selected"
            style="border: 1px solid"
        >
            <div class="d-flex align-items-center" style="max-width: 90%">
                <div class="h-50px me-3" x-show="!selected" x-cloak>
                    <span>@svg('file-doc')</span>
                </div>
                <div class="h-50px me-3" x-show="selected" x-cloak>
                    <span>@svg('doc-checked')</span>
                </div>
                <div>
                    {{ $document['name'] }}
                    @if($document['required'])
                        <x-ui.badge color="light" class="ms-3 text-danger br-1" x-show="!selected" x-cloak>{{ __('Required') }}</x-ui.badge>
                    @endif
                </div>
            </div>
            <div>
                <x-ui.check x-model="selected" />
            </div>
        </div>
    @endforeach
</div>
@endforeach