<header class="topbar">
    <div class="breadcrumb">
        <a href="#menu" class="open-menu icon-menu screenreader" title="Open Menu">Open Menu</a>
        <a class="project" href="{{ source_base_url }}">/</a>
        {% for name, url in breadcrumb_urls %}
            <a href="{{ url }}">{{ name }}</a>
            {{ '/' if not loop.last else '' }}
        {% endfor %}
    </div>
    <div class="search">
        <form method="GET" action="{{ ident_base_url }}" id="search-form">
            <select name="f" title="Restricts search to specific file families">
            {% for id, description in topbar_families.items() %}
                <option value="{{ id }}" {{ 'selected' if (current_family == id or current_family is not defined) else '' }}>
                {{ description }}
                </option>
            {% endfor %}
            </select>

            <div class="search-controls">
                <input placeholder="Search Identifier" type="text" id="search-input" name="i"
                    value="{{ searched_ident|default('')|e }}" autofocus required/>
                <button type="button" id="clear-search" class="visible-if-js icon-cross"><span class="screenreader">Clear</span></button>
                <button type="submit" class="icon-search"><span class="screenreader">Go get it</span></button>
            </div>
        </form>
    </div>
</header>
