websurfx/public/templates/search_bar.html

<div class="search_area">
    {{>bar this}}
        <div class="error_box">
            {{#if engineErrorsInfo}}
            <button onclick="toggleErrorBox()" class="error_box_toggle_button">
                <img src="./images/warning.svg" alt="Info icon for error box" />
            </button>
            <div class="dropdown_error_box">
                {{#each engineErrorsInfo}}
                <div class="error_item">
                    <span class="engine_name">{{{this.engine}}}</span>
                    <span class="engine_name">{{{this.error}}}</span>
                    <span class="severity_color" style="background: {{{this.severity_color}}};"></span>
                </div>
                {{/each}}
            </div>
            {{else}}
            <button onclick="toggleErrorBox()" class="error_box_toggle_button">
                <img src="./images/info.svg" alt="Warning icon for error box" />
            </button>
            <div class="dropdown_error_box">
                <div class="no_errors">
                    Everything looks good 🙂!!
                </div>
            </div>
            {{/if}}
        </div>
    </div>
    <div class="search_options">
        <select name="safe_search_levels" {{#if (gte safeSearchLevel 3)}} disabled {{/if}}>
                <option value=0 {{#if (eq safeSearchLevel 0)}} selected {{/if}}>SafeSearch: None</option>
                <option value=1 {{#if (eq safeSearchLevel 1)}} selected {{/if}}>SafeSearch: Low</option>
                <option value=2 {{#if (eq safeSearchLevel 2)}} selected {{/if}}>SafeSearch: Moderate</option>
        </select>
    </div>
</div>