renderParamFields function

function renderParamFields(paramDefs: readonly GeneratorParamDef[]): string {
  const fields = paramDefs
    .map((def) => {
      const label = chrome.i18n?.getMessage(def.labelKey) ?? def.labelKey;
      if (def.type === "select" && def.selectOptions) {
        const options = def.selectOptions
          .map((opt) => {
            const optLabel =
              chrome.i18n?.getMessage(opt.labelKey) ?? opt.labelKey;
            const selected = opt.value === def.defaultValue ? "selected" : "";
            return `<option value="${opt.value}" ${selected}>${optLabel}</option>`;
          })
          .join("");
        return `
          <div class="fa-rp-param-field">
            <label class="fa-rp-param-label">${label}</label>
            <select data-param-key="${def.key}" class="fa-rp-input fa-rp-param-input">${options}</select>
          </div>`;
      }
      if (def.type === "boolean") {
        const checked = def.defaultValue ? "checked" : "";
        return `
          <label class="fa-rp-param-toggle">
            <input type="checkbox" data-param-key="${def.key}" ${checked} />
            <span>${label}</span>
          </label>`;
      }
      if (def.type === "text") {
        const placeholder = def.placeholder
          ? (chrome.i18n?.getMessage(def.placeholder) ?? def.placeholder)
          : "";
        return `
          <div class="fa-rp-param-field">
            <label class="fa-rp-param-label">${label}</label>
            <input type="text" data-param-key="${def.key}" value="${def.defaultValue}" placeholder="${placeholder}" class="fa-rp-input fa-rp-param-input" />
          </div>`;
      }
      const min = def.min != null ? `min="${def.min}"` : "";
      const max = def.max != null ? `max="${def.max}"` : "";
      const step = def.step != null ? `step="${def.step}"` : "";
      return `
        <div class="fa-rp-param-field">
          <label class="fa-rp-param-label">${label}</label>
          <input type="number" data-param-key="${def.key}" value="${def.defaultValue}" ${min} ${max} ${step} class="fa-rp-input fa-rp-param-input" />
        </div>`;
    })
    .join("");

  const title =
    chrome.i18n?.getMessage("paramSectionTitle") ?? "Parâmetros do Gerador";
  return `<div class="fa-rp-param-title">${title}</div>${fields}`;
}