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

{% block title %}
  {% if object.pk %}Edit{% else %}Add a new{% endif %} Synchronization Runner
{% endblock %}

{% block content %}
<div class="row">
  <div class="col col-md-12">
    <form action="" method="post" class="form form-horizontal">
      {% csrf_token %}

      <div class="card">
        <div class="card-header">
          <strong>{% if object.pk %}Edit{% else %}Create{% endif %} Synchronization Runner</strong>
        </div>
        <div class="card-body">
          {% if form.non_field_errors %}
            <div class="alert alert-danger" role="alert">
              {{ form.non_field_errors }}
            </div>
          {% endif %}

          {% render_field form.name %}
          {% render_field form.description %}

          <div class="mb-3 row">
            <label class="col-sm-3 col-form-label">{{ form.mode.label }}</label>
            <div class="col-sm-9">
              <div class="btn-group" role="group" aria-label="{{ form.mode.label }}">
                {% for radio in form.mode %}
                  <input type="radio" class="btn-check" name="{{ form.mode.html_name }}"
                         id="{{ radio.id_for_label }}" value="{{ radio.data.value }}"
                         {% if radio.data.selected %}checked{% endif %}
                         autocomplete="off">
                  <label class="btn btn-outline-secondary" for="{{ radio.id_for_label }}">
                    {{ radio.choice_label }}
                  </label>
                {% endfor %}
              </div>
              {% if form.mode.help_text %}
                <div class="form-text text-muted">{{ form.mode.help_text }}</div>
              {% endif %}
            </div>
          </div>

          <div id="remote-fields" style="display:none;">
            {% render_field form.url %}
            {% render_field form.token %}
          </div>

          {% render_field form.tags %}
          {% render_field form.comments %}
        </div>
      </div>

      <div class="text-end my-3">
        <a href="{% url 'plugins:netbox_zabbix_sync_plugin:synchronizationrunner_list' %}" class="btn btn-outline-secondary">
          Cancel
        </a>
        <button type="submit" class="btn btn-primary">
          {% if object.pk %}Save{% else %}Create{% endif %}
        </button>
      </div>
    </form>
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const modeRadios = document.querySelectorAll('input[name="mode"]');
    const remoteFields = document.getElementById("remote-fields");

    function toggleMode() {
      const selected = document.querySelector('input[name="mode"]:checked');
      if (!selected) return;
      if (selected.value === "remote") {
        remoteFields.style.display = "";
      } else {
        remoteFields.style.display = "none";
      }
    }

    modeRadios.forEach(function (r) { r.addEventListener("change", toggleMode); });
    toggleMode();
  });
</script>
{% endblock content %}