bindCreatePanelEvents function domain

function bindCreatePanelEvents(panel: HTMLElement): void {
  // Toggle fixed/generator on mode change
  panel.addEventListener("change", (e) => {
    const target = e.target as HTMLSelectElement;
    if (!target.classList.contains("field-mode-select")) return;
    const row = target.closest("tr")!;
    const isFixed = target.value === "fixed";
    (row.querySelector(".field-fixed-value") as HTMLElement).style.display =
      isFixed ? "inline-block" : "none";
    (
      row.querySelector(".field-generator-container") as HTMLElement
    ).style.display = isFixed ? "none" : "inline-block";
  });

  // Remove field row
  panel.addEventListener("click", (e) => {
    const target = e.target as HTMLElement;
    if (!target.classList.contains("btn-remove-row")) return;
    target.closest("tr")?.remove();
  });

  // Add field row
  panel
    .querySelector("#create-add-field-row")
    ?.addEventListener("click", () => {
      const tbody = panel.querySelector("#create-fields-tbody");
      if (!tbody) return;
      const wrapper = document.createElement("tbody");
      wrapper.innerHTML = buildTemplateFieldRow();
      const newRow = wrapper.querySelector("tr");
      if (newRow) {
        tbody.appendChild(newRow);
        upgradeRowSearchableSelects(newRow);
      }
    });

  panel.querySelector("#create-panel-cancel")?.addEventListener("click", () => {
    panel.remove();
  });

  panel
    .querySelector("#create-panel-save")
    ?.addEventListener("click", async () => {
      const nameInput = panel.querySelector(
        "#create-form-name",
      ) as HTMLInputElement;
      const urlInput = panel.querySelector(
        "#create-form-url",
      ) as HTMLInputElement;

      const name = nameInput.value.trim();
      if (!name) {
        nameInput.focus();
        showToast(t("errorTemplateNameRequired"));
        return;
      }

      const urlPattern = urlInput.value.trim() || "*";
      const templateFields: FormTemplateField[] = [];

      panel.querySelectorAll("tr.template-field-row").forEach((row) => {
        const matchType =
          ((
            row.querySelector(
              ".field-type-match-container .fa-ss__value",
            ) as HTMLInputElement
          )?.value as FieldType) ?? ("name" as FieldType);
        const mode = (
          row.querySelector(".field-mode-select") as HTMLSelectElement
        ).value as "fixed" | "generator";
        const fixedValue = (
          row.querySelector(".field-fixed-value") as HTMLInputElement
        ).value;
        const generatorType =
          ((
            row.querySelector(
              ".field-generator-container .fa-ss__value",
            ) as HTMLInputElement
          )?.value as FieldType) ?? ("name" as FieldType);

        templateFields.push({
          key: matchType,
          label: fieldTypeLabel(matchType),
          mode,
          matchByFieldType: matchType,
          fixedValue: mode === "fixed" ? fixedValue : undefined,
          generatorType: mode === "generator" ? generatorType : undefined,
        });
      });

      const newForm: SavedForm = {
        id: `tpl-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
        name,
        urlPattern,
        fields: {},
        templateFields,
        createdAt: Date.now(),
        updatedAt: Date.now(),
      };

      await chrome.runtime.sendMessage({
        type: "UPDATE_FORM",
        payload: newForm,
      });
      panel.remove();
      await loadSavedForms();
      showToast(t("toastTemplateCreated", [name]));
    });
}