@props(['labels'=>[], 'errors'=>[]])
@php($hasError = array_sum($errors))
@php($panelCss="[&>div.tab-panel-x]:w-full [&>div.tab-panel-x]:my-0 [&>div.tab-panel-x]:mx-auto [&>div.tab-panel-x]:p-6 [&>div.tab-panel-x]:overflow-x-visible")
<div {{ $attributes->merge(['class' => "bg-white border border-secondary-50 text-secondary-900 overflow-hidden shadow-sm sm:rounded-lg {$panelCss} tab-x"]) }} "
x-data="{ active: 0 }" >
    <ul class="bg-secondary-50 flex flex-wrap">
        @foreach($labels as $idx =>$label)
        <li class="border-r border-secondary-200">
            <button type="button" class="py-3 px-4 border-transparent hover:text-primary-600" x-bind:class ="{'bg-white':(active=={{$idx}})}"
            x-on:click="active = {{$idx}}">
            {{$label}}
            @php($visible = (isset($errors[$idx]) && $errors[$idx]>'0') ? '': 'hidden')
            <span id="tab_error_{{$idx}}" class="has-errors-x {{$visible}}"><i class="fa-solid fa-triangle-exclamation text-danger-600"></i></span>
        </button>
        
        </li>
        @endforeach
        @php($visible = $hasError ? '': 'hidden')
        <li id="tab_errors" class="bg-danger-50 border-l-8 border-danger-600 text-danger-700 grow {{$visible}} has-errors-x">
        <div class="p-2 flex items-center h-full">
            <p><i class="fa-solid _fa-regular fa-circle-check  mr-1.5"></i>入力にエラーがあります</p>
        </div>
        </li>
    </ul>
	{{$slot}}
</div>