From 00f8af98a236070f3a100f78860e7bee6dd0a2ce Mon Sep 17 00:00:00 2001
From: "andreas.mantas" <andreas_mantas@hotmail.com>
Date: Fri, 13 Aug 2021 10:40:14 +0000
Subject: [PATCH] add search bar on landscape view

---
 .../shared/topmenu/top-menu.component.html    | 33 +++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/src/app/shared/topmenu/top-menu.component.html b/src/app/shared/topmenu/top-menu.component.html
index a8779a3bc..429bb2724 100644
--- a/src/app/shared/topmenu/top-menu.component.html
+++ b/src/app/shared/topmenu/top-menu.component.html
@@ -157,6 +157,39 @@
               </a>
             </div>
 
+            <div class="uk-navbar-center">
+
+              <div class="uk-autocomplete uk-form uk-search uk-search-default searchForCountry">
+                <span id="search-icon" uk-search-icon></span>
+                <ng-autocomplete
+                  [data]="countriesCollection"
+                  [searchKeyword]="keyword"
+                  placeHolder="Search for a country..."
+                  (selected)='selectCountryFromAutocompleteEvent($event)'
+                  (inputChanged)='onChangeSearch($event)'
+                  (inputFocused)='onFocused($event)'
+                  historyIdentifier="countriesCollection"
+                  [itemTemplate]="itemTemplate"
+                  [notFoundTemplate]="notFoundTemplate">
+                </ng-autocomplete>
+
+                <ng-template #itemTemplate let-item>
+                  <a [innerHTML]="item.name"></a>
+                </ng-template>
+
+                <ng-template #notFoundTemplate let-notFound>
+                  <div [innerHTML]="notFound"></div>
+                </ng-template>
+              </div>
+
+              <!--<div class="uk-autocomplete uk-form uk-search uk-search-default searchForCountry" data-uk-autocomplete="{source:'https://getuikit.com/v2/tests/components/_autocomplete.json'}">-->
+              <!--<span uk-search-icon></span>-->
+              <!--<input class="uk-search-input" type="search" placeholder="Search for a country...">-->
+              <!--&lt;!&ndash;<input type="text">&ndash;&gt;-->
+              <!--</div>-->
+
+            </div>
+
             <div class="uk-navbar-right">
 
               <ul class="uk-navbar-nav" >