@props([
    'tabs' => [],
    'user' => null
])

<div x-data="{tab: '{{ head($tabs)['name']?? '' }}', loaded: []}">
    <ul class="nav nav-tabs nav-tabs-mb-icon nav-tabs-card">
        @foreach($tabs as $tab)
            {{-- @continue(isset($tab['permissions']) && !auth()->user()->canAny($tab['permissions'])) --}}
            <li
                class="nav-item"
                x-bind:class="{'active': tab === '{{ $tab['name'] }}'}"
            >
                <a
                    class="nav-link"
                    x-bind:class="{'active': tab === '{{ $tab['name'] }}'}"
                    x-on:click="
                    tab = '{{ $tab['name'] }}';
                    if(!loaded.includes(tab) && '{{ isset($tab['onclick'])? 1 : 0 }}') {
                        {!! $tab['onclick']?? '' !!};
                    }
                    loaded.push(tab);"
                >
                    @if(isset($tab['icon']))
                        <x-ui.nicon :name="$tab['icon']" />
                    @endif
                    <span>{{ $tab['name'] }}</span>
                </a>
            </li>
        @endforeach
    </ul><!-- .nav-tabs -->
    
    <div class="card-inner" x-show="tab === '{{ __('Identity') }}'" x-cloak>
        <div class="card card-inner">

            <h6 class="title overline-title text-base d-inline">@lang('Identity')</h6>

            <x-profile.profile-ud-list :items="[
                __('Lastname') => $user->lastname,
                __('Firstname') => $user->firstname,
                __('Email') => $user->email,
                __('Main phone') => $user->phone_main,
                __('Mobile phone') => $user->phone_mobile,
                __('Work phone') => $user->phone_work,
            ]"/>

            @if($user->is_any_partner_role)

                @if($user->agency)
                    <hr>
                    <div>
                        <h6 class="title overline-title text-base d-inline">@lang('Agency')</h6>
                        @if(auth()->user()->can('agencies.view'))
                        <a href="{{ route('agencies.detail', $user->agency) }}" 
                            class="btn btn-outline-light btn-xs ms-2 card-bordered"><em class="icon ni ni-eye"></em></a>
                        @endif
                    </div>
                    <x-profile.profile-ud-list :items="[
                        __('Agency') => $user->agency->name,
                    ]"/>
                @endif

                @if($user->company)
                    <hr>
                    <div>
                        <h6 class="title overline-title text-base d-inline">@lang('Company')</h6>
                        @if(auth()->user()->can('companies.view'))
                        <a href="{{ route('companies.detail', $user->company) }}" 
                            class="btn btn-outline-light btn-xs ms-2 card-bordered"><em class="icon ni ni-eye"></em></a>
                        @endif
                    </div>
                    <x-profile.profile-ud-list :items="[
                        __('Company name') => $user->company->name,
                        __('Company type') => $user->company->type?->label,
                    ]"/>
                @endif

                @if($user->company?->network)
                    <hr>
                    <div>
                        <h6 class="title overline-title text-base d-inline">@lang('Network')</h6>
                        @if(auth()->user()->can('networks.view'))
                        <a href="{{ route('networks.detail', $user->company->network) }}" 
                            class="btn btn-outline-light btn-xs ms-2 card-bordered"><em class="icon ni ni-eye"></em></a>
                        @endif
                    </div>
                    <x-profile.profile-ud-list :items="[
                        __('Name') => $user->company->network->name,
                    ]"/>
                @endif

            @endif
        </div>
    </div>
    <div class="card-inner" x-show="tab === '{{ __('Projects') }}'" x-cloak>
        {{-- @if(auth()->user()->hasRole(['admin', 'manager']) && $user->is_any_partner_role)
        <div class="d-flex justify-content-end">
            <x-ui.button 
                :label="__('Export projects')" 
                class="btn-sm btn-dim mb-2"
                icon="download-cloud"
                click="exportProjects"
            />
        </div>
        @endif --}}

        @livewire('projects.projects-table', [
            'params' => ['stickyHeader' => false],
            'restrict' => ['projects.owner_id' => $user->id],
            'loader' => false,
            'deferLoad' => true
        ])
    </div>
    <div x-show="tab === '{{ __('Documents') }}'" x-cloak>
        {{-- @livewire('documents.documents-table', [
            'restrict' => ['folder_id' => $user->getHomeFolder()->id],
            'loader' => false,
            'deferLoad' => true
        ]) --}}
        @livewire('documents.documents-manager', [
            'modelType' => $user->getMorphClass(), 
            'modelId' => $user->id, 
            'showFullManager' => false
        ])
    </div>
    @if(auth()->user()->is_bo)
    <div class="card-inner" x-show="tab === '{{ __('Notes') }}'" x-cloak>
        @livewire('notes.notes-viewer', [
            'modelClass' => $user->getMorphClass(), 
            'modelId' => $user->id,
            'deferLoad' => true,
            'hasChannels' => false,
            'showChannels' => false,
        ])
    </div>
    @endif
    <div class="card-inner" x-show="tab === '{{ __('Activity') }}'" x-cloak>
        @livewire('activity.activity-table', [
            'params' => ['user_id' => $user->id],
            'loader' => false,
            'deferLoad' => true
        ])
    </div>
</div>