@props([
    'placeholder' => 'Search...',
    'name' => 'search',
    'value' => '',
    'showShortcut' => true,
    'global' => false,
])

<div {{ $attributes->merge(['class' => 'bv-search-bar']) }}>
    <i class="bi bi-search bv-search-bar__icon" aria-hidden="true"></i>
    <input type="search"
           name="{{ $name }}"
           value="{{ $value }}"
           class="bv-search-bar__input"
           placeholder="{{ $placeholder }}"
           @if($global) data-bv-global-search @endif
           aria-label="{{ $placeholder }}">
    @if($showShortcut)
        <kbd class="bv-search-bar__shortcut d-none d-md-inline">Ctrl+K</kbd>
        <kbd class="bv-search-bar__shortcut d-none d-md-inline ms-1">/</kbd>
    @endif
</div>