{{--
    État vide unifié pour les listes.
    Params :
      - icon (string, feather) : ex. 'package', 'inbox'
      - title (string)
      - description (string|null)
      - actionUrl (string|null)
      - actionLabel (string|null)
      - actionModal (string|null) : id de modale Bootstrap, ex. '#add-unit'
--}}
@php
    $icon = $icon ?? 'inbox';
    $title = $title ?? 'Aucun élément';
    $description = $description ?? null;
    $actionUrl = $actionUrl ?? null;
    $actionLabel = $actionLabel ?? null;
    $actionModal = $actionModal ?? null;
    $actionIcon = $actionIcon ?? 'plus-circle';
@endphp

<div class="dedi-empty-state">
    <div class="dedi-empty-state-icon">
        <i data-feather="{{ $icon }}"></i>
    </div>
    <h5 class="dedi-empty-state-title">{{ $title }}</h5>
    @if($description)
        <p class="dedi-empty-state-desc">{{ $description }}</p>
    @endif
    @if($actionModal && $actionLabel)
        <a href="#" class="btn btn-primary mt-3" data-bs-toggle="modal" data-bs-target="{{ $actionModal }}">
            <i data-feather="{{ $actionIcon }}" class="me-2" style="width:16px;height:16px;"></i>{{ $actionLabel }}
        </a>
    @elseif($actionUrl && $actionLabel)
        <a href="{{ $actionUrl }}" class="btn btn-primary mt-3">
            <i data-feather="{{ $actionIcon }}" class="me-2" style="width:16px;height:16px;"></i>{{ $actionLabel }}
        </a>
    @endif
</div>

@once
<style>
    .dedi-empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 56px 24px;
        min-height: 260px;
    }
    .dedi-empty-state-icon {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 18px;
        background: var(--dedi-blue-soft, #FDEEF5);
        color: var(--dedi-blue, #E8187A);
    }
    .dedi-empty-state-icon svg {
        width: 36px;
        height: 36px;
        stroke: currentColor;
    }
    .dedi-empty-state-title {
        margin: 0 0 8px;
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--dedi-ink, #1A1A1A);
    }
    .dedi-empty-state-desc {
        margin: 0;
        max-width: 420px;
        font-size: 0.925rem;
        line-height: 1.5;
        color: var(--dedi-muted, #7A6070);
    }
</style>
@endonce