{% extends '_admin/layout/base.html' %}

{% block css %}
<style>
  .admin-dialog {
    width: min(900px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    padding: 0;
    border: 0;
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--bs-box-shadow-lg);
    background: transparent;
  }

  .admin-dialog::backdrop {
    background: rgba(0, 0, 0, 0.45);
  }

  .admin-dialog .card {
    max-height: calc(100vh - 2rem);
  }

  .admin-dialog .card-body {
    overflow-y: auto;
  }
</style>
{% endblock %}

{% block content %}
<main class="app-main py-4">
  <div class="container-fluid px-3 px-md-4">

    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-4">
      <div>
        <h1 class="h3 mb-1">
          <i class="bi bi-table me-1"></i>
          {{ table_name }}
        </h1>

        <p class="text-muted mb-0">
          {{ translate('records_from_model_in_database') }} <code>{{ model_name }}</code> {{ translate('in_database') }} <code>{{db.nice_name}} ({{ db_name }})</code>.
        </p>
      </div>

      <div class="mt-3 mt-md-0 d-flex gap-2">
        <a
          href="{{ admin_interface.url_for('_AdminDbController.database_overview', db_name=db_name) }}"
          class="btn btn-outline-secondary"
        >
          <i class="bi bi-arrow-left me-1"></i>
          {{ translate('back') }}
        </a>

        <button
          type="button"
          class="btn btn-primary"
          id="open-create-record-dialog"
        >
          <i class="bi bi-plus-lg me-1"></i>
          {{ translate('create_record') }}
        </button>
      </div>
    </div>

    <div class="card content-card shadow-sm">
      <div class="card-header bg-white d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-2">
        <div>
          <h2 class="h5 mb-0">{{ translate('table_records') }}</h2>
          <small class="text-muted">
            {{ translate('showing_x_of_y_records').format(shown=records.items|length, total=records.total) }}
          </small>
        </div>

        <form
          method="get"
          action="{{ admin_interface.url_for('_AdminDbController.get_list', db_name=db_name, model_name=model_name) }}"
          class="d-flex align-items-center gap-2"
        >
          <input type="hidden" name="page" value="1">

          <label for="records-count-top" class="text-muted small mb-0">
            {{ translate('per_page') }}
          </label>

          <select
            id="records-count-top"
            name="per_page"
            class="form-select form-select-sm"
            style="width: auto;"
            onchange="this.form.submit()"
          >
            <option value="10" {% if current_per_page == 10 %}selected{% endif %}>10</option>
            <option value="25" {% if current_per_page == 25 %}selected{% endif %}>25</option>
            <option value="50" {% if current_per_page == 50 %}selected{% endif %}>50</option>
            <option value="100" {% if current_per_page == 100 %}selected{% endif %}>100</option>
          </select>
        </form>
      </div>

      <div class="card-body p-0">
        <div class="table-responsive">
          <table class="table table-hover align-middle mb-0">
            <thead class="table-light">
              <tr>
                {% for column in table_columns %}
                  <th scope="col" class="text-nowrap">
                    {{ column.label }}
                  </th>
                {% endfor %}

                <th scope="col" class="text-end text-nowrap">
                  {{ translate('actions') }}
                </th>
              </tr>
            </thead>

            <tbody>
              {% for record in records.items %}
                {% set record_pk = get_record_primary_key_value(record, model) %}

                <tr>
                  {% for column in table_columns %}
                    <td>
                      {% set value = get_record_value(record, column.name) %}

                      {% if value is sameas true %}
                        <span class="badge text-bg-success">
                          <i class="bi bi-check-lg me-1"></i>
                          {{ translate('true') }}
                        </span>
                      {% elif value is sameas false %}
                        <span class="badge text-bg-secondary">
                          <i class="bi bi-x-lg me-1"></i>
                          {{ translate('false') }}
                        </span>
                      {% elif value == "" %}
                        <span class="text-muted">—</span>
                      {% else %}
                        {{ value|default('', true)|string|truncate(80) }}
                      {% endif %}
                    </td>
                  {% endfor %}

                  <td class="text-end text-nowrap">
                    <div class="btn-group btn-group-sm" role="group" aria-label="{{ translate('record_actions') }}">
                      <button
                        type="button"
                        class="btn btn-outline-primary view-record-btn"
                        data-record-id="{{ record_pk }}"
                        data-get-url="{{ admin_interface.url_for('_AdminDbController.get_record', db_name=db_name, model_name=model_name, pk_values_str=record_pk) }}"
                      >
                        <i class="bi bi-eye me-1"></i>
                        {{ translate('view') }}
                      </button>

                      <button
                        type="button"
                        class="btn btn-outline-secondary edit-record-btn"
                        data-record-id="{{ record_pk }}"
                        data-get-url="{{ admin_interface.url_for('_AdminDbController.get_record', db_name=db_name, model_name=model_name, pk_values_str=record_pk) }}"
                        data-update-url="{{ admin_interface.url_for('_AdminDbController.update_record', db_name=db_name, model_name=model_name, pk_values_str=record_pk) }}"
                      >
                        <i class="bi bi-pencil-square me-1"></i>
                        {{ translate('edit') }}
                      </button>

                      <button
                        type="button"
                        class="btn btn-outline-danger delete-record-btn"
                        data-record-id="{{ record_pk }}"
                        data-delete-url="{{ admin_interface.url_for('_AdminDbController.delete_record', db_name=db_name, model_name=model_name, pk_values_str=record_pk) }}"
                      >
                        <i class="bi bi-trash3 me-1"></i>
                        {{ translate('delete') }}
                      </button>
                    </div>
                  </td>
                </tr>
              {% else %}
                <tr>
                  <td colspan="{{ table_columns|length + 1 }}" class="text-center text-muted py-5">
                    <div class="mb-2">
                      <i class="bi bi-inbox fs-2"></i>
                    </div>
                    {{ translate('no_records_available') }}
                  </td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>

      <div class="card-footer bg-white d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3">
        <div class="d-flex flex-column flex-md-row align-items-md-center gap-2">
          <span class="text-muted small">
            {{ translate('page_x_of_y').format(page=records.page, pages=records.pages if records.pages > 0 else 1) }}
          </span>

          <span class="text-muted small d-none d-md-inline">
            ·
          </span>

          <span class="text-muted small">
            {{ translate('total_records').format(total=records.total) }}
          </span>
        </div>

        <nav aria-label="{{ translate('records_table_pagination') }}">
          <ul class="pagination pagination-sm mb-0">

            <li class="page-item {% if not records.has_prev %}disabled{% endif %}">
              <a
                class="page-link"
                href="{{ admin_interface.url_for('_AdminDbController.get_list', db_name=db_name, model_name=model_name, page=records.page - 1, per_page=records.per_page) }}"
              >
                {{ translate('previous') }}
              </a>
            </li>

            {% if records.page > 3 %}
              <li class="page-item">
                <a
                  class="page-link"
                  href="{{ admin_interface.url_for('_AdminDbController.get_list', db_name=db_name, model_name=model_name, page=1, per_page=records.per_page) }}"
                >
                  1
                </a>
              </li>

              {% if records.page > 4 %}
                <li class="page-item disabled">
                  <span class="page-link">…</span>
                </li>
              {% endif %}
            {% endif %}

            {% for page_number in pagination_pages %}
              <li class="page-item {% if page_number == records.page %}active{% endif %}">
                <a
                  class="page-link"
                  href="{{ admin_interface.url_for('_AdminDbController.get_list', db_name=db_name, model_name=model_name, page=page_number, per_page=records.per_page) }}"
                >
                  {{ page_number }}
                </a>
              </li>
            {% endfor %}

            {% if records.page < records.pages - 2 %}
              {% if records.page < records.pages - 3 %}
                <li class="page-item disabled">
                  <span class="page-link">…</span>
                </li>
              {% endif %}

              <li class="page-item">
                <a
                  class="page-link"
                  href="{{ admin_interface.url_for('_AdminDbController.get_list', db_name=db_name, model_name=model_name, page=records.pages, per_page=records.per_page) }}"
                >
                  {{ records.pages }}
                </a>
              </li>
            {% endif %}

            <li class="page-item {% if not records.has_next %}disabled{% endif %}">
              <a
                class="page-link"
                href="{{ admin_interface.url_for('_AdminDbController.get_list', db_name=db_name, model_name=model_name, page=records.page + 1, per_page=records.per_page) }}"
              >
                {{ translate('next') }}
              </a>
            </li>

          </ul>
        </nav>
      </div>
    </div>

  </div>
</main>
{% include "_admin/databases/db_create_record.html" %}
{% include "_admin/databases/db_update_record.html" %}
{% include "_admin/databases/db_delete_record.html" %}
{% include "_admin/databases/db_view_record.html" %}
{% endblock %}

{% block js %}
<script>
  const createRecordDialog = document.getElementById("create-record-dialog");
  const openCreateRecordDialogBtn = document.getElementById("open-create-record-dialog");
  const closeCreateRecordDialogBtn = document.getElementById("close-create-record-dialog");
  const cancelCreateRecordDialogBtn = document.getElementById("cancel-create-record-dialog");

  const createRecordForm = document.getElementById("create-record-form");
  const createRecordError = document.getElementById("create-record-error");

  const updateRecordDialog = document.getElementById("update-record-dialog");
  const updateRecordForm = document.getElementById("update-record-form");
  const updateRecordError = document.getElementById("update-record-error");
  const closeUpdateRecordDialogBtn = document.getElementById("close-update-record-dialog");
  const cancelUpdateRecordDialogBtn = document.getElementById("cancel-update-record-dialog");

  const deleteRecordDialog = document.getElementById("delete-record-dialog");
  const deleteRecordError = document.getElementById("delete-record-error");
  const closeDeleteRecordDialogBtn = document.getElementById("close-delete-record-dialog");
  const cancelDeleteRecordDialogBtn = document.getElementById("cancel-delete-record-dialog");
  const confirmDeleteRecordBtn = document.getElementById("confirm-delete-record-btn");

  const viewRecordDialog = document.getElementById("view-record-dialog");
  const viewRecordError = document.getElementById("view-record-error");
  const viewRecordLoading = document.getElementById("view-record-loading");
  const viewRecordContent = document.getElementById("view-record-content");
  const viewRecordTableBody = document.getElementById("view-record-table-body");
  const closeViewRecordDialogBtn = document.getElementById("close-view-record-dialog");
  const closeViewRecordFooterBtn = document.getElementById("close-view-record-footer-btn");

  let pendingDeleteUrl = null;
  let pendingDeleteButton = null;

  function clearError(errorContainer) {
    if (!errorContainer) {
      return;
    }

    errorContainer.textContent = "";
    errorContainer.classList.add("d-none");
  }

  function showError(errorContainer, message) {
    if (!errorContainer) {
      return;
    }

    errorContainer.textContent = message || "{{ translate('something_went_wrong') }}";
    errorContainer.classList.remove("d-none");
  }

  async function getErrorMessage(response, fallbackMessage = "{{ translate('something_went_wrong') }}") {
    try {
      const data = await response.json();

      return (
        data.message ||
        data.error ||
        fallbackMessage
      );
    } catch {
      return fallbackMessage;
    }
  }

  function closeDialogOnBackdropClick(dialog) {
    dialog?.addEventListener("click", (event) => {
      if (event.target !== dialog) {
        return;
      }

      const dialogRect = dialog.getBoundingClientRect();

      const clickedOutside =
        event.clientX < dialogRect.left ||
        event.clientX > dialogRect.right ||
        event.clientY < dialogRect.top ||
        event.clientY > dialogRect.bottom;

      if (clickedOutside) {
        dialog.close();
      }
    });
  }

  function preventImplicitSubmitOnEnter(form) {
    form?.addEventListener("keydown", (event) => {
      if (event.key !== "Enter") {
        return;
      }

      const target = event.target;

      if (!target) {
        return;
      }

      const tagName = target.tagName?.toLowerCase();

      if (tagName === "textarea") {
        return;
      }

      if (tagName === "button") {
        return;
      }

      if (target.closest?.("tags-input")) {
        return;
      }

      event.preventDefault();
    });
  }

  function normalizeDateTimeLocalValue(value) {
    if (!value || typeof value !== "string") {
      return value || "";
    }

    if (value.includes("T")) {
      return value.slice(0, 16);
    }

    return value;
  }

  function formatRecordValue(value) {
    if (value === null || value === undefined || value === "") {
      return "—";
    }

    if (value === true) {
      return "{{ translate('true') }}";
    }

    if (value === false) {
      return "{{ translate('false') }}";
    }

    if (typeof value === "object") {
      return JSON.stringify(value, null, 2);
    }

    return String(value);
  }

  function formatRecordLabel(key) {
    return key
      .replaceAll("_", " ")
      .replace(/\b\w/g, (char) => char.toUpperCase());
  }

  function getFieldValue(field) {
    const tagName = field.tagName?.toLowerCase();

    if (field.disabled) {
      return "";
    }

    if (field.type === "checkbox") {
      return field.checked ? "true" : "";
    }

    if (tagName === "tags-input") {
      const value = field.value;

      if (Array.isArray(value)) {
        return value.length > 0 ? JSON.stringify(value) : "";
      }

      return value || "";
    }

    if (typeof field.value === "string") {
      return field.value.trim();
    }

    return field.value ?? "";
  }

  function getFieldLabel(form, field) {
    if (field.id) {
      const label = form.querySelector(`label[for="${CSS.escape(field.id)}"]`);

      if (label) {
        return label.textContent.replace("*", "").trim();
      }
    }

    return (
      field.getAttribute("aria-label") ||
      field.getAttribute("placeholder") ||
      field.getAttribute("name") ||
      "Field"
    );
  }

  function focusField(field) {
    if (typeof field.focus === "function") {
      field.focus();
      return;
    }

    const innerInput = field.shadowRoot?.querySelector?.("input, textarea, select");

    if (innerInput && typeof innerInput.focus === "function") {
      innerInput.focus();
    }
  }

  function validateForm(form) {
    const fields = form.querySelectorAll("input, textarea, select, tags-input");

    for (const field of fields) {
      if (field.disabled) {
        continue;
      }

      if (field.type === "hidden") {
        continue;
      }

      if (!field.hasAttribute("required")) {
        continue;
      }

      const value = getFieldValue(field);

      if (value === null || value === undefined || value === "") {
        const label = getFieldLabel(form, field);

        focusField(field);

        return `${label} is required.`;
      }
    }

    return null;
  }

  function renderReadonlyRecord(recordFields, fallbackRecordData = {}) {
    if (!viewRecordTableBody) {
      return;
    }

    viewRecordTableBody.innerHTML = "";

    const fields = Array.isArray(recordFields) && recordFields.length > 0
      ? recordFields
      : Object.entries(fallbackRecordData).map(([key, value]) => ({
          name: key,
          label: formatRecordLabel(key),
          value
        }));

    fields.forEach((field) => {
      const tr = document.createElement("tr");

      const th = document.createElement("th");
      th.scope = "row";
      th.className = "text-muted text-nowrap";
      th.style.width = "220px";
      th.textContent = field.label || formatRecordLabel(field.name);

      const td = document.createElement("td");
      const value = field.value;

      if (value === null || value === undefined || value === "") {
        const span = document.createElement("span");
        span.className = "text-muted";
        span.textContent = "—";
        td.appendChild(span);
      } else if (typeof value === "object") {
        const pre = document.createElement("pre");
        pre.className = "mb-0 small";
        pre.textContent = JSON.stringify(value, null, 2);
        td.appendChild(pre);
      } else if (value === true || value === false) {
        const span = document.createElement("span");
        span.className = value ? "badge text-bg-success" : "badge text-bg-secondary";
        span.textContent = value ? "{{ translate('true') }}" : "{{ translate('false') }}";
        td.appendChild(span);
      } else {
        td.textContent = String(value);
      }

      tr.appendChild(th);
      tr.appendChild(td);
      viewRecordTableBody.appendChild(tr);
    });
  }

  function setViewDialogLoading(isLoading) {
    viewRecordLoading?.classList.toggle("d-none", !isLoading);
    viewRecordContent?.classList.toggle("d-none", isLoading);
  }

  function setCustomElementValue(field, value) {
    const tagName = field.tagName?.toLowerCase();

    if (tagName === "tags-input") {
      if (Array.isArray(value)) {
        field.value = value;
        return;
      }

      if (typeof value === "string") {
        try {
          const parsed = JSON.parse(value);

          if (Array.isArray(parsed)) {
            field.value = parsed.map((item) => String(item));
            return;
          }
        } catch {
          // Fall back to comma-separated values below.
        }

        field.value = value
          .split(",")
          .map((item) => item.trim())
          .filter(Boolean);

        return;
      }

      field.value = [];
      return;
    }

    if (tagName === "summernote-editor") {
      field.value = value ?? "";

      if (typeof field.refresh === "function") {
        field.refresh();
      }

      return;
    }

    field.value = value ?? "";
  }

  function setUpdateFormValues(recordData) {
    if (!updateRecordForm) {
      return;
    }

    const fields = updateRecordForm.querySelectorAll("[data-field-name]");

    fields.forEach((field) => {
      const fieldName = field.dataset.fieldName;
      const value = recordData[fieldName];
      const tagName = field.tagName?.toLowerCase();

      if (tagName && tagName.includes("-")) {
        setCustomElementValue(field, value);
        return;
      }

      if (field.type === "checkbox") {
        field.checked =
          value === true ||
          value === "true" ||
          value === 1 ||
          value === "1";

        return;
      }

      if (field.type === "datetime-local") {
        field.value = normalizeDateTimeLocalValue(value);
        return;
      }

      if (field.type === "date") {
        field.value = value ? String(value).slice(0, 10) : "";
        return;
      }

      field.value = value ?? "";
    });
  }

  async function submitFormWithFetch({
    form,
    errorContainer,
    loadingText,
    fallbackErrorMessage,
    methodOverride = null
  }) {
    clearError(errorContainer);

    const validationMessage = validateForm(form);

    if (validationMessage) {
      showError(errorContainer, validationMessage);
      return;
    }

    const submitBtn = form.querySelector('button[type="submit"]');
    const originalSubmitText = submitBtn?.innerHTML;

    if (submitBtn) {
      submitBtn.disabled = true;
      submitBtn.innerHTML = `
        <span class="spinner-border spinner-border-sm me-1" aria-hidden="true"></span>
        ${loadingText}
      `;
    }

    try {
      const formData = new FormData(form);

      const response = await fetch(form.action, {
        method: methodOverride || form.method || "POST",
        body: formData,
        redirect: "follow"
      });

      if (!response.ok) {
        const message = await getErrorMessage(response, fallbackErrorMessage);
        showError(errorContainer, message);
        return;
      }

      if (response.redirected) {
        window.location.href = response.url;
        return;
      }

      window.location.reload();
    } catch {
      showError(errorContainer, fallbackErrorMessage);
    } finally {
      if (submitBtn) {
        submitBtn.disabled = false;
        submitBtn.innerHTML = originalSubmitText;
      }
    }
  }

  openCreateRecordDialogBtn?.addEventListener("click", () => {
    clearError(createRecordError);
    createRecordForm?.reset();

    createRecordForm
      ?.querySelectorAll("tags-input")
      .forEach((field) => {
        field.value = [];
      });

    createRecordDialog?.showModal();
  });

  closeCreateRecordDialogBtn?.addEventListener("click", () => {
    createRecordDialog?.close();
  });

  cancelCreateRecordDialogBtn?.addEventListener("click", () => {
    createRecordDialog?.close();
  });

  closeUpdateRecordDialogBtn?.addEventListener("click", () => {
    updateRecordDialog?.close();
  });

  cancelUpdateRecordDialogBtn?.addEventListener("click", () => {
    updateRecordDialog?.close();
  });

  closeDeleteRecordDialogBtn?.addEventListener("click", () => {
    deleteRecordDialog?.close();
  });

  cancelDeleteRecordDialogBtn?.addEventListener("click", () => {
    deleteRecordDialog?.close();
  });

  closeViewRecordDialogBtn?.addEventListener("click", () => {
    viewRecordDialog?.close();
  });

  closeViewRecordFooterBtn?.addEventListener("click", () => {
    viewRecordDialog?.close();
  });

  closeDialogOnBackdropClick(createRecordDialog);
  closeDialogOnBackdropClick(updateRecordDialog);
  closeDialogOnBackdropClick(deleteRecordDialog);
  closeDialogOnBackdropClick(viewRecordDialog);

  preventImplicitSubmitOnEnter(createRecordForm);
  preventImplicitSubmitOnEnter(updateRecordForm);

  createRecordForm?.addEventListener("submit", async (event) => {
    event.preventDefault();

    await submitFormWithFetch({
      form: createRecordForm,
      errorContainer: createRecordError,
      loadingText: "Creating...",
      fallbackErrorMessage: "Failed to create record."
    });
  });

  document.querySelectorAll(".view-record-btn").forEach((button) => {
    button.addEventListener("click", async () => {
      const getUrl = button.dataset.getUrl;

      clearError(viewRecordError);

      if (viewRecordTableBody) {
        viewRecordTableBody.innerHTML = "";
      }

      setViewDialogLoading(true);
      viewRecordDialog?.showModal();

      try {
        const response = await fetch(getUrl, {
          method: "GET"
        });

        if (!response.ok) {
          const message = await getErrorMessage(response, "Failed to fetch record.");
          showError(viewRecordError, message);
          setViewDialogLoading(false);
          return;
        }

        const payload = await response.json();

        renderReadonlyRecord(payload.fields || [], payload.data || {});
        setViewDialogLoading(false);
      } catch {
        showError(viewRecordError, "Network error. Failed to fetch record.");
        setViewDialogLoading(false);
      }
    });
  });

  document.querySelectorAll(".edit-record-btn").forEach((button) => {
    button.addEventListener("click", async () => {
      const getUrl = button.dataset.getUrl;
      const updateUrl = button.dataset.updateUrl;

      clearError(updateRecordError);
      updateRecordForm?.reset();

      updateRecordForm
        ?.querySelectorAll("tags-input")
        .forEach((field) => {
          field.value = [];
        });

      updateRecordForm
        ?.querySelectorAll("summernote-editor")
        .forEach((field) => {
          field.value = "";
        });

      if (updateRecordForm) {
        updateRecordForm.action = updateUrl;
      }

      try {
        const response = await fetch(getUrl, {
          method: "GET"
        });

        if (!response.ok) {
          const message = await getErrorMessage(response, "Failed to fetch record.");
          showError(updateRecordError, message);
          updateRecordDialog?.showModal();
          return;
        }

        const payload = await response.json();

        updateRecordDialog?.showModal();

        requestAnimationFrame(() => {
          setUpdateFormValues(payload.data || {});
        });
      } catch {
        showError(updateRecordError, "Network error. Failed to fetch record.");
        updateRecordDialog?.showModal();
      }
    });
  });

  updateRecordForm?.addEventListener("submit", async (event) => {
    event.preventDefault();

    await submitFormWithFetch({
      form: updateRecordForm,
      errorContainer: updateRecordError,
      loadingText: "Updating...",
      fallbackErrorMessage: "Failed to update record.",
      methodOverride: "PUT"
    });
  });

  document.querySelectorAll(".delete-record-btn").forEach((button) => {
    button.addEventListener("click", () => {
      pendingDeleteUrl = button.dataset.deleteUrl;
      pendingDeleteButton = button;

      clearError(deleteRecordError);

      deleteRecordDialog?.showModal();
    });
  });

  confirmDeleteRecordBtn?.addEventListener("click", async () => {
    if (!pendingDeleteUrl) {
      showError(deleteRecordError, "Missing delete URL.");
      return;
    }

    const originalConfirmText = confirmDeleteRecordBtn.innerHTML;

    confirmDeleteRecordBtn.disabled = true;
    confirmDeleteRecordBtn.innerHTML = `
      <span class="spinner-border spinner-border-sm me-1" aria-hidden="true"></span>
      Deleting...
    `;

    if (pendingDeleteButton) {
      pendingDeleteButton.disabled = true;
    }

    try {
      const response = await fetch(pendingDeleteUrl, {
        method: "DELETE",
        redirect: "follow"
      });

      if (!response.ok) {
        const message = await getErrorMessage(response, "Failed to delete record.");
        showError(deleteRecordError, message);
        return;
      }

      if (response.redirected) {
        window.location.href = response.url;
        return;
      }

      window.location.reload();
    } catch {
      showError(deleteRecordError, "Network error. Failed to delete record.");
    } finally {
      confirmDeleteRecordBtn.disabled = false;
      confirmDeleteRecordBtn.innerHTML = originalConfirmText;

      if (pendingDeleteButton) {
        pendingDeleteButton.disabled = false;
      }
    }
  });
</script>
{% endblock %}