@php($lang = request()->query('lang','en'))
<div x-data="{
    // As propriedades contentCriteria e communicationCriteria já estão no Livewire
}">
    <div class="space-y-6">
        <div class="p-4 bg-white rounded-lg shadow-sm">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-xl font-semibold">Content Criteria</h3>
                <div class="flex items-center gap-2 text-sm">
                    <button type="button" class="text-gray-600 hover:text-gray-900 underline" wire:click="selectAllCriteria('content')">Select all</button>
                    <span class="text-gray-300">|</span>
                    <button type="button" class="text-gray-600 hover:text-gray-900 underline" wire:click="clearAllCriteria('content')">Clear all</button>
                </div>
            </div>
            <div class="space-y-3">
                @foreach ($contentCriteria as $criterion)
                    @php($t = $criterion->translateFor($lang, 'en'))
                    <div x-data="{ expanded: false }" class="flex items-center justify-between gap-4 rounded-lg border border-gray-200 p-3 hover:bg-gray-50 focus-within:ring-2 focus-within:ring-primary-400 min-h-[56px]">
                        <div class="flex items-start gap-3">
                            <x-filament::input.checkbox class="mt-1"
                                wire:model.live="data.evaluation_criteria.{{ $criterion->id }}.selected"
                            />
                            <div>
                                <label class="text-sm font-medium leading-6">{{ $t['name'] ?? $criterion->name }}</label>
                                @php($desc = $t['description'] ?? $criterion->description)
                                @if (!empty($desc))
                                    <div class="text-xs text-gray-500 max-w-xs">
                                        <span x-show="!expanded" class="block truncate" title="{{ $desc }}">
                                            {{ \Illuminate\Support\Str::limit($desc, 90) }}
                                        </span>
                                        <span x-show="expanded" class="block whitespace-pre-line">{{ $desc }}</span>
                                        <button type="button" @click="expanded = !expanded" class="text-[11px] text-primary-700 hover:underline mt-0.5">
                                            <span x-show="!expanded">Show more</span>
                                            <span x-show="expanded">Show less</span>
                                        </button>
                                    </div>
                                @endif
                            </div>
                        </div>
                        <div x-show="$wire.get('data.evaluation_criteria.{{ $criterion->id }}.selected')" class="flex items-center gap-3 basis-[22rem] md:basis-[26rem] shrink-0">
                            <div class="relative flex-1 pb-6">
                                <input
                                    type="range"
                                    min="1"
                                    max="5"
                                    step="1"
                                    wire:model.live.number="data.evaluation_criteria.{{ $criterion->id }}.importance"
                                    class="w-full h-[8px] rounded-lg appearance-none cursor-pointer accent-primary-600 bg-gray-200 focus:outline-none focus:ring-0"
                                />
                                <div class="absolute inset-x-0 bottom-0 flex justify-between px-1 text-[10px] text-gray-400 select-none">
                                    <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="p-4 bg-white rounded-lg shadow-sm">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-xl font-semibold">Communication Criteria</h3>
                <div class="flex items-center gap-2 text-sm">
                    <button type="button" class="text-gray-600 hover:text-gray-900 underline" wire:click="selectAllCriteria('communication')">Select all</button>
                    <span class="text-gray-300">|</span>
                    <button type="button" class="text-gray-600 hover:text-gray-900 underline" wire:click="clearAllCriteria('communication')">Clear all</button>
                </div>
            </div>
            <div class="space-y-3">
                @foreach ($communicationCriteria as $criterion)
                    @php($t = $criterion->translateFor($lang, 'en'))
                    <div x-data="{ expanded: false }" class="flex items-center justify-between gap-4 rounded-lg border border-gray-200 p-3 hover:bg-gray-50 focus-within:ring-2 focus-within:ring-primary-400 min-h-[56px]">
                        <div class="flex items-start gap-3">
                            <x-filament::input.checkbox class="mt-1"
                                wire:model.live="data.evaluation_criteria.{{ $criterion->id }}.selected"
                            />
                            <div>
                                <label class="text-sm font-medium leading-6">{{ $t['name'] ?? $criterion->name }}</label>
                                @php($desc = $t['description'] ?? $criterion->description)
                                @if (!empty($desc))
                                    <div class="text-xs text-gray-500 max-w-xs">
                                        <span x-show="!expanded" class="block truncate" title="{{ $desc }}">
                                            {{ \Illuminate\Support\Str::limit($desc, 90) }}
                                        </span>
                                        <span x-show="expanded" class="block whitespace-pre-line">{{ $desc }}</span>
                                        <button type="button" @click="expanded = !expanded" class="text-[11px] text-primary-700 hover:underline mt-0.5">
                                            <span x-show="!expanded">ver mais</span>
                                            <span x-show="expanded">ver menos</span>
                                        </button>
                                    </div>
                                @endif
                            </div>
                        </div>
                        <div x-show="$wire.get('data.evaluation_criteria.{{ $criterion->id }}.selected')" class="flex items-center gap-3 basis-[22rem] md:basis-[26rem] shrink-0">
                            <div class="relative flex-1 pb-6">
                                <input
                                    type="range"
                                    min="1"
                                    max="5"
                                    step="1"
                                    wire:model.live.number="data.evaluation_criteria.{{ $criterion->id }}.importance"
                                    class="w-full h-[8px] rounded-lg appearance-none cursor-pointer accent-primary-600 bg-gray-200 focus:outline-none focus:ring-0"
                                />
                                <div class="absolute inset-x-0 bottom-0 flex justify-between px-1 text-[10px] text-gray-400 select-none">
                                    <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div>