openCreatePanel function

function openCreatePanel(): void {
  const existing = document.getElementById("form-create-panel");
  if (existing) {
    existing.scrollIntoView({ behavior: "smooth" });
    return;
  }

  const panel = document.createElement("div");
  panel.id = "form-create-panel";
  panel.className = "edit-panel";
  panel.innerHTML = `
    <h3>${t("createTemplateHeader")}</h3>
    <div class="form-group">
      <label>${t("templateNameLabel")}</label>
      <input type="text" id="create-form-name" placeholder="${t("createTemplateNamePlaceholder")}" />
    </div>
    <div class="form-group">
      <label>${t("urlPatternLabel")}</label>
      <input type="text" id="create-form-url" placeholder="${t("templateUrlPlaceholder")}" />
      <div class="description" style="margin-top:4px;font-size:11px;color:var(--text-muted);">
        ${t("templateUrlDesc")}
      </div>
    </div>
    <div style="margin-bottom:8px;">
      <strong style="font-size:13px;">${t("fieldsTitle")}</strong>
      <div class="description" style="font-size:11px;color:var(--text-muted);margin-top:2px;">
        ${t("templateFieldsDesc")}
      </div>
    </div>
    <table class="template-fields-table" id="create-fields-table">
      <thead>
        <tr>
          <th>${t("fieldDetectedTypeHeader")}</th>
          <th>${t("fieldModeHeader")}</th>
          <th>${t("fieldValueHeader")}</th>
          <th></th>
        </tr>
      </thead>
      <tbody id="create-fields-tbody">
        ${buildTemplateFieldRow({ matchByFieldType: "name", mode: "fixed", fixedValue: "" })}
      </tbody>
    </table>
    <div style="margin-bottom:12px;">
      <button class="btn btn-secondary btn-sm" id="create-add-field-row">+ Adicionar campo</button>
    </div>
    <div class="edit-panel-actions">
      <button class="btn btn-primary" id="create-panel-save">${t("btnSaveTemplate")}</button>
      <button class="btn btn-secondary" id="create-panel-cancel">${t("btnCancel")}</button>
    </div>
  `;

  document.getElementById("saved-forms-list")?.before(panel);
  bindCreatePanelEvents(panel);
  panel.querySelectorAll("tr.template-field-row").forEach((row) => {
    upgradeRowSearchableSelects(row);
  });
  panel.scrollIntoView({ behavior: "smooth" });
}