<div class="row">
    <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;

        <div [ngSwitch]="isAuthenticated()">
            <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"
                                       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="keywords"
                                       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 class="row">
                <div class="col-2">
                    <ng-container *ngIf="gitFilesAggregation">
                        <br>
                        <h3 jhiTranslate="search.metadata.filter">Search Filter</h3>

                        <div class="filter">
                            <ng-select
                                [hidden]="gitFilesAggregation?.repositories == null"
                                [items]="repos"
                                bindLabel="key"
                                [multiple]="true"
                                (change)="filter()"
                                [(ngModel)]="searchInput.fulltextSelection.repository"
                                placeholder="{{ 'search.metadata.repository' | translate }}">
                            </ng-select>
                        </div>

                        <div class="filter">
                            <ng-select
                                [hidden]="gitFilesAggregation?.university == null"
                                [items]="university"
                                bindLabel="key"
                                [multiple]="true"
                                (change)="filter()"
                                [(ngModel)]="searchInput.fulltextSelection.university"
                                placeholder="{{ 'search.metadata.university' | translate }}">
                            </ng-select>
                        </div>

                        <div class="filter">
                            <ng-select
                                [hidden]="gitFilesAggregation?.fileFormat == null"
                                [items]="fileFormat"
                                bindLabel="key"
                                [multiple]="true"
                                (change)="filter()"
                                [(ngModel)]="searchInput.fulltextSelection.fileFormat"
                                placeholder="{{ 'search.metadata.fileFormat' | translate }}">
                            </ng-select>
                        </div>

                        <hr>

                        <h3 jhiTranslate="search.metadata.information">Search information</h3>

                        <jhi-home-metadata [frequencies]="gitFilesAggregation?.repositories"
                                           [parameter]="'repository'"></jhi-home-metadata>
                        <jhi-home-metadata [frequencies]="gitFilesAggregation?.university"
                                           [parameter]="'university'"></jhi-home-metadata>
                        <jhi-home-metadata [frequencies]="gitFilesAggregation?.fileFormat"
                                           [parameter]="'fileFormat'"></jhi-home-metadata>
                    </ng-container>
                </div>

                <div class="col-10">
                    <ng-container *ngIf="gitFilesPageDetails">
                        <hr>
                        <h2 id="home-logged-message" jhiTranslate="search.searchResult.title"
                            [translateValues]="{ results: gitFilesPageDetails?.hitCount || 0 }">search
                            results</h2>
                    </ng-container>
                    <hr [hidden]="gitFilesAggregation == null">

                    <div *ngIf="gitFilesPageDetails?.gitFiles !== null">
                        <div
                            *ngFor="let gitFile of gitFiles">
                            <a (click)="onClickMe(gitFile)">{{ gitFile.filePath}}</a>
                            <div class="solid">
                                <div class="row">
                                    <jhi-home-highlighting [gitFiles]="gitFile"></jhi-home-highlighting>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-sm">
                                <span class="info"><fa-icon icon="language"></fa-icon>
                                    {{gitFile.fileFormat}}</span>
                                </div>
                                <div class="col-sm">
                                <span class="info"><fa-icon icon="book"></fa-icon>
                                    {{gitFile.repository}}</span>
                                </div>
                            </div>

                            <hr>
                        </div>
                    </div>
                    <div class="d-flex justify-content-center">
                        <ngb-pagination
                            (pageChange)="onPageChange($event)"
                            [hidden]="hitCount == 0"
                            [(page)]="searchInput.page"
                            [pageSize]="pageSize"
                            [boundaryLinks]="true"
                            [maxSize]="5"
                            [rotate]="true"
                            [collectionSize]="hitCount"></ngb-pagination>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>