<form
    class="container p-2 sticky-top mx-auto"
    id="search_form"
    action="/node_search"
>
    <div class="row">
        <input
            class="col m-2"
            id="q"
            type="text"
            name="q"
            placeholder="Node id"
            autocomplete="off"
            list="node_options"
            value="{{raw_node_id}}"
            hx-trigger="input delay:100ms"
            hx-get="/node_match"
            hx-target="#node_options"
        />
        {% include "datalist.html" %}
        {% set options = {
                1: "Text Message",
                3: "Position",
                4: "Node Info",
                67: "Telemetry",
                70: "Traceroute",
                71: "Neighbor Info",
            }
        %}
        <select name="portnum" class="col-2 m-2">
            <option
                value = ""
                {% if portnum not in options %}selected{% endif %}
            >All</option>
            {% for value, name in options.items() %}
            <option
                value="{{value}}"
                {% if value == portnum %}selected{% endif %}
            >{{ name }}</option>
            {% endfor %}
        </select>
        <input type="submit" value="Go to Node" class="col-2 m-2" />
    </div>
</form>
