<div class="col-md-12">
    <h2 class="display-4" jhiTranslate="search.title">Welcome!</h2>

    <span jhiTranslate="search.usage">The search mask allows you to search for full texts in the sharing platform based on various search criteria (e.g., full-text search, programming languages, keywords, etc.). Boolean operators can be used in the search mask for full texts. Apart from the full-text search, no further fields are to be specified.</span>&nbsp;
    <ng-container [queryParamGroup]="paramGroup">
        <div class="row">
            <div class="col-sm-12">
                <form name="searchForm" class="form-inline">
                    <div class="input-group w-100 mt-3">
                        <input type="text" class="form-control" queryParamName="searchText" (change)="searchChanged()"
                               placeholder="{{ 'search.filters.search' | translate }}"/>
                    </div>
                </form>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-3">
                <form name="searchForm" class="form-inline">
                    <div class="input-group w-100 mt-3">
                        <input type="text" class="form-control" queryParamName="programmingLanguage"
                               placeholder="{{ 'search.filters.programmingLanguage' | translate }}"/>
                    </div>
                </form>
            </div>
            <div class="col-sm-3">
                <form name="searchForm" class="form-inline">
                    <div class="input-group w-100 mt-3">
                        <input type="text" class="form-control" queryParamName="keyword"
                               placeholder="{{ 'search.filters.keywords' | translate }}"/>
                    </div>
                </form>
            </div>
            <div class="col-sm-3">
                <form name="searchForm" class="form-inline">
                    <div class="input-group w-100 mt-3">
                        <input type="text" class="form-control" queryParamName="author"
                               placeholder="{{ 'search.filters.author' | translate }}"/>
                    </div>
                </form>
            </div>
            <div class="col-sm-3">
                <form name="searchForm" class="form-inline">
                    <div class="input-group w-100 mt-3">
                        <input type="text" class="form-control" queryParamName="license"
                               placeholder="{{ 'search.filters.license' | translate }}"/>
                    </div>
                </form>
            </div>
        </div>
    </ng-container>
</div>