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

{% block title %}Schedule Synchronization{% 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>Schedule Synchronization</strong>
        </div>
        <div class="card-body">
          {% if form.non_field_errors %}
            <div class="alert alert-danger" role="alert">
              {{ form.non_field_errors }}
            </div>
          {% endif %}

          <p class="text-muted">
            Select a runner and optionally filter by a specific device or VM.
            Leave both empty for a full sync.
          </p>

          {% render_field form.runner %}

          <div id="log-level-section">
            <hr class="my-3">
            <h5 class="card-title">Log Level</h5>
            <div class="mb-3 row">
              <label class="col-sm-3 col-form-label">{{ form.log_level.label }}</label>
              <div class="col-sm-9">
                <div class="btn-group" role="group" aria-label="{{ form.log_level.label }}">
                  {% for radio in form.log_level %}
                    <input type="radio" class="btn-check" name="{{ form.log_level.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.log_level.help_text %}
                  <div class="form-text text-muted">{{ form.log_level.help_text }}</div>
                {% endif %}
              </div>
            </div>
          </div>

          <hr class="my-3">
          <h5 class="card-title">Filter (optional)</h5>
          {% render_field form.device %}
          {% render_field form.vm %}
        </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">
          <i class="mdi mdi-sync"></i> Trigger Synchronization
        </button>
      </div>
    </form>
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    var runnerModes = {{ runner_modes_json|safe }};
    var runnerSelect = document.getElementById("id_runner");
    var logLevelSection = document.getElementById("log-level-section");
    if (!runnerSelect || !logLevelSection) return;

    function toggleLogLevel() {
      var selectedId = runnerSelect.value;
      var mode = runnerModes[selectedId] || "local";
      logLevelSection.style.display = (mode === "remote") ? "none" : "";
    }

    runnerSelect.addEventListener("change", toggleLogLevel);
    toggleLogLevel();
  });
</script>
{% endblock content %}