enviPy-bayer/templates/modals/objects/edit_prediction_setting_modal.html

{% load static %}
<!-- Edit Prediction Setting -->
<dialog
  id="update_prediction_settings_modal"
  class="modal"
  x-data="modalForm()"
  @close="reset()"
>
  <div class="modal-box max-w-3xl">
    <!-- Header -->
    <h3 class="text-lg font-bold">Update Prediction Setting</h3>

    <!-- Close button (X) -->
    <form method="dialog">
      <button
        class="btn btn-sm btn-circle btn-ghost absolute top-2 right-2"
        :disabled="isSubmitting"
      >
        ✕
      </button>
    </form>

    <!-- Body -->
    <div class="py-4">
      <p class="mb-4">
        To update your prediction setting modify parameters in the form below
        and click "Update"
      </p>
      <form
        id="edit-prediction-setting-modal-form"
        accept-charset="UTF-8"
        action=""
        method="post"
      >
        {% csrf_token %}
        <div class="overflow-x-auto">
          <table class="table table-zebra w-full">
            <thead>
              <tr>
                <th class="w-1/5">Parameter</th>
                <th class="w-4/5">Value</th>
              </tr>
            </thead>
            <tbody>
              {% if 'model' in user.prediction_settings %}
                <tr>
                  <td>Model</td>
                  <td>
                    <div class="form-control">
                      <select
                        id="model"
                        name="model"
                        class="select select-bordered w-full"
                      >
                        {% for m in models %}
                          <option
                            value="{{ m.id }}"
                            {% if user.prediction_settings.model.url == m.url %}selected{% endif %}
                          >
                            {{ m.name|safe }}
                          </option>
                        {% endfor %}
                      </select>
                    </div>
                    {% for k, v in user.prediction_settings.model_parameters.items %}
                      {% if k == 'threshold' %}
                        <div class="form-control mt-2">
                          <label class="label">
                            <span class="label-text">Threshold</span>
                          </label>
                          <input
                            type="number"
                            class="input input-bordered w-full"
                            name="{{ k }}"
                            value="{{ v }}"
                            min="0"
                            max="1"
                            step="0.05"
                          />
                        </div>
                      {% endif %}
                    {% endfor %}
                  </td>
                </tr>
              {% endif %}
              {% for k, v in user.prediction_settings.truncator.items %}
                <tr>
                  <td>
                    {% if k == 'max_nodes' %}
                      Max Nodes
                    {% elif k == 'max_depth' %}
                      Max Depth
                    {% endif %}
                  </td>
                  <td>
                    {% if k == 'max_nodes' %}
                      <input
                        type="number"
                        class="input input-bordered w-full"
                        name="{{ k }}"
                        value="{{ v }}"
                        min="1"
                        max="50"
                        step="1"
                      />
                    {% elif k == 'max_depth' %}
                      <input
                        type="number"
                        class="input input-bordered w-full"
                        name="{{ k }}"
                        value="{{ v }}"
                        min="1"
                        max="8"
                        step="1"
                      />
                    {% endif %}
                  </td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </form>
    </div>

    <!-- Footer -->
    <div class="modal-action">
      <button
        type="button"
        class="btn"
        onclick="this.closest('dialog').close()"
        :disabled="isSubmitting"
      >
        Close
      </button>
      <button
        type="button"
        class="btn btn-primary"
        @click="submit('edit-prediction-setting-modal-form')"
        :disabled="isSubmitting"
      >
        <span x-show="!isSubmitting">Update</span>
        <span
          x-show="isSubmitting"
          class="loading loading-spinner loading-sm"
        ></span>
        <span x-show="isSubmitting">Updating...</span>
      </button>
    </div>
  </div>

  <!-- Backdrop -->
  <form method="dialog" class="modal-backdrop">
    <button :disabled="isSubmitting">close</button>
  </form>
</dialog>