{{-- Search Box for tables --}}
@props([
    'name'        => 'search',
    'value'       => '',
    'placeholder' => __('pages/common.search_ellipsis'),
])

@php
    $c = 'block w-full rounded-lg border border-input bg-card py-2 ps-9 pe-3 text-sm text-card-foreground shadow-sm transition-colors duration-200 placeholder:text-muted-foreground focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20 dark:focus:border-primary-400';
@endphp

<div class="relative">
    <svg class="pointer-events-none absolute start-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground"
         fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
    </svg>
    <input
        type="search"
        name="{{ $name }}"
        value="{{ $value }}"
        placeholder="{{ $placeholder }}"
        {{ $attributes->merge(['class' => $c]) }}
    />
</div>