add program tags interface to new block modal

layout.html

@@ -722,6 +722,32 @@
 				});
 			}
 
+			const fetch_block_tags = async (block_id) => {
+				const id = block_id || 0;
+				const api_url = "tags.php?block_id=" + id;
+				fetch(api_url).then((response) => {
+					if (response.ok) {
+						response.json().then((tags) => {
+							const container = document.querySelector("#new_block_program_tags");
+							container.innerHTML = "";
+							for (var i = 0; i < tags.length; i++) {
+								const enabled_class = tags[i]['enabled'] === 'true' ? 'enabled' : 'disabled';
+								const new_span = `<span class='tag ${enabled_class}' data-id='${tags[i]['id']}'>${tags[i]['tag']}</span>`;
+								container.innerHTML += new_span;
+							}
+							block_tag_editor_handlers();
+						});
+					} else {
+						console.log("fetch_block_tags failed!");
+						console.dir(response);
+					}
+				});
+			}
+
+			const fetch_slot_tags = async (slot_id) => {
+
+			}
+
 			// tab handlers
 			document.getElementById("library_tab").addEventListener("click", (e) => {
 				setActiveTab(e);
@@ -938,6 +964,24 @@
 				});
 			}
 
+			const block_tag_editor_handlers = () => {
+				const enabled_tags = document.querySelectorAll(".tag.enabled");
+				const disabled_tags = document.querySelectorAll(".tag.disabled");
+
+				enabled_tags.forEach((tag) => {
+					tag.addEventListener("click", (e) => {
+						e.preventDefault();
+						e.target.classList.remove('enabled').add('disabled');
+					});
+				});
+				disabled_tags.forEach((tag) => {
+					tag.addEventListener("click", (e) => {
+						e.preventDefault();
+						e.target.classList.remove('disabled').add('enabled');
+					});
+				});
+			}
+
 			document.getElementById("epg_tab").addEventListener("click", (e) => {
 				setActiveTab(e);
 				document.querySelector("#tab_content").innerHTML = "<h2>EPG</h2>"