@push('styles')
<style>
    .livewire-datatable { width: 100%; }
    .dark-mode .livewire-datatable .nk-block-head { background-color: #0d141d !important; border-color: #1a1f24 !important; }
</style>
@endpush

<div>
@if(auth()->user()->is_external)
    <div class="p-4">
        @livewire('leads.leads-table', [
            'loader' =>  true,
        ])
    </div>
@else
    <div class="project-manager">
        <div class="project-manager-aside" data-content="projectManagerAside">
            <div class="project-manager-head tw-bg-blue-gray-50">
                <div class="d-flex align-items-center w-100 gap-3 flex-wrap">
                    {{-- Title --}}
                    <h5 class="mb-0 text-primary me-auto">{{ __('My Leads') }}</h5>

                    {{-- Add / Import actions (only in My Leads mode) --}}
                    @can('leads.create')
                    <div class="form-control-wrap">
                        <div class="input-group btn-input-group">
                            <x-ui.button
                                color="primary"
                                class="btn-sm btn-dim"
                                click="$emit('showModal', 'modals.leads.save-lead-modal')"
                                icon="plus"
                                :label="__('Add')"
                            />
                            <button class="btn btn-primary btn-icon btn-sm btn-dim dropdown-toggle dropdown-toggle-split ms-1" data-bs-toggle="dropdown">
                                <em class="icon ni ni-chevron-down"></em>
                                <span class="visually-hidden">Options</span>
                            </button>
                            <div class="dropdown-menu">
                                <ul class="link-list-opt no-bdr">
                                    <li><a wire:click="$emit('showModal', 'modals.leads.import-leads-modal')"><em class="icon ni ni-upload"></em>Importer leads</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    @endcan
                </div>
            </div>

            {{-- Status sidebar --}}
            <div class="project-manager-nav project-manager-menu" data-simplebar>
                @livewire('leads.lead-status-sidebar')
            </div>
        </div><!-- .project-manager-aside -->

        <div class="project-manager-body bg-white">

            <div class="project-manager-list" data-simplebar>
                <style>
                    .livewire-datatable .nk-block-head {padding: 0.82rem;border-bottom: 1px solid #e5e9f2;background: #f8fafc}
                    .livewire-datatable .toggle-expand {display: none;}
                </style>
                @livewire('leads.leads-table', [
                    'create' => null,
                    'loader' =>  true,
                    'restrict' => ! auth()->user()->is_bo ? ['clients.user_id' => auth()->id()] : [],
                ])
            </div>
        </div><!-- .project-manager-body -->
    </div><!-- .project-manager -->

    @if(in_array(auth()->user()->role, [UserRoles::ADMIN()]))
        {{-- Floating Task Manager --}}
        {{-- @livewire('leads.floating-lead-task-manager') --}}
    @endif
@endif
</div>