-<div class="top-bar" id="structured-query-selector">
- <div class="search-type-link">
- <a id="switch-to-reverse" href="/reverse.html">reverse search</a>
- </div>
- <div class="form-check form-check-inline">
- <input class="form-check-input" type="radio" name="query-selector"
- id="simple" value="simple" {{#unless hStructured}}checked="checked"{{/unless}}>
- <label class="form-check-label" for="simple">simple</label>
- </div>
- <div class="form-check form-check-inline">
- <input class="form-check-input" type="radio" name="query-selector"
- id="structured" value="structured" {{#if hStructured}}checked="checked"{{/if}}>
- <label class="form-check-label" for="structured">structured</label>
- </div>
+<div class="top-bar">
+ <ul class="nav nav-tabs">
+ <li class="nav-item">
+ <a class="nav-link {{#unless hStructured}}active{{/unless}}" data-toggle="tab" href="#simple">simple</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link {{#if hStructured}}active{{/if}}" data-toggle="tab" href="#structured">structured</a>
+ </li>
+ <div class="search-type-link">
+ <a id="switch-to-reverse" href="/reverse.html">reverse search</a>
+ </div>
+ </ul>
+ <div class="tab-content p-2">
+ <div class="tab-pane {{#unless hStructured}}active{{/unless}}" id="simple" role="tabpanel">
+ <form class="form-inline" role="search" accept-charset="UTF-8" action="">
+ <input id="q"
+ name="q"
+ type="text"
+ class="form-control form-control-sm"
+ placeholder="Search"
+ value="{{sQuery}}" />