{% load i18n %}

<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-sm btn-success dropdown-toggle" data-bs-toggle="dropdown"
      aria-expanded="false">
      {% trans "IP Fabric Topology" %}
    </button>
    <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      {% if source is not None %}
      <li><a href="#"
          hx-get="{% url 'plugins:ipfabric_netbox:ipfabricsource_topology' pk=source.pk site=object.pk %}?snapshot=$last&source={{ source.id }}"
          hx-target="#topology-modal-content" data-bs-toggle="modal" data-bs-target="#topology-modal"
          class="dropdown-item">
          {% trans "Last Snapshot" %}
        </a>
      </li>
      <li><a href="#"
          hx-get="{% url 'plugins:ipfabric_netbox:ipfabricsource_topology' pk=source.pk site=object.pk %}?snapshot=$prev&source={{ source.id }}"
          hx-target="#topology-modal-content" data-bs-toggle="modal" data-bs-target="#topology-modal"
          class="dropdown-item">
          {% trans "Previous Snapshot" %}
        </a>
      </li>
      {% else %}
      <li>
        <span class="dropdown-item text-danger">{% trans "No IP Fabric Source Found for this Site" %}</span>
      </li>
      {% endif %}
    </ul>
  </div>
</div>

<div class="modal fade" id="topology-modal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">{{ object.name }} {% trans "Topology" %}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div id="topology-modal-content">
        <div class="modal-body">
          <div class="d-flex align-items-center">
            <strong role="status">{% trans "Loading..." %}</strong>
            <div class="spinner-border ms-auto" aria-hidden="true"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

{% block javascript %}
<script>
  document.addEventListener('DOMContentLoaded', function () {
    var myModal = document.getElementById('topology-modal');
    var modalBody = document.getElementById('topology-modal-content');
    console.log(myModal);
    myModal.addEventListener('hidden.bs.modal', function () {
      // Clear modal content on close
      console.log("Modal close");
      modalBody.innerHTML = createLoadingContent();
    });
  });

  function createLoadingContent() {
    return `
      <div class="modal-body">
        <div class="d-flex align-items-center">
          <strong role="status">Loading...</strong>
          <div class="spinner-border ms-auto" aria-hidden="true"></div>
        </div>
      </div>
    `;
  }
</script>
{% endblock %}