{% load widget_tweaks %}
<div id="destination-table" class="card card-base max-w-4xl w-full">
  <div class="card-body p-4">
    <div class="flex items-center justify-end mb-2">
      <a href="https://argus-server.readthedocs.io/en/latest/integrations/notifications/index.html"
         target="_blank"
         rel="noopener noreferrer"
         class="link link-primary text-sm flex items-center gap-1">
        <svg xmlns="http://www.w3.org/2000/svg"
             class="h-4 w-4"
             fill="none"
             viewBox="0 0 24 24"
             stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
        </svg>
        Guide to destinations
      </a>
    </div>
    {% if error_msg %}
      {% include "messages/_banner.html" with message=error_msg level="error" %}
    {% endif %}
    {% if success_message %}
      {% include "messages/_banner.html" with message=success_message level="success" %}
    {% endif %}
    <div class="overflow-x-auto">
      <table class="table [&_td]:align-top">
        <thead>
          <tr>
            <th class="w-[150px]">Media</th>
            <th>Name</th>
            <th>Value</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr id="destination-create"></tr>
          {% for form in update_forms %}
            <tr class="align-top">
              <td class="whitespace-nowrap">
                {% csrf_token %}
                {% for hidden_field in form.hidden_fields %}{{ hidden_field }}{% endfor %}
                <span class="inline-flex items-center gap-1 mt-1.5">
                  <span class="badge badge-outline">{{ form.instance.media.name }}</span>
                  {% if not form.instance.media.installed %}
                    <span class="text-warning text-lg w-5"
                          title="This medium is not installed. No notifications will be sent to this destination.">
                      <i class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i>
                    </span>
                  {% endif %}
                </span>
              </td>
              <td>
                {% render_field form.label class+="input input-bordered input-sm w-full" %}
                {% for error in form.label.errors %}<span class="text-error text-xs">{{ error }}</span>{% endfor %}
              </td>
              <td>
                {% render_field form.settings class+="input input-bordered input-sm w-full" %}
                {% for error in form.settings.errors %}<span class="text-error text-xs">{{ error }}</span>{% endfor %}
              </td>
              <td>
                <div class="flex gap-1 items-center">
                  {% if form.instance.media.installed %}
                    <button type="button"
                            hx-post="{% url 'htmx:destination-update' pk=form.instance.pk %}"
                            hx-include="closest tr"
                            hx-target="#destination-table"
                            hx-swap="outerHTML"
                            class="btn btn-primary btn-sm">Save</button>
                  {% endif %}
                  {% if form.delete_disabled %}
                    <span class="tooltip tooltip-left tooltip-warning cursor-not-allowed"
                          data-tip="{{ form.delete_tooltip }}">
                      <button class="btn btn-sm btn-outline btn-error" disabled>Delete</button>
                    </span>
                  {% else %}
                    {% include form.modal.template_name with modal=form.modal %}
                  {% endif %}
                </div>
              </td>
            </tr>
          {% empty %}
            <tr id="destination-empty">
              <td colspan="4" class="text-base-content/60 text-center">No destinations yet.</td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
<dialog id="unsaved-changes-dialog" class="modal">
  <div class="modal-box">
    <h3 class="text-lg font-bold">Unsaved changes</h3>
    <p class="py-4">You have unsaved changes. Are you sure you want to leave?</p>
    <div class="modal-action">
      <button class="btn btn-error" id="unsaved-changes-leave">Leave</button>
      <button class="btn" id="unsaved-changes-stay">Stay</button>
    </div>
  </div>
  <form method="dialog" class="modal-backdrop">
    <button>close</button>
  </form>
</dialog>
<script>
(() => {
  const table = document.getElementById("destination-table");
  if (!table) return;

  const dialog = document.getElementById("unsaved-changes-dialog");
  const leaveBtn = document.getElementById("unsaved-changes-leave");
  const stayBtn = document.getElementById("unsaved-changes-stay");

  const hasDirtyInputs = () => {
    const t = document.getElementById("destination-table");
    if (!t) return false;
    const hasCreateRow = t.querySelector("#destination-create input") !== null;
    return hasCreateRow || [...t.querySelectorAll("input[data-original]")]
      .some((el) => el.value !== el.dataset.original);
  };

  // Store original values for dirty checking
  table.querySelectorAll("input[type='text']").forEach((input) => {
    input.dataset.original = input.value;
  });

  // Submit on Enter key
  table.addEventListener("keydown", (e) => {
    if (e.key === "Enter" && e.target.matches("input, select")) {
      e.preventDefault();
      e.target.closest("tr").querySelector("[hx-post]")?.click();
    }
  });

  // Intercept link navigation when inputs are dirty
  if (globalThis._destLinkHandler) {
    document.body.removeEventListener("click", globalThis._destLinkHandler);
  }
  globalThis._destLinkHandler = (e) => {
    const link = e.target.closest("a[href]");
    if (!link || !hasDirtyInputs()) return;

    e.preventDefault();
    leaveBtn.onclick = () => {
      globalThis.removeEventListener("beforeunload", globalThis._destBeforeUnload);
      globalThis.location.href = link.href;
    };
    dialog.showModal();
  };
  document.body.addEventListener("click", globalThis._destLinkHandler);

  stayBtn.addEventListener("click", () => dialog.close());

  // Fallback for browser/tab close
  if (globalThis._destBeforeUnload) {
    globalThis.removeEventListener("beforeunload", globalThis._destBeforeUnload);
  }
  globalThis._destBeforeUnload = (e) => {
    if (hasDirtyInputs()) {
      e.preventDefault();
      e.returnValue = "";
    }
  };
  globalThis.addEventListener("beforeunload", globalThis._destBeforeUnload);

  // Suspend guard during htmx requests (save/delete actions trigger redirects)
  table.addEventListener("htmx:beforeRequest", () => {
    globalThis.removeEventListener("beforeunload", globalThis._destBeforeUnload);
  });
  table.addEventListener("htmx:afterSettle", () => {
    globalThis.addEventListener("beforeunload", globalThis._destBeforeUnload);
  });
})();
</script>