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

{% block title %}{% trans "Connection Backends" %}{% endblock %}

{% block subtitle %}
  <div class="text-secondary fs-5">{% trans "Installed drivers and package status" %}</div>
{% endblock %}

{% block content %}
<div class="d-flex justify-content-end mb-3">
  <a href="{% url 'plugins:netbox_orchestrator:settings' %}" class="btn btn-outline-secondary btn-sm">
    <i class="mdi mdi-arrow-left me-1"></i>{% trans "Back to Settings" %}
  </a>
</div>

<div class="card">
  <h2 class="card-header">{% trans "Connection Backends" %}</h2>
  <table class="table table-hover mb-0">
    <thead>
      <tr>
        <th>{% trans "Driver" %}</th>
        <th>{% trans "Status" %}</th>
        <th>{% trans "Version" %}</th>
        <th>{% trans "Actions" %}</th>
      </tr>
    </thead>
    <tbody>
      {% for item in driver_info %}
      <tr>
        <td><code>{{ item.driver }}</code></td>
        <td>
          {% if item.ok %}
            <span class="badge text-bg-success">{% trans "Installed" %}</span>
          {% else %}
            <span class="badge text-bg-danger">{% trans "Missing" %}</span>
          {% endif %}
        </td>
        <td>
          {% if item.version %}
            <code class="text-muted small">{{ item.version }}</code>
          {% else %}
            <span class="text-muted small">—</span>
          {% endif %}
        </td>
        <td>
          {% if item.uninstallable %}
            {% if item.ok %}
              <button type="button"
                      class="btn btn-sm btn-danger"
                      data-bs-toggle="modal"
                      data-bs-target="#driver-uninstall-modal"
                      data-driver="{{ item.driver }}"
                      data-spec="{{ item.spec }}">
                {% trans "Uninstall" %}
              </button>
            {% else %}
              <form method="post" action="{% url 'plugins:netbox_orchestrator:driver_install' %}" class="d-inline driver-action-form">
                {% csrf_token %}
                <input type="hidden" name="driver" value="{{ item.driver }}">
                <button type="submit" class="btn btn-sm btn-warning">
                  <span class="btn-label">{% trans "Install" %}</span>
                  <span class="btn-spinner d-none spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                </button>
              </form>
            {% endif %}
          {% else %}
            <span class="text-muted small">—</span>
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock content %}

{% block modals %}
<div class="modal fade" id="driver-uninstall-modal" tabindex="-1" aria-labelledby="driver-uninstall-modal-label" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content border border-danger">
      <div class="modal-header">
        <h5 class="modal-title" id="driver-uninstall-modal-label">
          <i class="mdi mdi-alert-circle-outline text-danger me-2"></i>{% trans "Confirm Uninstall" %}
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans 'Close' %}"></button>
      </div>
      <div class="modal-body">
        <p>
          {% blocktrans trimmed %}
            Are you sure you want to <strong class="text-danger">uninstall</strong> the
            <strong id="driver-uninstall-name"></strong> driver?
          {% endblocktrans %}
        </p>
        <p class="text-muted small mb-0">
          {% trans "Package" %}: <code id="driver-uninstall-spec"></code>
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" id="driver-uninstall-cancel" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
        <form method="post" action="{% url 'plugins:netbox_orchestrator:driver_uninstall' %}" class="d-inline driver-action-form">
          {% csrf_token %}
          <input type="hidden" name="driver" id="driver-uninstall-input">
          <button type="submit" class="btn btn-danger" id="driver-uninstall-submit">
            <span class="btn-label">{% trans "Uninstall" %}</span>
            <span class="btn-spinner d-none spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
          </button>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock modals %}

{% block javascript %}
{{ block.super }}
<script>
  // populate modal fields before it opens
  document.getElementById('driver-uninstall-modal').addEventListener('show.bs.modal', function (event) {
    const btn = event.relatedTarget;
    document.getElementById('driver-uninstall-name').textContent = btn.dataset.driver;
    document.getElementById('driver-uninstall-spec').textContent = btn.dataset.spec;
    document.getElementById('driver-uninstall-input').value = btn.dataset.driver;
  });

  // show spinner and disable button on any driver action form submit
  document.querySelectorAll('.driver-action-form').forEach(function (form) {
    form.addEventListener('submit', function () {
      const btn = form.querySelector('button[type="submit"]');
      btn.disabled = true;
      btn.querySelector('.btn-label').classList.add('d-none');
      btn.querySelector('.btn-spinner').classList.remove('d-none');

      // also lock the cancel button in the modal if present
      const cancel = document.getElementById('driver-uninstall-cancel');
      if (cancel) cancel.disabled = true;
    });
  });
</script>
{% endblock javascript %}