From 44e9d20d35bd70a550858b90897a2680d404097f Mon Sep 17 00:00:00 2001
From: Graham McIntie <graham@mcintire.me>
Date: Sat, 14 Feb 2026 14:41:29 -0600
Subject: [PATCH] fix: NetBox sync direction cards now clickable via phx-click
 instead of hidden radio buttons

---
 lib/towerops_web/live/org/settings_live.ex    |   5 +
 .../live/org/settings_live.html.heex          | 114 ++++++++----------
 2 files changed, 55 insertions(+), 64 deletions(-)

diff --git a/lib/towerops_web/live/org/settings_live.ex b/lib/towerops_web/live/org/settings_live.ex
index 66b72f12..6981c7fd 100644
--- a/lib/towerops_web/live/org/settings_live.ex
+++ b/lib/towerops_web/live/org/settings_live.ex
@@ -310,6 +310,11 @@ defmodule ToweropsWeb.Org.SettingsLive do
   end
 
   @impl true
+  def handle_event("set_netbox_sync_direction", %{"direction" => direction}, socket) do
+    netbox_config = Map.put(socket.assigns.netbox_config, "sync_direction", direction)
+    {:noreply, assign(socket, :netbox_config, netbox_config)}
+  end
+
   def handle_event("validate_integration", %{"integration" => params}, socket) do
     integration = get_current_integration(socket)
 
diff --git a/lib/towerops_web/live/org/settings_live.html.heex b/lib/towerops_web/live/org/settings_live.html.heex
index 0189708c..1700df20 100644
--- a/lib/towerops_web/live/org/settings_live.html.heex
+++ b/lib/towerops_web/live/org/settings_live.html.heex
@@ -1137,34 +1137,26 @@
                     <p class="text-xs text-gray-500 dark:text-gray-400 mb-4 ml-6">
                       Choose how data flows between TowerOps and NetBox. You can change this later.
                     </p>
+                    <input
+                      type="hidden"
+                      name="integration[sync_direction]"
+                      value={@netbox_config["sync_direction"] || "pull"}
+                    />
                     <div class="grid grid-cols-1 gap-3 sm:grid-cols-3">
-                      <label class={[
-                        "relative flex cursor-pointer rounded-lg border p-4 shadow-xs transition-all focus:outline-none",
-                        if(
-                          @netbox_config["sync_direction"] in [
-                            "pull",
-                            "",
-                            nil
-                          ],
-                          do:
-                            "border-indigo-600 ring-2 ring-indigo-600 bg-indigo-50 dark:bg-indigo-900/20",
-                          else:
-                            "border-gray-200 dark:border-white/10 hover:border-gray-300 dark:hover:border-white/20 hover:shadow-md"
-                        )
-                      ]}>
-                        <input
-                          type="radio"
-                          name="integration[sync_direction]"
-                          value="pull"
-                          checked={
-                            @netbox_config["sync_direction"] in [
-                              "pull",
-                              "",
-                              nil
-                            ]
-                          }
-                          class="sr-only"
-                        />
+                      <div
+                        phx-click="set_netbox_sync_direction"
+                        phx-value-direction="pull"
+                        class={[
+                          "relative flex cursor-pointer rounded-lg border p-4 shadow-xs transition-all",
+                          if(
+                            @netbox_config["sync_direction"] in ["pull", "", nil],
+                            do:
+                              "border-indigo-600 ring-2 ring-indigo-600 bg-indigo-50 dark:bg-indigo-900/20",
+                            else:
+                              "border-gray-200 dark:border-white/10 hover:border-gray-300 dark:hover:border-white/20 hover:shadow-md"
+                          )
+                        ]}
+                      >
                         <div class="flex flex-col">
                           <span class="flex items-center gap-1.5 text-sm font-semibold text-gray-900 dark:text-white">
                             <.icon name="hero-arrow-down-tray" class="h-4 w-4 text-indigo-600" />
@@ -1174,24 +1166,21 @@
                             NetBox is the source of truth. Import devices, sites, and IPs from NetBox into TowerOps.
                           </span>
                         </div>
-                      </label>
-                      <label class={[
-                        "relative flex cursor-pointer rounded-lg border p-4 shadow-xs transition-all focus:outline-none",
-                        if(
-                          @netbox_config["sync_direction"] == "push",
-                          do:
-                            "border-indigo-600 ring-2 ring-indigo-600 bg-indigo-50 dark:bg-indigo-900/20",
-                          else:
-                            "border-gray-200 dark:border-white/10 hover:border-gray-300 dark:hover:border-white/20 hover:shadow-md"
-                        )
-                      ]}>
-                        <input
-                          type="radio"
-                          name="integration[sync_direction]"
-                          value="push"
-                          class="sr-only"
-                          checked={@netbox_config["sync_direction"] == "push"}
-                        />
+                      </div>
+                      <div
+                        phx-click="set_netbox_sync_direction"
+                        phx-value-direction="push"
+                        class={[
+                          "relative flex cursor-pointer rounded-lg border p-4 shadow-xs transition-all",
+                          if(
+                            @netbox_config["sync_direction"] == "push",
+                            do:
+                              "border-indigo-600 ring-2 ring-indigo-600 bg-indigo-50 dark:bg-indigo-900/20",
+                            else:
+                              "border-gray-200 dark:border-white/10 hover:border-gray-300 dark:hover:border-white/20 hover:shadow-md"
+                          )
+                        ]}
+                      >
                         <div class="flex flex-col">
                           <span class="flex items-center gap-1.5 text-sm font-semibold text-gray-900 dark:text-white">
                             <.icon name="hero-arrow-up-tray" class="h-4 w-4 text-orange-600" />
@@ -1201,24 +1190,21 @@
                             TowerOps is the source of truth. Push discovered devices and monitoring data to NetBox.
                           </span>
                         </div>
-                      </label>
-                      <label class={[
-                        "relative flex cursor-pointer rounded-lg border p-4 shadow-xs transition-all focus:outline-none",
-                        if(
-                          @netbox_config["sync_direction"] == "both",
-                          do:
-                            "border-indigo-600 ring-2 ring-indigo-600 bg-indigo-50 dark:bg-indigo-900/20",
-                          else:
-                            "border-gray-200 dark:border-white/10 hover:border-gray-300 dark:hover:border-white/20 hover:shadow-md"
-                        )
-                      ]}>
-                        <input
-                          type="radio"
-                          name="integration[sync_direction]"
-                          value="both"
-                          class="sr-only"
-                          checked={@netbox_config["sync_direction"] == "both"}
-                        />
+                      </div>
+                      <div
+                        phx-click="set_netbox_sync_direction"
+                        phx-value-direction="both"
+                        class={[
+                          "relative flex cursor-pointer rounded-lg border p-4 shadow-xs transition-all",
+                          if(
+                            @netbox_config["sync_direction"] == "both",
+                            do:
+                              "border-indigo-600 ring-2 ring-indigo-600 bg-indigo-50 dark:bg-indigo-900/20",
+                            else:
+                              "border-gray-200 dark:border-white/10 hover:border-gray-300 dark:hover:border-white/20 hover:shadow-md"
+                          )
+                        ]}
+                      >
                         <div class="flex flex-col">
                           <span class="flex items-center gap-1.5 text-sm font-semibold text-gray-900 dark:text-white">
                             <.icon
@@ -1230,7 +1216,7 @@
                             Merge data from both systems. Conflicts resolved by most-recently-updated. Requires write token.
                           </span>
                         </div>
-                      </label>
+                      </div>
                     </div>
                   </div>