{% extends 'generic/object_edit.html' %}

{% block form %}
  {{ block.super }}

  <div class="card mt-3">
    <h5 class="card-header">Options</h5>
    <div class="card-body">
      {{ options_formset.management_form }}

      {% if options_formset.non_form_errors %}
        <div class="alert alert-danger">
          {% for error in options_formset.non_form_errors %}
            <div>{{ error }}</div>
          {% endfor %}
        </div>
      {% endif %}

      <table class="table table-hover">
        <thead>
          <tr>
            <th>Value</th>
            <th>Label</th>
            <th>Delete</th>
          </tr>
        </thead>
        <tbody>
          {% for option_form in options_formset %}
            <tr>
              {{ option_form.id }}
              <td>
                {{ option_form.value }}
                {% for error in option_form.value.errors %}
                  <div class="text-danger">{{ error }}</div>
                {% endfor %}
              </td>
              <td>
                {{ option_form.label }}
                {% for error in option_form.label.errors %}
                  <div class="text-danger">{{ error }}</div>
                {% endfor %}
              </td>
              <td>
                {{ option_form.DELETE }}
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
      <button type="button" class="btn btn-sm btn-primary mb-3" id="add-option-row">
        Add option
      </button>
      <p class="text-muted mb-0">
        Add as many rows as needed, then save once.
      </p>
    </div>
  </div>

  <div id="changelog-bottom-anchor" class="mt-3"></div>

  <template id="option-empty-row-template">
    <tr>
      {{ options_formset.empty_form.id }}
      <td>{{ options_formset.empty_form.value }}</td>
      <td>{{ options_formset.empty_form.label }}</td>
      <td>{{ options_formset.empty_form.DELETE }}</td>
    </tr>
  </template>

  <script>
    (() => {
      const addButton = document.getElementById('add-option-row');
      const tbody = addButton?.closest('.card-body')?.querySelector('tbody');
      const template = document.getElementById('option-empty-row-template');
      const totalFormsInput = document.getElementById('id_options-TOTAL_FORMS');
      const changelogInput = document.getElementById('id_changelog_message');
      const changelogAnchor = document.getElementById('changelog-bottom-anchor');

      if (changelogInput && changelogAnchor) {
        const changelogRow = changelogInput.closest('.row');
        const changelogGroup =
          changelogInput.closest('.form-group') || changelogInput.parentElement;
        const changelogContainer = changelogRow || changelogGroup;
        const originalParent = changelogContainer?.parentElement || null;

        if (changelogContainer) {
          changelogAnchor.appendChild(changelogContainer);
        }

        // Remove any now-empty wrapper left behind by NetBox's form layout.
        if (originalParent) {
          const hasControls = originalParent.querySelector(
            'input, select, textarea, button'
          );
          const hasContent = (originalParent.textContent || '').trim().length > 0;
          if (!hasControls && !hasContent) {
            originalParent.remove();
          }
        }
      }

      if (!addButton || !tbody || !template || !totalFormsInput) {
        return;
      }

      addButton.addEventListener('click', () => {
        const nextIndex = Number.parseInt(totalFormsInput.value, 10);
        const newRowHtml = template.innerHTML.replace(/__prefix__/g, String(nextIndex));
        const wrapper = document.createElement('tbody');
        wrapper.innerHTML = newRowHtml.trim();
        const newRow = wrapper.querySelector('tr');
        if (!newRow) {
          return;
        }
        tbody.appendChild(newRow);
        totalFormsInput.value = String(nextIndex + 1);
      });
    })();
  </script>
{% endblock %}