kahuna/public/js/search/query.html

<form class="search">
    <span class="search-query">
        <gr-icon class="search-query__magnifier search-query__icon">search</gr-icon>
        <gr-structured-query class="search-query__query"
                             ng-model="searchQuery.filter.query">
        </gr-structured-query>
        <button class="search-query__icon search-query__clear clear-button"
                type="button"
                title="Clear query"
                ng-show="searchQuery.filter.query"
                ng-click="searchQuery.resetQuery()"
                aria-label="Clear search">
            <gr-icon>cancel</gr-icon>
        </button>
    </span>

    <button class="search__advanced-toggle" ng-class="searchQuery.usePermissionsFilter ? 'search__advanced-toggle-lbl' : ''"
            type="button"
            ng-click="searchInfo = !searchInfo"
            gr-tooltip="Display advanced search information"
            aria-label="Display advanced search information">
        <gr-icon>info_outline</gr-icon>
    </button>

    <div ng-if="!searchQuery.usePermissionsFilter" class="search__modifier-container">
        <button class="search__modifier-toggle"
                type="button"
                ng-click="filtersShown = !filtersShown ">
            <gr-icon class="search__modifier-toggle__icon">filter_list</gr-icon>
            <span class="search__modifier-toggle__text">Search filters</span>
        </button>

        <ul class="search__modifier search__filter" ng-class="filtersShown ? 'search__filter--show' : 'search__filter--hide'">
            <li class="search__modifier-item search__modifier-checkbox">
                <label>
                <!-- minor mindfuck logic as we want an optional flag
                                when the option is off -->
                    <input type="checkbox"
                        ng-model="searchQuery.filter.nonFree"
                        ng-true-value="{{searchQuery.costFilterTrueValue}}"
                        ng-false-value="{{searchQuery.costFilterFalseValue}}" />
                        {{ searchQuery.costFilterLabel }}

                    <!-- TODO: Decide on correct cost filter model -->
                    <!--
                    <select ng-init="searchQuery.filter.payType = searchQuery.filter.payType || 'free'"
                            ng-model="searchQuery.filter.payType"
                            ng-options="item.value as item.label for item in searchQuery.payTypeOptions">

                    </select>
                    -->

                </label>
            </li>

            <li ng-if="searchQuery.canUpload" id="my-uploads-checkbox" class="search__modifier-item search__modifier-checkbox">
                <label>
                    <input type="checkbox"
                        ng-model="searchQuery.filter.uploadedByMe" />
                    My uploads
                </label>
            </li>

            <li ng-if="searchQuery.maybeOrgOwnedValue" id="org-owned-checkbox" class="search__modifier-item search__modifier-checkbox">
                <label>
                    <input type="checkbox"
                        ng-model="searchQuery.filter.orgOwned" />
                    {{ searchQuery.maybeOrgOwnedValue }}
                </label>
            </li>


            <li class="search__modifier-item">
                <gu-date-range class="search__date"
                               gu:start-date="searchQuery.dateFilter.since"
                               gu:end-date="searchQuery.dateFilter.until"
                               gu:preset-dates="searchQuery.sinceOptions"
                               gu:selected-field="searchQuery.dateFilter.field"
                               gu:fields="searchQuery.filterDateFieldsOptions"
                               gu:show-extras="true"
                               gu:first-day="1">
                </gu-date-range>
            </li>
        </ul>
    </div>

    <div ng-if="!searchQuery.usePermissionsFilter" class="search__modifier-container">
        <div class="search__modifier-sort">
            <sort-control class="sort-control" props="searchQuery.sortProps"></sort-control>
        </div>
    </div>

</form>

<gr-syntax ng-if="searchInfo"></gr-syntax>