@props(['query' => '', 'large' => false, 'filters' => []])
@php
    $searchLabels = [
        'park' => __('ui.type_park'),
        'coaster' => __('ui.type_coaster'),
        'attraction' => __('ui.type_attraction'),
        'user' => __('ui.type_user'),
        'group' => __('ui.type_group'),
        'manufacturer' => __('ui.type_manufacturer'),
        'country' => __('ui.type_country'),
    ];
@endphp
<div class="global-search-shell" data-global-search data-suggest-url="{{ route('search.suggest') }}" data-search-url="{{ route('search') }}" data-type-labels='@json($searchLabels)' data-see-all="{{ __('ui.search_see_all') }}" data-no-suggestions="{{ __('ui.search_no_suggestions') }}">
    <form action="{{ route('search') }}" method="GET" class="search-bar {{ $large ? 'search-bar-large' : '' }}" role="search" autocomplete="off">
        <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.8-3.8"/></svg>
        <input type="search" name="q" value="{{ $query }}" placeholder="{{ __('ui.search_placeholder') }}" autocomplete="off" aria-autocomplete="list" aria-expanded="false" data-global-search-input>
        @foreach(['type', 'country', 'manufacturer', 'status'] as $filterKey)
            @if(!empty($filters[$filterKey]) && !($filterKey === 'type' && $filters[$filterKey] === 'all'))
                <input type="hidden" name="{{ $filterKey }}" value="{{ $filters[$filterKey] }}">
            @endif
        @endforeach
        <button type="submit">{{ __('ui.search_button') }}</button>
    </form>
    <div class="search-suggest-panel" data-global-search-panel hidden>
        <div class="search-suggest-status" data-global-search-status>{{ __('ui.search_suggest_hint') }}</div>
        <div class="search-suggest-list" data-global-search-list role="listbox"></div>
    </div>
</div>