@props(['route', 'actions' => []])

<div x-show="selectedIds.length > 0" x-cloak
     class="flex items-center gap-3 rounded-xl border border-brand-200 bg-brand-50 px-4 py-3 mb-3 dark:border-brand-800 dark:bg-brand-950/30">
    <span class="text-sm font-bold text-brand-700 dark:text-brand-300">
        {{ __('dashboard.Selected') }}: <span x-text="selectedIds.length"></span>
    </span>

    <form :action="'{{ $route }}'" method="POST" class="flex items-center gap-2">
        @csrf
        <template x-for="id in selectedIds" :key="id">
            <input type="hidden" name="ids[]" :value="id">
        </template>

        <select name="action"
                class="rounded-lg border border-brand-200 bg-white px-3 py-1.5 text-sm font-semibold text-surface-700 outline-none focus:border-brand-400 dark:border-brand-700 dark:bg-surface-900 dark:text-surface-200">
            @foreach($actions as $item)
                <option value="{{ $item['value'] }}">{{ $item['label'] }}</option>
            @endforeach
        </select>

        <button type="submit"
                class="inline-flex items-center gap-1.5 rounded-lg bg-brand-600 px-3 py-1.5 text-sm font-bold text-white transition hover:bg-brand-700">
            <i class="fa-solid fa-bolt text-xs"></i>
            {{ __('dashboard.Apply') }}
        </button>
    </form>

    <button type="button" @click="selectedIds = []; selectAll = false"
            class="ms-auto text-xs font-bold text-surface-400 hover:text-surface-600 dark:hover:text-surface-200">
        {{ __('dashboard.Clear') }}
    </button>
</div>