{% extends "framework_modern.html" %}
{% load static %}
{% block content %}
  <div class="mx-auto w-full p-8">
    <h1 class="h1 mb-4 flex items-center gap-2 text-3xl font-bold">
      Predict a Pathway

      <span class="inline-flex items-center gap-1 text-base-content/50 text-xs"
        >in <strong>{{ meta.current_package.name|safe }}</strong>{% if meta.url_contains_package %}
      {% if meta.current_package.get_classification_level_display == "Restricted" %}
        <img src="{% static 'images/restricted_mid.png' %}" width="100">
      {% elif meta.current_package.get_classification_level_display == "Secret" %}
        <img src="{% static 'images/secret_mid.png' %}" width="60">
      {% endif %}
    {% else %}
      {% if meta.user.default_package.get_classification_level_display == "Restricted" %}
        <img src="{% static 'images/restricted_mid.png' %}" width="100">
      {% elif meta.user.default_package.get_classification_level_display == "Secret" %}
        <img src="{% static 'images/secret_mid.png' %}" width="60">
      {% endif %}
    {% endif %}
      </span>
    </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"
              autofocus
            />
            <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>

      <div class="form-control mb-3">
        <label class="floating-label" for="node-smiles">
          <div class="join w-full">
            <input
              type="text"
              class="input input-md join-item w-full"
              name="smiles"
              placeholder="SMILES"
              id="predict-smiles"
            />
            <button
              type="button"
              id="render-predict-smiles"
              class="btn join-item"
            >
              Render
            </button>
          </div>
          <span class="label-text">SMILES</span>
        </label>
      </div>

      <input type="hidden" name="molfile" id="predict-molfile" />

      <div class="divider text-base-content/50">OR</div>

      <div class="mb-8 w-full">
        {% with iframe_id="predict-ketcher" height="624" text_input_id="predict-smiles" %}
          {% include "components/ketcher.html" %}
        {% endwith %}
      </div>

      <label class="select mb-8 w-full" id="prediction-setting-label">
        <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 h-fit w-full justify-between">
        <a
          href="/batch-predict"
          class="link-hover text-neutral/50 self-end text-sm"
          >More than one compound?</a
        >

        <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>
      </div>
    </form>
  </div>
  {# prettier-ignore-start #}
  <script>
    // Hide predictor selection and update button text if mode is "build"
    function radioChange(event) {
      if (event.target.value === "build") {
        document.getElementById("prediction-setting-label").hidden = true;
        document.getElementById("predict-submit-button").innerText = "Build";
      } else {
        document.getElementById("prediction-setting-label").hidden = false;
        document.getElementById("predict-submit-button").innerText = "Predict";
      }
    }

    document.addEventListener("DOMContentLoaded", function () {

      const radioButtons = document.querySelectorAll('input[name="predict"]');
      radioButtons.forEach(radio => {
        radio.addEventListener('change', radioChange);
      });

      const renderButton = document.getElementById("render-predict-smiles");
      renderButton.addEventListener("click", async function (e) {
        let smiles = document.getElementById("predict-smiles").value.trim();
        if (smiles) {
          setKetcherMolecule(smiles, false);
        }
      });

      const submitButton = document.getElementById("predict-submit-button");
      submitButton.addEventListener("click", async function (e) {
        e.preventDefault();
        const button = this;
        button.disabled = true;

        let buildMode = false;
        // Set text depending on mode
        if (document.getElementById("predict-submit-button").innerText === "Build") {
          button.textContent = "Building...";
          buildMode = true;
        } else {
          button.textContent = "Predicting...";
        }

        // Obtain text-input-smiles, ketcher-smiles,
        let smiles = document.getElementById("predict-smiles").value.trim();

        if (!smiles) {
            smiles = getSmilesFromKetcher();
        }

        // Basic validation
        if (!smiles) {
          alert("Please enter a SMILES string or draw a structure.");
          button.disabled = false;
          button.textContent = buildMode ? "Build" : "Predict";
          return;
        }

        // Submit form
        document.getElementById("predict_form").submit();
      });
    });
  </script>
  {# prettier-ignore-end #}
{% endblock content %}