<script type="text/javascript">
  const paramsDiv = document.getElementById("model-params");
  const modelSelect = document.getElementById("model");

  function renderParams(model) {
    let html = "";

    if (model === "Semi-Supervised_SVM") {
      html = `
        <div class="six columns">
          <label for="C">Penalty parameter (C):</label>
          <input style="width: 100%;" type="number" step="0.01" id="C" name="C1" value="{{ C or 1.0 }}">
        </div>
      `;
    } else if (model === "Semi-Supervised_SVM_Unconstrained") {
      html = `
        <div class="six columns">
          <label for="C">Penalty parameter (C):</label>
          <input style="width: 100%;" type="number" step="0.01" id="C" name="C1" value="{{ C or 1.0 }}">
        </div>
      `;
    } else if (model === "Newton_Universum_Twin_SVM") {
      html = `
        <div class="two columns"><label for="C1">C1:</label><input style="width:100%;" type="number" step="0.01" id="C1" name="C1" value="{{ C1 or 1.0 }}"></div>
        <div class="two columns"><label for="C2">C2:</label><input style="width:100%;" type="number" step="0.01" id="C2" name="C2" value="{{ C2 or 1.0 }}"></div>
        <div class="two columns"><label for="C3">C3:</label><input style="width:100%;" type="number" step="0.01" id="C3" name="C3" value="{{ C3 or 1.0 }}"></div>
        <div class="two columns"><label for="C4">C4:</label><input style="width:100%;" type="number" step="0.01" id="C4" name="C4" value="{{ C4 or 1.0 }}"></div>
        <div class="two columns"><label for="C5">C5:</label><input style="width:100%;" type="number" step="0.01" id="C5" name="C5" value="{{ C5 or 1.0 }}"></div>
        <div class="two columns"><label for="C6">C6:</label><input style="width:100%;" type="number" step="0.01" id="C6" name="C6" value="{{ C6 or 1.0 }}"></div>
      `;
    } else if (model === "Least-Square_Twin_SVM") {
      html = `
        <div class="six columns"><label for="C1">C1:</label><input style="width:100%;" type="number" step="0.01" id="C1" name="C1" value="{{ C1 or 0.1 }}"></div>
        <div class="six columns"><label for="C2">C2:</label><input style="width:100%;" type="number" step="0.01" id="C2" name="C2" value="{{ C2 or 1.0 }}"></div>
      `;
    } else if (model === "Twin_SVM") {
      html = `
        <div class="six columns"><label for="C1">C1:</label><input style="width:100%;" type="number" step="0.01" id="C1" name="C1" value="{{ C1 or 0.1 }}"></div>
        <div class="six columns"><label for="C2">C2:</label><input style="width:100%;" type="number" step="0.01" id="C2" name="C2" value="{{ C2 or 1.0 }}"></div>
      `;
    }

    paramsDiv.innerHTML = html;
  }

  if(modelSelect){

    // Run on page load with selected value
    renderParams(modelSelect.value);
      // Update dynamically when model changes
    modelSelect.addEventListener("change", (e) => {
      renderParams(e.target.value);
    });
  }

document.addEventListener('DOMContentLoaded', function() {
  const select = document.getElementById('select-image');
  const preview = document.getElementById('preview');

  if (!select || !preview) {
    console.warn('Select or preview element not found.');
    return;
  }

  function updatePreview() {
    const opt = select.options[select.selectedIndex];
    const src = opt && opt.dataset && opt.dataset.img ? opt.dataset.img : '';
    preview.src = src;
    console.log('Preview set to:', src);
  }

  // Ensure there's a selected index (fallback to first option)
  if (select.selectedIndex === -1 && select.options.length > 0) {
    select.selectedIndex = 0;
  }

  // initial set
  updatePreview();

  // update when user changes selection
  select.addEventListener('change', updatePreview);

  // optional: handle broken image
  preview.addEventListener('error', function() {
    console.warn('Failed to load preview image:', preview.src);
    // preview.src = '/static/img/placeholder.png'; // uncomment if you have a placeholder
  });
});

// document.addEventListener('DOMContentLoaded', function() {
//   const select = document.getElementById('select-image');
//   const preview = document.getElementById('preview');

//   if (!select || !preview) return;

//   function updatePreview() {
//     const opt = select.options[select.selectedIndex];
//     preview.src = opt.dataset.img;
//   }

//   select.addEventListener('change', updatePreview);
// });


</script>
