<div class="card-container">
    <h2 class="display-4" style="float: left; width: 100%;" jhiTranslate="search.title">Welcome!</h2>
    <div style="width: 100%; margin-bottom: 20px;">
        <button type="button"
                class="btn btn-outline-secondary"
                (click)="showSearchUsage = !showSearchUsage"
        >{{ (showSearchUsage ? 'search.hideUsage' : 'search.showUsage') | translate}}</button>
    </div>

    <span *ngIf="showSearchUsage" 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>
            <form name="searchForm" class="form-inline">
                <div class="input-group w-100 mt-3">
                    <input type="text" class="form-control" queryParamName="searchText"
                           placeholder="{{ 'search.filters.search' | translate }}"/>
                </div>
            </form>
        </div>

        <div>
            <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>
            <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>
            <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>
            <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>
    </ng-container>
</div>