{{--
    Tab Panel Component - AdminLTE style
--}}

@props([
    'name',
])

<style>
    .tab-pane-lte {
        animation: fadeIn var(--lte-transition-speed, 0.3s) ease-out;
    }
    .tab-pane-lte:focus {
        outline: none;
    }
    .tab-pane-lte:focus-visible {
        outline: 2px solid rgba(13, 110, 253, 0.25);
        outline-offset: 2px;
        border-radius: var(--lte-border-radius, 0.375rem);
    }
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(-4px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
</style>

<div
    x-show="activeTab === '{{ $name }}'"
    x-transition:enter="tab-pane-lte"
    x-transition:enter-start="opacity-0"
    x-transition:enter-end="opacity-100"
    {{ $attributes->class(['tab-pane-lte']) }}
>
    {{ $slot }}
</div>