@props(['activeTab' => 'overview'])
<div>

    <ul class="nav nav-tabs mb-4">
        <li class="nav-item">
            <a class="nav-link {{ $activeTab === 'overview' ? 'active' : '' }}"
               style="{{ $activeTab === 'overview' ? 'border-top: 3px solid #0d6efd; background: white;' : '' }}"
               wire:click.prevent="setTab('overview')">
                Overview
            </a>
        </li>

        <li class="nav-item">
            <a class="nav-link {{ $activeTab === 'contact' ? 'active' : '' }}"
               style="{{ $activeTab === 'contact' ? 'border-top: 3px solid #0d6efd; background: white;' : '' }}"
               wire:click.prevent="setTab('contact')">
                Contact
            </a>
        </li>

        <li class="nav-item">
            <a class="nav-link {{ $activeTab === 'application' ? 'active' : '' }}"
               style="{{ $activeTab === 'application' ? 'border-top: 3px solid #0d6efd; background: white;' : '' }}"
               wire:click.prevent="setTab('application')">
                Application
            </a>
        </li>

        <li class="nav-item">
            <a class="nav-link {{ $activeTab === 'statements' ? 'active' : '' }}"
               style="{{ $activeTab === 'statements' ? 'border-top: 3px solid #0d6efd; background: white;' : '' }}"
               wire:click.prevent="setTab('statements')">
                Statements
            </a>
        </li>

        <li class="nav-item">
            <a class="nav-link {{ $activeTab === 'contracts' ? 'active' : '' }}"
               style="{{ $activeTab === 'contracts' ? 'border-top: 3px solid #0d6efd; background: white;' : '' }}"
               wire:click.prevent="setTab('contracts')">
                Contracts
            </a>
        </li>

        <li class="nav-item">
            <a class="nav-link {{ $activeTab === 'dsars' ? 'active' : '' }}"
               style="{{ $activeTab === 'dsars' ? 'border-top: 3px solid #0d6efd; background: white;' : '' }}"
               wire:click.prevent="setTab('dsars')">
                DSARs
            </a>
        </li>

        <li class="nav-item">
            <a class="nav-link {{ $activeTab === 'documents' ? 'active' : '' }}"
               style="{{ $activeTab === 'documents' ? 'border-top: 3px solid #0d6efd; background: white;' : '' }}"
               wire:click.prevent="setTab('documents')">
                Documents
            </a>
        </li>

        <li class="nav-item">
            <a class="nav-link {{ $activeTab === 'tasks' ? 'active' : '' }}"
               style="{{ $activeTab === 'tasks' ? 'border-top: 3px solid #0d6efd; background: white;' : '' }}"
               wire:click.prevent="setTab('tasks')">
                Tasks
            </a>
        </li>

        <li class="nav-item">
            <a class="nav-link {{ $activeTab === 'history' ? 'active' : '' }}"
               style="{{ $activeTab === 'history' ? 'border-top: 3px solid #0d6efd; background: white;' : '' }}"
               wire:click.prevent="setTab('history')">
                History
            </a>
        </li>
    </ul>

    <div wire:loading wire:target="setTab" class="p-3 w-100">
        @include('components.skeleton.tab-content')
    </div>

    <!-- Actual content panel -->
    <div wire:loading.remove wire:target="setTab" class="fade show">

        @if($activeTab === 'overview')
            <x-client.overview :client="$client"/>

        @elseif($activeTab === 'dsars')
            <livewire:claim.dsars :client="$client"/>

        @elseif($activeTab === 'application')
            <livewire:claim.application.application :client="$client"/>

        @elseif($activeTab === 'statements')
            <livewire:claim.application.statements :client="$client"/>

        @elseif($activeTab === 'contracts')
            <livewire:client.contracts :client="$client"/>

        @elseif($activeTab === 'documents')
            <livewire:document-manager :owner="$client"/>

        @elseif($activeTab === 'tasks')
            <livewire:task.task-assigner :owner="$client"/>

        @elseif($activeTab === 'history')
            <livewire:history :owner="$client"/>

        @endif

    </div>
</div>