@props([
    'name',
    'placeholder' => 'Search...',
    'value' => '',
    'filterTarget' => null, // ID offcanvas
    'disabled' => false,
    'errorsBag' => null,
])

@php
    $inputId = $attributes->get('id') ?? $name;
    $bag = $errorsBag ?? $errors ?? session('errors');
    $hasError = $bag && $bag->has($name);
@endphp

<div class="fluent-input-search">

    <div class="input-group {{ $hasError ? 'is-invalid' : '' }}">

        {{-- INPUT --}}
        <input 
            type="text"
            name="{{ $name }}"
            id="{{ $inputId }}"
            class="form-control"
            placeholder="{{ $placeholder }}"
            value="{{ old($name, $value) }}"
            autocomplete="off"
            {{ $disabled ? 'disabled' : '' }}
        />

        {{-- SEARCH BUTTON (SUBMIT) --}}
        <x-fluent-button 
            aria-label="Submit Input Search"
            type="submit"
            variant="subtle"
            icon="search"
        />

        {{-- FILTER BUTTON (OFFCANVAS TRIGGER) --}}
        @if($filterTarget)
            <x-fluent-button
                aria-label="Filter Input Search"
                type="button"
                variant="subtle"
                icon="filter"
                data-offcanvas-open="{{ $filterTarget }}"
            />
        @endif

    </div>

</div>