{{-- Example: How to use NotificationAutomationTimeline in Lead Details --}}

{{-- Option 1: Full Width in Card --}}
<div class="card shadow-sm border-radius-xl">
    <div class="card-inner">
        <livewire:notifications.notification-automation-timeline 
            :model-type="$lead->getMorphClass()" 
            :model-id="$lead->id" 
            :key="'automation-timeline-' . $lead->id"
        />
    </div>
</div>

{{-- Option 2: In Collapsible Section --}}
<div class="card shadow-sm border-radius-xl" x-data="{ expanded: false }">
    <div class="card-inner border-bottom">
        <div class="d-flex justify-content-between align-items-center">
            <h6 class="card-title mb-0">
                <x-ui.nicon name="bell" class="me-2"/>
                {{ __('Automations de notifications') }}
            </h6>
            <button 
                x-on:click="expanded = !expanded"
                class="btn btn-sm btn-icon btn-trigger"
            >
                <x-ui.nicon name="chevron-down" x-bind:class="{ 'rotate-180': expanded }"/>
            </button>
        </div>
    </div>
    <div x-show="expanded" x-collapse>
        <div class="card-inner">
            <livewire:notifications.notification-automation-timeline 
                :model-type="$lead->getMorphClass()" 
                :model-id="$lead->id" 
                :key="'automation-timeline-' . $lead->id"
            />
        </div>
    </div>
</div>

{{-- Option 3: In Tab System --}}
<div class="card shadow-sm border-radius-xl">
    <div class="card-inner">
        <ul class="nav nav-tabs nav-tabs-mb-icon nav-tabs-card" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" data-bs-toggle="tab" href="#tab-details">
                    <x-ui.nicon name="file-docs"/>
                    <span>{{ __('Détails') }}</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" href="#tab-automations">
                    <x-ui.nicon name="bell"/>
                    <span>{{ __('Automations') }}</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" href="#tab-history">
                    <x-ui.nicon name="clock"/>
                    <span>{{ __('Historique') }}</span>
                </a>
            </li>
        </ul>
        
        <div class="tab-content">
            <div class="tab-pane active" id="tab-details">
                {{-- Lead details content --}}
            </div>
            
            <div class="tab-pane" id="tab-automations">
                <livewire:notifications.notification-automation-timeline 
                    :model-type="$lead->getMorphClass()" 
                    :model-id="$lead->id" 
                    :key="'automation-timeline-' . $lead->id"
                />
            </div>
            
            <div class="tab-pane" id="tab-history">
                {{-- History content --}}
            </div>
        </div>
    </div>
</div>

{{-- Option 4: Standalone Section in Lead Detail --}}
<div class="nk-content-section">
    <div class="row g-4">
        {{-- Lead Information Column --}}
        <div class="col-lg-8">
            {{-- Lead details cards --}}
        </div>

        {{-- Automation Timeline Column --}}
        <div class="col-lg-4">
            <div class="card shadow-sm border-radius-xl sticky-top" style="top: 100px;">
                <div class="card-inner">
                    <livewire:notifications.notification-automation-timeline 
                        :model-type="$lead->getMorphClass()" 
                        :model-id="$lead->id" 
                        :key="'automation-timeline-' . $lead->id"
                    />
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Option 5: With Custom Wrapper Styling --}}
<div class="automation-section tw-bg-gradient-to-br tw-from-gray-50 tw-to-white tw-rounded-2xl tw-p-6 tw-shadow-lg">
    <livewire:notifications.notification-automation-timeline 
        :model-type="$lead->getMorphClass()" 
        :model-id="$lead->id" 
        :key="'automation-timeline-' . $lead->id"
    />
</div>

{{-- Option 6: In Modal (for quick view) --}}
<x-modal modal-title="{{ __('Automations de notifications') }}" class="modal-xl">
    <livewire:notifications.notification-automation-timeline 
        :model-type="$lead->getMorphClass()" 
        :model-id="$lead->id" 
        :key="'automation-timeline-' . $lead->id"
    />
</x-modal>

{{-- Option 7: Dynamic with Any Model --}}
@php
    $model = $lead ?? $client ?? $project; // Any model
@endphp

<div class="card shadow-sm border-radius-xl">
    <div class="card-inner">
        <livewire:notifications.notification-automation-timeline 
            :model-type="$model->getMorphClass()" 
            :model-id="$model->id" 
            :key="'automation-timeline-' . $model->id"
        />
    </div>
</div>

{{-- RECOMMENDED: Clean Integration in Lead Detail --}}
{{-- File: resources/views/projects/leads/show.blade.php --}}

<div class="nk-content">
    <div class="container-fluid">
        <div class="nk-content-inner">
            <div class="nk-content-body">
                
                {{-- Existing lead header and details --}}
                
                {{-- Add Automation Timeline Section --}}
                <div class="nk-block">
                    <div class="card shadow-sm border-radius-xl">
                        <div class="card-inner">
                            <livewire:notifications.notification-automation-timeline 
                                :model-type="$lead->getMorphClass()" 
                                :model-id="$lead->id" 
                                :key="'automation-timeline-' . $lead->id"
                            />
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</div>