<div class="navbar">
    <a href="/" class="lyphe">
        <div id="lyphesmall">
            <div class="bent-surrounding">
                <img id="lypheimg" src="/static/img/lyphebent{% if alpha %}-alpha{% endif %}.png"
                     alt="image of lyphe, our mascot!">
            </div>
            <div id="lyphetitlenav">
                <img src="/static/img/logo.png" alt="ask lyphe!"/>
            </div>
        </div>
    </a>
    <div class="ask">
        <form action="/ask" method="get">
            <label for="askbox" class="lyphe-label">ask me anything!</label>
            <div class="search">
                <input type="text" id="askbox" name="q" required="" value="{{ search_query }}"
                       placeholder="search away~!">
                <button type="submit" id="askbox_submit">ask!</button>
            </div>
            <div id="javascript_feature"></div>
            <script>
                const el = document.getElementById("javascript_feature");
                const inp = document.createElement("input");
                inp.type = "hidden";
                inp.name = "js";
                inp.value = "1";
                el.appendChild(inp);
            </script>
        </form>
    </div>
</div>