{{-- APP UI元素設定 共用標題 + 頁籤列（+ 選填右側 Action slot，與頁籤同列靠左）。
     用法：<x-app-tabs active="elements"><button class="btn-luxury-primary">新增</button></x-app-tabs> --}}
@props(['active' => ''])
@php
    $tabs = [
        'elements' => ['label' => __('UI Elements'),     'route' => 'admin.app.ui-elements'],
        'bundles'  => ['label' => __('UI Bundles'),      'route' => 'admin.app.ui-bundles'],
        'machines' => ['label' => __('Machine Binding'), 'route' => 'admin.app.ui-machines'],
    ];
@endphp

<h3 class="text-gray-900 dark:text-gray-200 text-3xl font-medium mb-4">{{ __('APP UI Elements') }}</h3>

<div class="flex flex-wrap items-center gap-3 mb-6">
    <div class="flex items-center gap-1 p-1.5 bg-slate-100 dark:bg-slate-900/50 rounded-2xl border border-slate-200/50 dark:border-slate-800/50 overflow-x-auto w-fit max-w-full [&::-webkit-scrollbar]:hidden">
        @foreach($tabs as $key => $tab)
            <a href="{{ route($tab['route']) }}"
               class="px-6 py-3 rounded-xl text-sm font-black uppercase tracking-widest transition-all duration-300 whitespace-nowrap
               {{ $active === $key
                    ? 'bg-white dark:bg-slate-800 text-cyan-600 dark:text-cyan-400 shadow-sm shadow-cyan-500/10'
                    : 'text-slate-400 hover:text-slate-600 dark:hover:text-slate-200' }}">
                {{ $tab['label'] }}
            </a>
        @endforeach
    </div>

    @if($slot->isNotEmpty())
        {{ $slot }}
    @endif
</div>

@if(session('success'))
    <div class="mb-4 rounded-xl bg-emerald-50 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300 border border-emerald-200/60 dark:border-emerald-800/50 px-4 py-3 text-sm font-medium">
        {{ session('success') }}
    </div>
@endif
@if($errors->any())
    <div class="mb-4 rounded-xl bg-rose-50 dark:bg-rose-900/30 text-rose-700 dark:text-rose-300 border border-rose-200/60 dark:border-rose-800/50 px-4 py-3 text-sm">
        <ul class="list-disc ps-5">
            @foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach
        </ul>
    </div>
@endif