[Feature] Add Predict Pathway Page in Modern UI (#188)

## Major Changes
- Predict Pathway is now a separate view as it is meant as adavanced prediction interface

## Current status
![image.png](/attachments/c5bc3f5c-cf30-4b5f-acb3-a70117a96dae)

Co-authored-by: Tim Lorsbach <tim@lorsba.ch>
Reviewed-on: enviPath/enviPy#188
Co-authored-by: Tobias O <tobias.olenyi@envipath.com>
Co-committed-by: Tobias O <tobias.olenyi@envipath.com>

templates/predict_pathway.html

@@ -0,0 +1,188 @@
+{% extends "framework_modern.html" %}
+{% load static %}
+{% block content %}
+  <div class="mx-auto w-full p-8">
+    <h1 class="h1 mb-4 text-3xl font-bold">Predict a Pathway</h1>
+
+    <form
+      id="predict_form"
+      accept-charset="UTF-8"
+      action="{{ meta.current_package.url }}/pathway"
+      method="post"
+    >
+      {% csrf_token %}
+      <div class="mb-8 flex flex-col gap-8 md:flex-row md:items-end">
+        <fieldset class="flex flex-col gap-4 md:flex-3/4">
+          <label class="floating-label" for="name">
+            <input
+              type="text"
+              name="name"
+              placeholder="Name"
+              id="name"
+              class="input input-md w-full"
+            />
+            <span>Name</span>
+          </label>
+
+          <label class="floating-label" for="description">
+            <input
+              type="text"
+              name="description"
+              placeholder="Description"
+              id="description"
+              class="input input-md w-full"
+            />
+            <span>Description</span>
+          </label>
+        </fieldset>
+        <fieldset
+          class="fieldset flex shrink-0 flex-row items-start gap-3 md:flex-1/4 md:flex-col"
+        >
+          <label class="fieldset-label text-base-content/50">Mode</label>
+          <label class="label">
+            <input
+              type="radio"
+              name="predict"
+              id="radioPredict"
+              value="predict"
+              checked
+              class="radio radio-neutral"
+            />
+            Predict
+          </label>
+          <label class="label">
+            <input
+              type="radio"
+              name="predict"
+              id="radioIncremental"
+              value="incremental"
+              class="radio radio-neutral"
+            />
+            Incremental
+          </label>
+          <label class="label">
+            <input
+              type="radio"
+              name="predict"
+              id="radioBuild"
+              value="build"
+              class="radio radio-neutral"
+            />
+            Build
+          </label>
+        </fieldset>
+      </div>
+
+      <label class="floating-label" for="predict-smiles">
+        <input
+          type="text"
+          name="smiles"
+          placeholder="SMILES"
+          id="predict-smiles"
+          class="input input-md w-full"
+        />
+        <span>SMILES</span>
+      </label>
+
+      <div class="divider text-base-content/50">OR</div>
+
+      <div class="mb-8 w-full">
+        <label class="text-base-content/50 mb-4 text-xs font-medium"
+          >Draw Structure</label
+        >
+        <iframe
+          id="predict-ketcher"
+          src="{% static '/js/ketcher2/ketcher.html' %}"
+          width="100%"
+          height="510"
+        ></iframe>
+      </div>
+
+      <label class="select mb-8 w-full">
+        <span class="label">Predictor</span>
+        <select id="prediction-setting" name="prediction-setting">
+          <option disabled>Select a Setting</option>
+          {% for s in meta.available_settings %}
+            <option
+              value="{{ s.url }}"
+              {% if s.id == meta.user.default_setting.id %}selected{% endif %}
+            >
+              {{ s.name }}{% if s.id == meta.user.default_setting.id %}
+                (User default)
+              {% endif %}
+            </option>
+          {% endfor %}
+        </select>
+      </label>
+
+      <div class="flex justify-end gap-2">
+        <a href="{{ meta.current_package.url }}/pathway" class="btn btn-outline"
+          >Cancel</a
+        >
+        <button
+          type="submit"
+          id="predict-submit-button"
+          class="btn btn-primary"
+        >
+          Predict
+        </button>
+      </div>
+    </form>
+  </div>
+
+  <script>
+    function predictKetcherToTextInput() {
+      $("#predict-smiles").val(this.ketcher.getSmiles());
+    }
+
+    $(function () {
+      $("#predict-ketcher").on("load", function () {
+        const checkKetcherReady = () => {
+          const win = this.contentWindow;
+          if (win.ketcher && "editor" in win.ketcher) {
+            window.predictKetcher = win.ketcher;
+            win.ketcher.editor.event.change.handlers.push({
+              once: false,
+              priority: 0,
+              f: predictKetcherToTextInput,
+              ketcher: win.ketcher,
+            });
+          } else {
+            setTimeout(checkKetcherReady, 100);
+          }
+        };
+
+        checkKetcherReady();
+      });
+
+      $("#predict-submit-button").on("click", function (e) {
+        e.preventDefault();
+        const button = $(this);
+        button.prop("disabled", true);
+        button.text("Predicting...");
+
+        // Get SMILES from either input or Ketcher
+        let smiles = $("#predict-smiles").val().trim();
+
+        // If SMILES input is empty, try to get from Ketcher
+        if (!smiles && window.predictKetcher) {
+          smiles = window.predictKetcher.getSmiles().trim();
+          if (smiles) {
+            $("#predict-smiles").val(smiles);
+          }
+        }
+
+        // Basic validation
+        if (!smiles) {
+          alert("Please enter a SMILES string or draw a structure.");
+          button.prop("disabled", false);
+          button.text("Predict");
+          return;
+        }
+
+        // Submit form
+        $("#predict_form").submit();
+      });
+    });
+  </script>
+{% endblock content %}