{% extends 'generic/_base.html' %}
{% load i18n %}
{% load form_helpers %}

{% comment %}
Blocks:
  - title:      Page title
  - controls:   Control elements displayed between the header and content
  - tabs:       Page tabs
  - content:    Primary page content
    - form:     Content within the <form> element
    - buttons:  Form submission buttons
  - modals:     Any pre-loaded modals

Context:
  - object:      Python instance of the object being edited
  - form:        The edit form
  - return_url:  The URL to which the user is redirected after submitting the form
{% endcomment %}

{% block title %}
  {% if object.pk %}
    {% trans "Editing" %} {{ object|meta:"verbose_name" }} {{ object }}
  {% else %}
    {% blocktrans trimmed with object_type=object|meta:"verbose_name" %}
      Add a new {{ object_type }}
    {% endblocktrans %}
  {% endif %}
{% endblock title %}

{% block controls %}
  <div class="btn-list">

    {# Link to model documentation #}
    {% if settings.DOCS_ROOT and object.docs_url %}
      <a href="{{ object.docs_url }}" target="_blank" class="btn btn-outline-secondary" title="{% trans "View model documentation" %}">
        <i class="mdi mdi-help-circle"></i> {% trans "Help" %}
      </a>
    {% endif %}

  </div>
{% endblock controls %}

{% block tabs %}
  <ul class="nav nav-tabs">
    <li class="nav-item" role="presentation">
      <button class="nav-link active" id="edit-form-tab" data-bs-toggle="tab" data-bs-target="#edit-form" type="button" role="tab" aria-controls="edit-form" aria-selected="true">
        {% if object.pk %}{% trans "Edit" %}{% else %}{% trans "Create" %}{% endif %}
      </button>
    </li>
  </ul>
{% endblock tabs %}

{% block content %}
  <div class="tab-pane show active" id="edit-form" role="tabpanel" aria-labelledby="object-list-tab">

    {# Warn about missing prerequisite objects #}
    {% if prerequisite_model %}
      {% include 'inc/missing_prerequisites.html' %}
    {% endif %}

    <form action="" id="job-form" method="post" enctype="multipart/form-data" class="object-edit mt-5">
      {% csrf_token %}

      <div id="form_fields" hx-disinherit="hx-select hx-swap">
        {% block form %}
        {# Render all fields in a single group #}
        <div class="field-group mb-5">
            {% render_form form %}
        </div>
        {% endblock form %}
        <div class="field-group mb-5">
            <div class="row mb-3">
                <table id="job-table">
                    <tr>
                        <td class="col-sm-3 text-lg-end">Schema&nbsp&nbsp</td>
                        <div class="col">
                        <td class="form-control"></td>
                        </div>
                    </tr>
                </table>
            </div>
        </div>
      </div>
      <div class="text-end my-3">
        {% block buttons %}
          <a href="{{ return_url }}" class="btn btn-outline-secondary" id="url">{% trans "Cancel" %}</a>
          {% if object.pk %}
            <button type="submit" name="_update" class="btn btn-primary">
              {% trans "Save" %}
            </button>
          {% else %}
            <div class="btn-group" role="group" aria-label="{% trans "Actions" %}">
              <button type="submit" name="_create" class="btn btn-primary">
                {% trans "Create" %}
              </button>
              <button type="submit" name="_addanother" class="btn btn-outline-primary">
                {% trans "Create & Add Another" %}
              </button>
            </div>
          {% endif %}
        {% endblock buttons %}
      </div>
    </form>
  </div>
  <script>
    var kriten_url = document.getElementById("url").href;
    console.log(kriten_url)
    var formObject = document.forms["job-form"];
    var fieldObject = formObject.elements["id_kriten_task"]
    var schema_cell = document.getElementById("job-table").rows[0].cells[1];
    schema_cell.innerHTML = "<pre>{}</pre>";
    fieldObject.addEventListener("change", function() {
        console.log(fieldObject.value)
        var schema_url = kriten_url + "api/plugins/kriten_netbox/kriten-tasks/" + fieldObject.value +"/"
        fetch(schema_url)
            .then((response) => response.json())
            .then((json) => `${JSON.stringify(json.schema, null, 2)}`)
            .then((json_string) => schema_cell.innerHTML = "<pre>" + json_string + "</pre>");
    })
  </script>
{% endblock content %}

{% block modals %}
  {% include 'inc/htmx_modal.html' with size='lg' %}
{% endblock %}