{# Bulk actions toolbar — delete-only, pure Tailwind #}
{# State managed by dzTable Alpine component — bulkCount, bulkDelete(), clearSelection() #}
<div x-show="bulkCount > 0"
     x-cloak
     x-transition:enter="transition ease-out duration-100"
     x-transition:enter-start="opacity-0 translate-y-1"
     x-transition:enter-end="opacity-100 translate-y-0"
     x-transition:leave="transition ease-in duration-75"
     x-transition:leave-start="opacity-100 translate-y-0"
     x-transition:leave-end="opacity-0 translate-y-1"
     class="flex items-center gap-3">

  {# Delete N items #}
  <button
    @click="bulkDelete()"
    type="button"
    class="flex items-center gap-1.5 h-8 px-3 rounded-[4px] text-[13px] text-[hsl(var(--destructive))] hover:bg-[hsl(var(--destructive)/0.08)] [transition-timing-function:cubic-bezier(0.2,0,0,1)] transition-colors duration-[120ms]">
    {# Trash icon #}
    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
         stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
         aria-hidden="true">
      <polyline points="3 6 5 6 21 6"></polyline>
      <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path>
      <path d="M10 11v6"></path>
      <path d="M14 11v6"></path>
      <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"></path>
    </svg>
    <span>Delete <span x-text="bulkCount">0</span> item<span x-show="bulkCount !== 1">s</span></span>
  </button>

  {# Clear selection #}
  <button
    @click="clearSelection()"
    type="button"
    class="text-[13px] text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))] [transition-timing-function:cubic-bezier(0.2,0,0,1)] transition-colors duration-[120ms]">
    Clear selection
  </button>

</div>