From cf2bfed7041d1ef75ea03a272c5f7bf4ecd536b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juraj=20Nyi=CC=81ri?= <jnyiri@sk.ibm.com>
Date: Sat, 8 May 2021 17:18:20 +0200
Subject: [PATCH] Add: Search element

---
 dist/plex-meets-homeassistant.js | 21 +++++++++++++++++++++
 src/modules/style.ts             | 11 +++++++++++
 src/plex-meets-homeassistant.ts  | 14 ++++++++++++++
 3 files changed, 46 insertions(+)

diff --git a/dist/plex-meets-homeassistant.js b/dist/plex-meets-homeassistant.js
index 1192728..f142025 100644
--- a/dist/plex-meets-homeassistant.js
+++ b/dist/plex-meets-homeassistant.js
@@ -19227,6 +19227,17 @@ style.textContent = css `
 		scrollbar-width: none;
 	}
 
+	.searchContainer {
+		position: relative;
+		z-index: 3;
+	}
+
+	.searchContainer input {
+		width: 100%;
+		padding: 10px;
+		margin-bottom: 10px;
+	}
+
 	.detail {
 		visibility: hidden;
 		max-height: ${CSS_STYLE.expandedHeight + 16}px;
@@ -19539,6 +19550,16 @@ class PlexMeetsHomeAssistant extends HTMLElement {
             }
             this.card.appendChild(this.content);
             this.appendChild(this.card);
+            const searchContainer = document.createElement('div');
+            searchContainer.className = 'searchContainer';
+            const searchInput = document.createElement('input');
+            searchInput.type = 'text';
+            searchInput.placeholder = `Search ${this.config.libraryName}...`;
+            searchInput.addEventListener('keyup', () => {
+                console.log(searchInput.value);
+            });
+            searchContainer.appendChild(searchInput);
+            this.content.appendChild(searchContainer);
             let count = 0;
             const contentbg = document.createElement('div');
             contentbg.className = 'contentbg';
diff --git a/src/modules/style.ts b/src/modules/style.ts
index 7d39dfb..a0ba8b9 100644
--- a/src/modules/style.ts
+++ b/src/modules/style.ts
@@ -90,6 +90,17 @@ style.textContent = css`
 		scrollbar-width: none;
 	}
 
+	.searchContainer {
+		position: relative;
+		z-index: 3;
+	}
+
+	.searchContainer input {
+		width: 100%;
+		padding: 10px;
+		margin-bottom: 10px;
+	}
+
 	.detail {
 		visibility: hidden;
 		max-height: ${CSS_STYLE.expandedHeight + 16}px;
diff --git a/src/plex-meets-homeassistant.ts b/src/plex-meets-homeassistant.ts
index e82773e..3cc32e8 100644
--- a/src/plex-meets-homeassistant.ts
+++ b/src/plex-meets-homeassistant.ts
@@ -158,6 +158,20 @@ class PlexMeetsHomeAssistant extends HTMLElement {
 		this.card.appendChild(this.content);
 		this.appendChild(this.card);
 
+		const searchContainer = document.createElement('div');
+		searchContainer.className = 'searchContainer';
+
+		const searchInput = document.createElement('input');
+		searchInput.type = 'text';
+		searchInput.placeholder = `Search ${this.config.libraryName}...`;
+
+		searchInput.addEventListener('keyup', () => {
+			console.log(searchInput.value);
+		});
+
+		searchContainer.appendChild(searchInput);
+		this.content.appendChild(searchContainer);
+
 		let count = 0;
 
 		const contentbg = document.createElement('div');