<section>
    <div class="mb-3 flex flex-wrap items-center justify-between gap-2">
        <h2 class="text-base font-semibold text-slate-900">Leave rules summary</h2>
        @if(auth()->user()->hasPermission('leave_types_create'))
            <a href="{{ route('leave-types.manage') }}" class="text-xs font-medium text-primary hover:underline">Manage leave rules</a>
        @endif
    </div>

    @if(empty($ruleSummaries))
        <x-card>
            <p class="text-sm text-slate-500">No leave rules to show.</p>
        </x-card>
    @else
        <div class="grid gap-3 sm:grid-cols-2">
            @foreach($ruleSummaries as $summary)
                <div class="rounded border border-slate-200 bg-white p-3 shadow-sm">
                    <p class="mb-2 text-sm font-semibold text-slate-900">
                        {{ $summary['name'] }}
                        @if(! empty($summary['short_code']))
                            <span class="font-normal text-slate-400">({{ $summary['short_code'] }})</span>
                        @endif
                    </p>
                    <div class="flex flex-wrap gap-1.5">
                        @forelse($summary['chips'] as $chip)
                            <span class="rounded-full bg-slate-100 px-2.5 py-1 text-[11px] font-medium text-slate-700">{{ $chip }}</span>
                        @empty
                            <span class="text-xs text-slate-500">No special rules</span>
                        @endforelse
                    </div>
                </div>
            @endforeach
        </div>
    @endif
</section>
