<header>
    <nav>
        <ul class="top-buttons">
            <div class="nav-button song">
                <a href="{{ url_for('songindex') }}">
                    <li><img src="{{ url_for('static', filename='songicon.png') }}" alt="Song Index" class="nav-image"/>
                    <h3 class="nav-text song">Songs</h3>
                </li></a>
            </div>
            <div class="nav-button home">
                <a href="{{ url_for('homepage') }}"><li>
                    <img src="{{ url_for('static', filename='songbook.png') }}" alt="Home" class="nav-image" />
                </li></a>
            </div>
            <div class="nav-button motif">
                <a href="{{ url_for('motifindex') }}"><li>
                    <img src="{{ url_for('static', filename='motificon.png') }}" alt="Motif Index" class="nav-image" />
                    <h3 class="nav-text motif">Motifs</h3>
                </li></a>
            </div>
        </ul>
    </nav>
</header>

<div id="top-search" class="search-bar search-empty">
    <!-- <span class="search-icon"></span> -->
    <button id="search-button" class="search-clear hidden" onclick="clearSearch('search-input', 'search-results-header', event)">🗙</button>
    <div class="search-items">
        <input
            id="search-input"
            type="text"
            name="q"
            autocomplete="off"
            placeholder=" Search..."
            hx-get="/search"
            hx-trigger="keyup changed delay:250ms, search"
            hx-target="#search-results-header"
            oninput="searchIconChange(event, 'search-button', 'top-search')"
        />
        <div id="search-results-header" class="search-results header"></div>
    </div>
</div>
