@props([
    'linhas',
    'placeholder' => __('Digite a linha, bairro ou destino'),
])

<div class="ma-hero__search horarios-linha-combobox horarios-linha-select-wrap"
    id="horarios-linha-combobox"
    data-msg-sem-resultados="{{ __('Nenhuma linha encontrada.') }}">

    <label class="visually-hidden" for="horarios-linha-search">
        {{ __('Buscar linha, bairro ou destino') }}
    </label>

    <div class="horarios-linha-combobox__control ma-hero__search-inner"
        role="combobox"
        aria-expanded="false"
        aria-haspopup="listbox"
        aria-owns="horarios-linha-listbox">

        <i class="fa-solid fa-magnifying-glass ma-hero__search-icon" aria-hidden="true"></i>

        <input type="search"
            id="horarios-linha-search"
            class="ma-hero__search-input horarios-linha-combobox__input"
            placeholder="{{ $placeholder }}"
            autocomplete="off"
            aria-autocomplete="list"
            aria-controls="horarios-linha-listbox"
            aria-label="{{ __('Buscar linha') }}"
            enterkeyhint="search">

        <button type="button" class="btn ma-hero__search-btn d-none d-lg-inline-flex" id="ma-hero-search-submit">
            {{ __('Buscar') }}
        </button>
    </div>

    <ul id="horarios-linha-listbox"
        class="horarios-linha-combobox__list d-none"
        role="listbox"
        aria-label="{{ __('Linhas') }}"
        tabindex="-1"></ul>

    <select id="horarios-linha-combobox-source"
        class="d-none"
        aria-hidden="true"
        tabindex="-1">
        @foreach ($linhas as $linha)
            <option value="{{ $linha->codigo }}"
                data-linha-id="{{ $linha->id }}"
                data-codigo="{{ $linha->codigo }}"
                data-nome="{{ $linha->nome }}"
                data-label="{{ $linha->codigo }} - {{ $linha->nome }}">
                {{ $linha->codigo }} - {{ $linha->nome }}
            </option>
        @endforeach
    </select>
</div>