<div class="flex flex-col max-h-[80vh]">

    {{-- HEADER --}}
    <div class="px-6 py-4 border-b border-border flex items-center gap-3">

        <div class="w-10 h-10 rounded-xl bg-primary-100 flex items-center justify-center">
            <x-heroicon-o-sparkles class="w-5 h-5 text-primary"/>
        </div>

        <div>
            <div class="text-sm font-semibold text-text">
                {{ $featureId ? t('admin.features.edit') : t('admin.features.new') }}
            </div>

            <div class="text-xs text-text-muted">
                {{ t('admin.features.configure') }}
            </div>
        </div>

    </div>


    {{-- BODY --}}
    <div class="px-6 py-5 space-y-4 overflow-y-auto">

        {{-- NAME --}}
        <div class="bg-background border border-border rounded-xl p-4 space-y-2">
            <div class="text-xs text-text-muted">{{ t('admin.features.name') }}</div>

            <input wire:model.live="label"
                   placeholder="{{ t('admin.features.name_ph') }}"
                   class="w-full bg-surface border border-border rounded-lg px-3 py-2 text-sm">
        </div>


        {{-- KEY --}}
        <div class="bg-background border border-border rounded-xl p-4 space-y-2">
            <div class="text-xs text-text-muted">{{ t('admin.features.key') }}</div>

            <input wire:model="key"
                   placeholder="calendar"
                   class="w-full bg-surface border border-border rounded-lg px-3 py-2 text-sm">
        </div>


        {{-- ICON --}}
        <div class="space-y-5">

            <div class="text-xs text-text-muted">
                {{ t('admin.features.icon') }}
            </div>

            @foreach($iconGroups as $group => $icons)

                <div class="bg-background border border-border rounded-xl p-4 space-y-3">

                    {{-- GROUP TITLE --}}
                    <div class="text-xs font-semibold text-text-muted uppercase">
                        {{ $group }}
                    </div>

                    <div class="grid grid-cols-4 gap-3">

                        @foreach($icons as $i)

                            @php
                                $selected = $icon === $i;
                            @endphp

                            <button
                                type="button"
                                wire:click="$set('icon', '{{ $i }}')"
                                class="relative flex flex-col items-center justify-center gap-2 p-3 rounded-xl border transition

                        {{ $selected
                            ? 'bg-primary-50 border-primary text-primary'
                            : 'bg-surface border-border hover:bg-background' }}
                        "
                            >

                                {{-- ICON --}}
                                <div class="w-8 h-8 flex items-center justify-center">
                                    <x-dynamic-component :component="$i" class="w-5 h-5"/>
                                </div>

                                {{-- NAME --}}
                                <span class="text-[10px] text-text-muted text-center">
                            {{ str_replace('heroicon-o-', '', $i) }}
                        </span>

                                {{-- CHECK --}}
                                @if($selected)
                                    <div class="absolute top-1 right-1">
                                        <x-heroicon-o-check class="w-4 h-4 text-primary"/>
                                    </div>
                                @endif

                            </button>

                        @endforeach

                    </div>

                </div>

            @endforeach

        </div>

        {{-- GROUP --}}
        <div class="bg-background border border-border rounded-xl p-4 space-y-2">

            <div class="text-xs text-text-muted">{{ t('admin.features.category') }}</div>

            <select wire:model="group_id"
                    class="w-full bg-surface border border-border rounded-lg px-3 py-2 text-sm">

                <option value="">{{ t('admin.features.none') }}</option>

                @foreach($groups as $group)
                    <option value="{{ $group->id }}">
                        {{ $group->label }}
                    </option>
                @endforeach

            </select>

        </div>


        {{-- STATUS --}}
        <div class="bg-background border border-border rounded-xl p-4 flex justify-between items-center">

            <span class="text-sm text-text">{{ t('common.active') }}</span>

            <input type="checkbox" wire:model="active" class="accent-primary w-5 h-5">

        </div>

    </div>


    {{-- FOOTER --}}
    <div class="px-6 py-4 border-t border-border flex justify-end gap-2">

        <button
            wire:click="$dispatch('closeModal')"
            class="px-4 py-2 text-sm border border-border rounded-lg bg-background">
            {{ t('common.cancel') }}
        </button>

        <button
            wire:click="save"
            class="px-5 py-2 text-sm text-white rounded-lg bg-primary hover:bg-primary-600">
            {{ t('common.save') }}
        </button>

    </div>

</div>
