@php
  $compact = $compact ?? false;
  $href = $alert->resolveActionUrl();
  $sev = strtolower($alert->severity);
  $bg = $sev === 'critical' ? 'border-red-200 bg-red-50' : ($sev === 'warning' ? 'border-amber-200 bg-amber-50' : 'border-blue-200 bg-blue-50');
  $tc = $sev === 'critical' ? 'text-red-600' : ($sev === 'warning' ? 'text-amber-600' : 'text-blue-600');
  $bc = $sev === 'critical' ? 'bg-red-100' : ($sev === 'warning' ? 'bg-amber-100' : 'bg-blue-100');
  $icon = $alert->icon ?: $alert->severityIconClass();
@endphp
<div class="card {{ $compact ? 'p-3.5' : 'p-5' }} border-l-4 {{ $bg }} {{ $alert->is_read ? 'opacity-85' : '' }}">
  <div class="flex flex-col sm:flex-row items-start gap-3 sm:gap-4">
    <div class="w-10 h-10 rounded-xl {{ $bc }} flex items-center justify-center shrink-0">
      <i class="fa-solid {{ $icon }} {{ $tc }}"></i>
    </div>
    <div class="flex-1 min-w-0">
      <div class="flex flex-wrap items-center gap-2 mb-1">
        <p class="font-bold text-slate-900 text-[14px]">{{ $alert->title }}</p>
        <span class="badge {{ $sev === 'critical' ? 'r' : ($sev === 'warning' ? 'a' : 'b') }}">{{ ucfirst($alert->severity) }}</span>
        @if($alert->related_module)
          <span class="badge s">{{ $alert->related_module }}</span>
        @endif
        <span class="text-slate-400 text-[10px]">{{ optional($alert->triggered_at)?->diffForHumans() }}</span>
        <span class="badge {{ $alert->is_read ? 's' : 'g' }}">{{ $alert->status ?? ($alert->is_read ? 'Read' : 'Unread') }}</span>
      </div>
      <p class="text-slate-600 text-[13px] leading-relaxed">{{ $alert->message }}</p>
    </div>
    <div class="flex flex-col gap-2 flex-shrink-0 w-full sm:w-auto">
      @if($href)
        <a href="{{ $href }}" class="bsm {{ $tc }} {{ $bc }} no-underline justify-center text-center">{{ $alert->action_label ?? 'Open' }} &rarr;</a>
      @endif
      @if(! $compact)
        @if(! $alert->is_read)
          <button type="button" onclick="dachAction('{{ route('alerts.read', $alert) }}','PUT','Marked as read')" class="bsm bg-white text-slate-600 border border-slate-200">Mark read</button>
        @endif
        @if(! $alert->dismissed_at)
          <button type="button" onclick="dachAction('{{ route('alerts.dismiss', $alert) }}','PUT','Dismissed')" class="bsm bg-white text-slate-500 border border-slate-200">Dismiss</button>
        @endif
        @if(! $alert->resolved_at && in_array($alert->severity, ['critical','warning']))
          <button type="button" onclick="dachAction('{{ route('alerts.resolve', $alert) }}','PUT','Resolved')" class="bsm bg-white text-emerald-700 border border-emerald-200">Resolve</button>
        @endif
      @endif
    </div>
  </div>
</div>