<!-- Menu Search -->
<div class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">
        <!-- Icon -->
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
             class="bi bi-search"
             viewBox="0 0 16 16">
            <path
                d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
        </svg>
        <!-- Icon End -->
        <span jhiTranslate="global.menu.search">Search</span>
    </a>
    <!-- The following line is not working at the moment. Since this component is not in use, it was commented out. -->
    <form role="form"  [formGroup]="this.searchComponent.searchForm">
    <div class="dropdown-menu">
        <div class="search-container dropdown-item">
            <!-- Quick Search -->
            <h3 style="color: #b3b3b3;">Search</h3>
            <p style="color: #39a6ff;">Search courses and programs</p>
            <p style="color: #b3b3b3;">Some text to describe the search functions and<br>additional
                information. And some more text<br>for a second line</p>
            <div class="input-group mb-3">
                <!-- The following line is not working at the moment. Since this component is not in use, it was commented out. -->
                <!--<input type="text" class="form-control" id="search-placeholder"
                  placeholder="Search" (change)="searchChanged()" formControlName="fullTextSearch">-->
            </div>

            <!-- Filter options -->
            <div class="form-group">
                <label for="filter-options">Filter</label>
                <select class="form-control" id="university" name="university-list">
                    <option value="" disabled selected>Select University</option>
                    <option>Innsbruck</option>
                    <option>Salzburg</option>
                    <option>Linz</option>
                    <option>Wien</option>
                </select>
            </div>

            <div class="form-group">
                <select class="form-control" id="repository" name="repository-list">
                    <option value="" disabled selected>Select repository</option>
                    <option>Repository 1</option>
                    <option>Repository 2</option>
                    <option>Repository 3</option>
                    <option>Repository 4</option>
                </select>
            </div>

            <div class="form-group">
                <select class="form-control" id="file-format" name="file-format">
                    <option value="" disabled selected style="color: #b3b3b3;">Select file format
                    </option>
                    <option>Innsbruck</option>
                    <option>Salzburg</option>
                    <option>Linz</option>
                    <option>Wien</option>
                </select>
            </div>

            <!-- Status options -->
            <div class="form-group">
                <label for="status">Status</label>
                <select class="form-control" id="status" name="sellist1">
                    <option>Option 1</option>
                    <option>Option 2</option>
                </select>
            </div>

            <!-- difficulty options -->
            <div class="form-group">
                <label for="difficulty">Difficulty</label>
                <select class="form-control" id="difficulty" name="sellist1">
                    <option>Easy</option>
                    <option>Normal</option>
                    <option>Hard</option>
                    <option>Insane</option>
                </select>
            </div>

        </div>
    </div>
    </form>
</div> <!-- End Search -->