<div class="card-container">
    <h2 class="display-4" style="width: 100%;" jhiTranslate="search.title">Search!</h2>
    <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 }}"/>
                    <ng-template #helpFulltext> {{ 'search.help.fulltext' | translate}}</ng-template>
                    <fa-icon style="padding: 10px 0px 0px 10px;" [ngbTooltip]="helpFulltext" container="body" [icon]="questionIcon"></fa-icon>
                </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" [ngbTypeahead]="autoCompleteProgrammingLanguage" 
                           placeholder="{{ 'search.filters.programmingLanguage' | translate }}"/>
                    <ng-template #helpPL> {{ 'search.help.programmingLanguage' | translate}}</ng-template>
                    <fa-icon style="padding: 10px 0px 0px 10px;" [ngbTooltip]="helpPL" container="body"  [icon]="questionIcon"></fa-icon>
                </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" [ngbTypeahead]="autoCompleteKeyWords"
                           placeholder="{{ 'search.filters.keywords' | translate }}"/>
                    <ng-template #helpKeyword> {{ 'search.help.keywords' | translate}}</ng-template>
                    <fa-icon style="padding: 10px 0px 0px 10px;" [ngbTooltip]="helpKeyword" container="body" [icon]="questionIcon"></fa-icon>
                </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" name="author" [ngbTypeahead]="autoCompleteContributorCreator" 
                           placeholder="{{ 'search.filters.author' | translate }}"/>
                    <ng-template #helpauthorContritbutors data-container="body"> {{ 'search.help.authorContritbutors' | translate}}</ng-template>
                    <fa-icon style="padding: 10px 0px 0px 10px;" [ngbTooltip]="helpauthorContritbutors" container="body" [icon]="questionIcon"></fa-icon>
                </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 }}"/>
                    <ng-template #helpLicense> {{ 'search.help.license' | translate}}</ng-template>
                    <fa-icon style="padding: 10px 0px 0px 10px;" [ngbTooltip]="helpLicense" container="body"  [icon]="questionIcon"></fa-icon>
                </div>
            </form>
        </div>
        <div>
            <form name="searchForm" class="form-inline">
                 <div class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);">
                       <span jhiTranslate="exercise.metadata.type">Type</span>
                    </a><span *ngFor="let type of getSelectedTypes(), let isLast=last">{{'exercise.metadata.' + type | translate}}{{isLast ? '' : ', '}}</span>
                    <div class="dropdown-menu" style="padding-left: 10px;">
                    <table><tr *ngFor="let type of typeValues"><td>
                        <input class="form-check-input" [value]="type" type="checkbox" queryParamName="{{type}}">
                        </td><td style="text-align: left;">
                        <label class="form-check-label" style="display: inline-block;align-items: left" for="type">{{'exercise.metadata.' + type | translate}}</label>
                        </td></table>
                    </div>
                </div>
            
            </form>
        </div>
        <div>
            <form name="searchFormLanguage" class="form-inline">
                 <div class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);">
                       <span jhiTranslate="exercise.metadata.language.mix">Language(s)</span>
                    </a><span *ngFor="let language of getSelectedLanguages(), let isLast=last">{{'exercise.metadata.' + language | translate}}{{isLast ? '' : ', '}}</span>
                    <div class="dropdown-menu" style="padding-left: 10px;">
                    <table><tr *ngFor="let language of languageValues"><td>
                        <input class="form-check-input" [value]="language" type="checkbox" queryParamName="{{language}}">
                        </td><td style="text-align: left;">
                        <label class="form-check-label" style="display: inline-block;align-items: left" for="language">{{'exercise.metadata.' + language | translate}}</label>
                        </td></table>
                    </div>
                </div>
            
            </form>
        </div>
    </ng-container>
</div>