From d55c69954943d098906c746a027330a978012c1b Mon Sep 17 00:00:00 2001
From: Allan Eising <allan@eising.dk>
Date: Wed, 18 Jun 2025 19:15:12 +0200
Subject: [PATCH] Set breadcrumb dynamically

---
 .../frontend/templates/base/page.html.j2           |  2 +-
 .../templates/clients/partials/tree_event.js       | 14 ++++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/sshecret-admin/src/sshecret_admin/frontend/templates/base/page.html.j2 b/packages/sshecret-admin/src/sshecret_admin/frontend/templates/base/page.html.j2
index 6ca2ac1..fd54b7d 100644
--- a/packages/sshecret-admin/src/sshecret_admin/frontend/templates/base/page.html.j2
+++ b/packages/sshecret-admin/src/sshecret_admin/frontend/templates/base/page.html.j2
@@ -7,7 +7,7 @@
   <div class="p-4 bg-white block sm:flex items-center justify-between border-b border-gray-200">
     <nav class="text-sm text-gray-500" aria-label="Breadcrumb">
 
-      <sl-breadcrumb>
+      <sl-breadcrumb id="breadcrumbs">
         <sl-breadcrumb-item>
           <sl-icon slot="prefix" name="house"></sl-icon>
           <a href="/">Home</a>
diff --git a/packages/sshecret-admin/src/sshecret_admin/frontend/templates/clients/partials/tree_event.js b/packages/sshecret-admin/src/sshecret_admin/frontend/templates/clients/partials/tree_event.js
index ce1f655..9cbab6f 100644
--- a/packages/sshecret-admin/src/sshecret_admin/frontend/templates/clients/partials/tree_event.js
+++ b/packages/sshecret-admin/src/sshecret_admin/frontend/templates/clients/partials/tree_event.js
@@ -1,3 +1,16 @@
+function setBreadcrumb(name) {
+  // Set the current client name as the final breadcrumb
+  const breadcrumbs = document.getElementById("breadcrumbs");
+  const existingNode = document.getElementById("bc-dynamic-client");
+  if (existingNode) {
+    breadcrumbs.removeChild(existingNode);
+  }
+  const newCrumb = document.createElement("sl-breadcrumb-item");
+  newCrumb.setAttribute("id", "bc-dynamic-client");
+  const bcTitle = document.createTextNode(name);
+  newCrumb.appendChild(bcTitle);
+  breadcrumbs.appendChild(newCrumb);
+}
 function addTreeListener() {
   const tree = document.querySelector("sl-tree");
 
@@ -28,6 +41,7 @@ function addTreeListener() {
         .then(() => {
           masterPane.classList.add("hidden");
           detailPane.classList.remove("hidden");
+          setBreadcrumb(name);
         });
     }
   });