From 64e989664c7dce61d3d405b34b2b54de80121277 Mon Sep 17 00:00:00 2001
From: chark1es <charles15851@gmail.com>
Date: Tue, 18 Feb 2025 20:02:32 -0800
Subject: [PATCH] fix toast

---
 src/components/dashboard/EventsSection.astro | 782 +++++++++----------
 1 file changed, 388 insertions(+), 394 deletions(-)

diff --git a/src/components/dashboard/EventsSection.astro b/src/components/dashboard/EventsSection.astro
index 115deb6..a9a393a 100644
--- a/src/components/dashboard/EventsSection.astro
+++ b/src/components/dashboard/EventsSection.astro
@@ -7,228 +7,214 @@ import EventLoad from "./EventsSection/EventLoad";
 ---
 
 <div id="" class="">
-    <div class="mb-4 sm:mb-6 px-4 sm:px-6">
-        <h2 class="text-xl sm:text-2xl font-bold">Events</h2>
-        <p class="opacity-70 text-sm sm:text-base">
-            View and manage your IEEE UCSD events
-        </p>
+  <div class="mb-4 sm:mb-6 px-4 sm:px-6">
+    <h2 class="text-xl sm:text-2xl font-bold">Events</h2>
+    <p class="opacity-70 text-sm sm:text-base">
+      View and manage your IEEE UCSD events
+    </p>
+  </div>
+
+  <div
+    class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6 mb-4 sm:mb-6 px-4 sm:px-6"
+  >
+    <!-- Event Check-in Card -->
+    <div class="w-full">
+      <EventCheckIn client:load />
     </div>
 
-    <div
-        class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6 mb-4 sm:mb-6 px-4 sm:px-6"
-    >
-        <!-- Event Check-in Card -->
-        <div class="w-full">
-            <EventCheckIn client:load />
+    <!-- Event Registration Card -->
+    <div class="w-full">
+      <div
+        class="card bg-base-100 shadow-xl border border-base-200 opacity-50 cursor-not-allowed relative group h-full"
+      >
+        <div
+          class="absolute inset-0 bg-base-100 opacity-0 group-hover:opacity-90 transition-opacity duration-300 flex items-center justify-center z-10"
+        >
+          <span class="text-base-content font-medium text-sm sm:text-base"
+            >Coming Soon</span
+          >
         </div>
-
-        <!-- Event Registration Card -->
-        <div class="w-full">
-            <div
-                class="card bg-base-100 shadow-xl border border-base-200 opacity-50 cursor-not-allowed relative group h-full"
-            >
-                <div
-                    class="absolute inset-0 bg-base-100 opacity-0 group-hover:opacity-90 transition-opacity duration-300 flex items-center justify-center z-10"
-                >
-                    <span
-                        class="text-base-content font-medium text-sm sm:text-base"
-                        >Coming Soon</span
-                    >
-                </div>
-                <div class="card-body p-4 sm:p-6">
-                    <h3 class="card-title text-base sm:text-lg mb-3 sm:mb-4">
-                        Event Registration
-                    </h3>
-                    <div class="form-control w-full">
-                        <label class="label">
-                            <span class="label-text text-sm sm:text-base"
-                                >Select an event to register</span
-                            >
-                        </label>
-                        <div class="flex flex-col sm:flex-row gap-2">
-                            <select
-                                class="select select-bordered flex-1 text-sm sm:text-base h-10 min-h-[2.5rem] w-full"
-                                disabled
-                            >
-                                <option disabled selected>Pick an event</option>
-                                <option
-                                    >Technical Workshop - Web Development</option
-                                >
-                                <option
-                                    >Professional Development Workshop</option
-                                >
-                                <option>Social Event - Game Night</option>
-                            </select>
-                            <button
-                                class="btn btn-primary text-sm sm:text-base h-10 min-h-[2.5rem] w-full sm:w-[100px]"
-                                disabled>Register</button
-                            >
-                        </div>
-                    </div>
-                </div>
+        <div class="card-body p-4 sm:p-6">
+          <h3 class="card-title text-base sm:text-lg mb-3 sm:mb-4">
+            Event Registration
+          </h3>
+          <div class="form-control w-full">
+            <label class="label">
+              <span class="label-text text-sm sm:text-base"
+                >Select an event to register</span
+              >
+            </label>
+            <div class="flex flex-col sm:flex-row gap-2">
+              <select
+                class="select select-bordered flex-1 text-sm sm:text-base h-10 min-h-[2.5rem] w-full"
+                disabled
+              >
+                <option disabled selected>Pick an event</option>
+                <option>Technical Workshop - Web Development</option>
+                <option>Professional Development Workshop</option>
+                <option>Social Event - Game Night</option>
+              </select>
+              <button
+                class="btn btn-primary text-sm sm:text-base h-10 min-h-[2.5rem] w-full sm:w-[100px]"
+                disabled>Register</button
+              >
             </div>
+          </div>
         </div>
+      </div>
     </div>
+  </div>
 
-    <EventLoad client:load />
+  <EventLoad client:load />
 </div>
 
 <!-- Event Details Modal -->
 <dialog id="eventDetailsModal" class="modal">
-    <div class="modal-box max-w-[90vw] sm:max-w-4xl p-4 sm:p-6">
-        <div class="flex justify-between items-center mb-3 sm:mb-4">
-            <div class="flex items-center gap-2 sm:gap-3">
-                <h3 class="font-bold text-base sm:text-lg" id="modalTitle">
-                    Event Files
-                </h3>
-                <button
-                    id="downloadAllBtn"
-                    class="btn btn-primary btn-sm gap-1 text-xs sm:text-sm"
-                    onclick="window.downloadAllFiles()"
-                >
-                    <Icon
-                        icon="heroicons:arrow-down-tray-20-solid"
-                        className="h-3 w-3 sm:h-4 sm:w-4"
-                    />
-                    Download All
-                </button>
-            </div>
-            <button
-                class="btn btn-circle btn-ghost btn-sm sm:btn-md"
-                onclick="window.closeEventDetailsModal()"
-            >
-                <Icon
-                    icon="heroicons:x-mark"
-                    className="h-4 w-4 sm:h-6 sm:w-6"
-                />
-            </button>
-        </div>
-
-        <div id="filesContent" class="space-y-3 sm:space-y-4">
-            <!-- Files list will be populated here -->
-        </div>
+  <div class="modal-box max-w-[90vw] sm:max-w-4xl p-4 sm:p-6">
+    <div class="flex justify-between items-center mb-3 sm:mb-4">
+      <div class="flex items-center gap-2 sm:gap-3">
+        <h3 class="font-bold text-base sm:text-lg" id="modalTitle">
+          Event Files
+        </h3>
+        <button
+          id="downloadAllBtn"
+          class="btn btn-primary btn-sm gap-1 text-xs sm:text-sm"
+          onclick="window.downloadAllFiles()"
+        >
+          <iconify-icon
+            icon="heroicons:arrow-down-tray-20-solid"
+            className="h-3 w-3 sm:h-4 sm:w-4"></iconify-icon>
+          Download All
+        </button>
+      </div>
+      <button
+        class="btn btn-circle btn-ghost btn-sm sm:btn-md"
+        onclick="window.closeEventDetailsModal()"
+      >
+        <iconify-icon icon="heroicons:x-mark" className="h-4 w-4 sm:h-6 sm:w-6"
+        ></iconify-icon>
+      </button>
     </div>
-    <form method="dialog" class="modal-backdrop">
-        <button onclick="window.closeEventDetailsModal()">close</button>
-    </form>
+
+    <div id="filesContent" class="space-y-3 sm:space-y-4">
+      <!-- Files list will be populated here -->
+    </div>
+  </div>
+  <form method="dialog" class="modal-backdrop">
+    <button onclick="window.closeEventDetailsModal()">close</button>
+  </form>
 </dialog>
 
 <!-- Universal File Preview Modal -->
 <dialog id="filePreviewModal" class="modal">
-    <div class="modal-box max-w-[90vw] sm:max-w-4xl p-4 sm:p-6">
-        <div class="flex justify-between items-center mb-3 sm:mb-4">
-            <div class="flex items-center gap-2 sm:gap-3">
-                <button
-                    class="btn btn-ghost btn-sm text-xs sm:text-sm"
-                    onclick="window.closeFilePreviewEvents()">Close</button
-                >
-                <h3
-                    class="font-bold text-base sm:text-lg truncate"
-                    id="previewFileName"
-                >
-                </h3>
-            </div>
-        </div>
-        <div class="relative" id="previewContainer">
-            <div
-                id="previewLoadingSpinner"
-                class="absolute inset-0 flex items-center justify-center bg-base-200 bg-opacity-50 hidden"
-            >
-                <span class="loading loading-spinner loading-md sm:loading-lg"
-                ></span>
-            </div>
-            <div id="previewContent" class="w-full">
-                <FilePreview client:load isModal={true} />
-            </div>
-        </div>
+  <div class="modal-box max-w-[90vw] sm:max-w-4xl p-4 sm:p-6">
+    <div class="flex justify-between items-center mb-3 sm:mb-4">
+      <div class="flex items-center gap-2 sm:gap-3">
+        <button
+          class="btn btn-ghost btn-sm text-xs sm:text-sm"
+          onclick="window.closeFilePreviewEvents()">Close</button
+        >
+        <h3
+          class="font-bold text-base sm:text-lg truncate"
+          id="previewFileName"
+        >
+        </h3>
+      </div>
     </div>
-    <form method="dialog" class="modal-backdrop">
-        <button onclick="window.closeFilePreviewEvents()">close</button>
-    </form>
+    <div class="relative" id="previewContainer">
+      <div
+        id="previewLoadingSpinner"
+        class="absolute inset-0 flex items-center justify-center bg-base-200 bg-opacity-50 hidden"
+      >
+        <span class="loading loading-spinner loading-md sm:loading-lg"></span>
+      </div>
+      <div id="previewContent" class="w-full">
+        <FilePreview client:load isModal={true} />
+      </div>
+    </div>
+  </div>
+  <form method="dialog" class="modal-backdrop">
+    <button onclick="window.closeFilePreviewEvents()">close</button>
+  </form>
 </dialog>
 
 <script>
-    import JSZip from "jszip";
+  import JSZip from "jszip";
 
-    // Toast management system
-    const createToast = (
-        message: string,
-        type: "success" | "error" | "warning" = "success"
-    ) => {
-        let toastContainer = document.querySelector(".toast-container");
-        if (!toastContainer) {
-            toastContainer = document.createElement("div");
-            toastContainer.className =
-                "toast-container fixed bottom-4 right-4 z-50";
-            document.body.appendChild(toastContainer);
-        }
+  // Toast management system
+  const createToast = (
+    message: string,
+    type: "success" | "error" | "warning" = "success",
+  ) => {
+    let toastContainer = document.querySelector(".toast-container");
+    if (!toastContainer) {
+      toastContainer = document.createElement("div");
+      toastContainer.className = "toast-container fixed bottom-4 right-4 z-50";
+      document.body.appendChild(toastContainer);
+    }
 
-        const existingToasts = document.querySelectorAll(
-            ".toast-container .toast"
-        );
-        if (existingToasts.length >= 2) {
-            const oldestToast = existingToasts[0];
-            oldestToast.classList.add("toast-exit");
-            setTimeout(() => oldestToast.remove(), 150);
-        }
+    const existingToasts = document.querySelectorAll(".toast-container .toast");
+    if (existingToasts.length >= 2) {
+      const oldestToast = existingToasts[0];
+      oldestToast.classList.add("toast-exit");
+      setTimeout(() => oldestToast.remove(), 150);
+    }
 
-        // Update positions of existing toasts
-        existingToasts.forEach((t) => {
-            const toast = t as HTMLElement;
-            const currentIndex = parseInt(
-                toast.getAttribute("data-index") || "0"
-            );
-            toast.setAttribute("data-index", (currentIndex + 1).toString());
-        });
+    // Update positions of existing toasts
+    existingToasts.forEach((t) => {
+      const toast = t as HTMLElement;
+      const currentIndex = parseInt(toast.getAttribute("data-index") || "0");
+      toast.setAttribute("data-index", (currentIndex + 1).toString());
+    });
 
-        const toast = document.createElement("div");
-        toast.className = "toast translate-x-full";
-        toast.setAttribute("data-index", "0");
+    const toast = document.createElement("div");
+    toast.className = "toast translate-x-full";
+    toast.setAttribute("data-index", "0");
 
-        // Update alert styling based on type
-        const alertClass =
-            type === "success"
-                ? "alert-success bg-success text-success-content"
-                : type === "error"
-                  ? "alert-error bg-error text-error-content"
-                  : "alert-warning bg-warning text-warning-content";
+    // Update alert styling based on type
+    const alertClass =
+      type === "success"
+        ? "alert-success bg-success text-success-content"
+        : type === "error"
+          ? "alert-error bg-error text-error-content"
+          : "alert-warning bg-warning text-warning-content";
 
-        toast.innerHTML = `
+    toast.innerHTML = `
       <div class="alert ${alertClass} shadow-lg min-w-[300px]">
         <div class="flex items-center gap-2">
             ${
-                type === "success"
-                    ? '<Icon icon="heroicons:check-circle" class="stroke-current shrink-0 h-6 w-6"></Icon>'
-                    : type === "error"
-                      ? '<Icon icon="heroicons:x-circle" class="stroke-current shrink-0 h-6 w-6"></Icon>'
-                      : '<Icon icon="heroicons:exclamation-triangle" class="stroke-current shrink-0 h-6 w-6"></Icon>'
+              type === "success"
+                ? '<iconify-icon icon="heroicons:check-circle" class="stroke-current shrink-0 h-6 w-6"></iconify-icon>'
+                : type === "error"
+                  ? '<iconify-icon icon="heroicons:x-circle" class="stroke-current shrink-0 h-6 w-6"></iconify-icon>'
+                  : '<iconify-icon icon="heroicons:exclamation-triangle" class="stroke-current shrink-0 w-6"></iconify-icon>'
             }
             <span>${message}</span>
         </div>
       </div>
     `;
 
-        toastContainer.appendChild(toast);
+    toastContainer.appendChild(toast);
 
-        // Force a reflow to ensure the animation triggers
-        toast.offsetHeight;
+    // Force a reflow to ensure the animation triggers
+    toast.offsetHeight;
 
-        // Add the transition class and remove transform
-        toast.classList.add("transition-all", "duration-300", "ease-out");
-        requestAnimationFrame(() => {
-            toast.classList.remove("translate-x-full");
-        });
+    // Add the transition class and remove transform
+    toast.classList.add("transition-all", "duration-300", "ease-out");
+    requestAnimationFrame(() => {
+      toast.classList.remove("translate-x-full");
+    });
 
-        // Setup exit animation
-        setTimeout(() => {
-            toast.classList.add("toast-exit");
-            setTimeout(() => toast.remove(), 150);
-        }, 3000);
-    };
+    // Setup exit animation
+    setTimeout(() => {
+      toast.classList.add("toast-exit");
+      setTimeout(() => toast.remove(), 150);
+    }, 3000);
+  };
 
-    // Add styles to the document
-    const style = document.createElement("style");
-    style.textContent = `
+  // Add styles to the document
+  const style = document.createElement("style");
+  style.textContent = `
     .toast-container {
       display: flex;
       flex-direction: column;
@@ -257,115 +243,123 @@ import EventLoad from "./EventsSection/EventLoad";
       transform: translateY(-0.025rem);
     }
   `;
-    document.head.appendChild(style);
+  document.head.appendChild(style);
 
-    // Add helper functions for file preview
-    function getFileType(filename: string): string {
-        const extension = filename.split(".").pop()?.toLowerCase();
-        const mimeTypes: { [key: string]: string } = {
-            pdf: "application/pdf",
-            jpg: "image/jpeg",
-            jpeg: "image/jpeg",
-            png: "image/png",
-            gif: "image/gif",
-            mp4: "video/mp4",
-            mp3: "audio/mpeg",
-            txt: "text/plain",
-            doc: "application/msword",
-            docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
-            xls: "application/vnd.ms-excel",
-            xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
-            json: "application/json",
-        };
+  // Add helper functions for file preview
+  function getFileType(filename: string): string {
+    const extension = filename.split(".").pop()?.toLowerCase();
+    const mimeTypes: { [key: string]: string } = {
+      pdf: "application/pdf",
+      jpg: "image/jpeg",
+      jpeg: "image/jpeg",
+      png: "image/png",
+      gif: "image/gif",
+      mp4: "video/mp4",
+      mp3: "audio/mpeg",
+      txt: "text/plain",
+      doc: "application/msword",
+      docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+      xls: "application/vnd.ms-excel",
+      xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+      json: "application/json",
+    };
 
-        return mimeTypes[extension || ""] || "application/octet-stream";
+    return mimeTypes[extension || ""] || "application/octet-stream";
+  }
+
+  // Universal file preview function for events section
+  window.previewFileEvents = function (url: string, filename: string) {
+    console.log("previewFileEvents called with:", { url, filename });
+    const modal = document.getElementById(
+      "filePreviewModal",
+    ) as HTMLDialogElement;
+    const previewFileName = document.getElementById("previewFileName");
+    const previewContent = document.getElementById("previewContent");
+
+    if (modal && previewFileName && previewContent) {
+      console.log("Found all required elements");
+      // Update the filename display
+      previewFileName.textContent = filename;
+
+      // Show the modal
+      modal.showModal();
+
+      // Dispatch state change event
+      window.dispatchEvent(
+        new CustomEvent("filePreviewStateChange", {
+          detail: { url, filename },
+        }),
+      );
+    }
+  };
+
+  // Close file preview for events section
+  window.closeFilePreviewEvents = function () {
+    console.log("closeFilePreviewEvents called");
+    const modal = document.getElementById(
+      "filePreviewModal",
+    ) as HTMLDialogElement;
+    const previewFileName = document.getElementById("previewFileName");
+    const previewContent = document.getElementById("previewContent");
+
+    if (modal && previewFileName && previewContent) {
+      console.log("Resetting preview and closing modal");
+      // Reset the preview state
+      window.dispatchEvent(
+        new CustomEvent("filePreviewStateChange", {
+          detail: { url: "", filename: "" },
+        }),
+      );
+
+      // Reset the UI
+      previewFileName.textContent = "";
+
+      // Close the modal
+      modal.close();
+    }
+  };
+
+  // Update the showFilePreview function for events section
+  window.showFilePreviewEvents = function (file: {
+    url: string;
+    name: string;
+  }) {
+    console.log("showFilePreviewEvents called with:", file);
+    window.previewFileEvents(file.url, file.name);
+  };
+
+  // Update the openDetailsModal function to use the events-specific preview
+  window.openDetailsModal = function (event: any) {
+    const modal = document.getElementById(
+      "eventDetailsModal",
+    ) as HTMLDialogElement;
+    const filesContent = document.getElementById(
+      "filesContent",
+    ) as HTMLDivElement;
+
+    // Check if event has ended
+    const eventEndDate = new Date(event.end_date);
+    const now = new Date();
+
+    if (eventEndDate > now) {
+      createToast(
+        "Files are only available after the event has ended.",
+        "warning",
+      );
+      return;
     }
 
-    // Universal file preview function for events section
-    window.previewFileEvents = function (url: string, filename: string) {
-        console.log("previewFileEvents called with:", { url, filename });
-        const modal = document.getElementById(
-            "filePreviewModal"
-        ) as HTMLDialogElement;
-        const previewFileName = document.getElementById("previewFileName");
-        const previewContent = document.getElementById("previewContent");
+    // Reset state
+    window.currentEventId = event.id;
+    if (filesContent) filesContent.classList.remove("hidden");
 
-        if (modal && previewFileName && previewContent) {
-            console.log("Found all required elements");
-            // Update the filename display
-            previewFileName.textContent = filename;
+    // Populate files content
+    if (event.files && Array.isArray(event.files) && event.files.length > 0) {
+      const baseUrl = "https://pocketbase.ieeeucsd.org";
+      const collectionId = "events";
+      const recordId = event.id;
 
-            // Show the modal
-            modal.showModal();
-
-            // Dispatch state change event
-            window.dispatchEvent(
-                new CustomEvent("filePreviewStateChange", {
-                    detail: { url, filename },
-                })
-            );
-        }
-    };
-
-    // Close file preview for events section
-    window.closeFilePreviewEvents = function () {
-        console.log("closeFilePreviewEvents called");
-        const modal = document.getElementById(
-            "filePreviewModal"
-        ) as HTMLDialogElement;
-        const previewFileName = document.getElementById("previewFileName");
-        const previewContent = document.getElementById("previewContent");
-
-        if (modal && previewFileName && previewContent) {
-            console.log("Resetting preview and closing modal");
-            // Reset the preview state
-            window.dispatchEvent(
-                new CustomEvent("filePreviewStateChange", {
-                    detail: { url: "", filename: "" },
-                })
-            );
-
-            // Reset the UI
-            previewFileName.textContent = "";
-
-            // Close the modal
-            modal.close();
-        }
-    };
-
-    // Update the showFilePreview function for events section
-    window.showFilePreviewEvents = function (file: {
-        url: string;
-        name: string;
-    }) {
-        console.log("showFilePreviewEvents called with:", file);
-        window.previewFileEvents(file.url, file.name);
-    };
-
-    // Update the openDetailsModal function to use the events-specific preview
-    window.openDetailsModal = function (event: any) {
-        const modal = document.getElementById(
-            "eventDetailsModal"
-        ) as HTMLDialogElement;
-        const filesContent = document.getElementById(
-            "filesContent"
-        ) as HTMLDivElement;
-
-        // Reset state
-        window.currentEventId = event.id;
-        if (filesContent) filesContent.classList.remove("hidden");
-
-        // Populate files content
-        if (
-            event.files &&
-            Array.isArray(event.files) &&
-            event.files.length > 0
-        ) {
-            const baseUrl = "https://pocketbase.ieeeucsd.org";
-            const collectionId = "events";
-            const recordId = event.id;
-
-            filesContent.innerHTML = `
+      filesContent.innerHTML = `
                 <div class="overflow-x-auto">
                     <table class="table table-zebra w-full">
                         <thead>
@@ -376,144 +370,144 @@ import EventLoad from "./EventsSection/EventLoad";
                         </thead>
                         <tbody>
                             ${event.files
-                                .map((file: string) => {
-                                    const fileUrl = `${baseUrl}/api/files/${collectionId}/${recordId}/${file}`;
-                                    const fileType = getFileType(file);
-                                    const previewData = JSON.stringify({
-                                        url: fileUrl,
-                                        name: file,
-                                    }).replace(/'/g, "\\'");
-                                    return `
+                              .map((file: string) => {
+                                const fileUrl = `${baseUrl}/api/files/${collectionId}/${recordId}/${file}`;
+                                const fileType = getFileType(file);
+                                const previewData = JSON.stringify({
+                                  url: fileUrl,
+                                  name: file,
+                                }).replace(/'/g, "\\'");
+                                return `
                                         <tr>
                                             <td>${file}</td>
                                             <td class="text-right">
                                                 <button class="btn btn-ghost btn-sm" onclick='window.showFilePreviewEvents(${previewData})'>
-                                                    <Icon icon="heroicons:document" className="h-4 w-4" />
+                                                    <iconify-icon icon="heroicons:document" className="h-4 w-4" />
                                                 </button>
                                                 <a href="${fileUrl}" download="${file}" class="btn btn-ghost btn-sm">
-                                                    <Icon icon="heroicons:arrow-down-tray-20-solid" className="h-4 w-4" />
+                                                    <iconify-icon icon="heroicons:arrow-down-tray-20-solid" className="h-4 w-4" />
                                                 </a>
                                             </td>
                                         </tr>
                                     `;
-                                })
-                                .join("")}
+                              })
+                              .join("")}
                         </tbody>
                     </table>
                 </div>
             `;
-        } else {
-            filesContent.innerHTML = `
+    } else {
+      filesContent.innerHTML = `
                 <div class="text-center py-8 text-base-content/70">
-                    <Icon icon="heroicons:document-duplicate" className="h-12 w-12 mx-auto mb-4 opacity-50" />
+                    <iconify-icon icon="heroicons:document-duplicate" className="h-12 w-12 mx-auto mb-4 opacity-50" />
                     <p>No files attached to this event</p>
                 </div>
             `;
+    }
+
+    modal.showModal();
+  };
+
+  // Add downloadAllFiles function
+  window.downloadAllFiles = async function () {
+    const downloadBtn = document.getElementById(
+      "downloadAllBtn",
+    ) as HTMLButtonElement;
+    if (!downloadBtn) return;
+    const originalBtnContent = downloadBtn.innerHTML;
+
+    try {
+      // Show loading state
+      downloadBtn.innerHTML =
+        '<span class="loading loading-spinner loading-xs"></span> Preparing...';
+      downloadBtn.disabled = true;
+
+      const zip = new JSZip();
+
+      // Get current event files
+      const baseUrl = "https://pocketbase.ieeeucsd.org";
+      const collectionId = "events";
+      const recordId = window.currentEventId;
+
+      // Get the current event from the window object
+      const eventDataId = `event_${window.currentEventId}`;
+      const event = window[eventDataId];
+
+      if (!event || !event.files || event.files.length === 0) {
+        throw new Error("No files available to download");
+      }
+
+      // Download each file and add to zip
+      const filePromises = event.files.map(async (filename: string) => {
+        const fileUrl = `${baseUrl}/api/files/${collectionId}/${recordId}/${filename}`;
+        const response = await fetch(fileUrl);
+        if (!response.ok) {
+          throw new Error(`Failed to download ${filename}`);
         }
+        const blob = await response.blob();
+        zip.file(filename, blob);
+      });
 
-        modal.showModal();
-    };
+      await Promise.all(filePromises);
 
-    // Add downloadAllFiles function
-    window.downloadAllFiles = async function () {
-        const downloadBtn = document.getElementById(
-            "downloadAllBtn"
-        ) as HTMLButtonElement;
-        if (!downloadBtn) return;
-        const originalBtnContent = downloadBtn.innerHTML;
+      // Generate and download zip
+      const zipBlob = await zip.generateAsync({ type: "blob" });
+      const downloadUrl = URL.createObjectURL(zipBlob);
+      const link = document.createElement("a");
+      link.href = downloadUrl;
+      link.download = `${event.event_name}_files.zip`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(downloadUrl);
 
-        try {
-            // Show loading state
-            downloadBtn.innerHTML =
-                '<span class="loading loading-spinner loading-xs"></span> Preparing...';
-            downloadBtn.disabled = true;
+      // Show success message
+      createToast("Files downloaded successfully!", "success");
+    } catch (error: any) {
+      console.error("Failed to download files:", error);
+      createToast(
+        error?.message || "Failed to download files. Please try again.",
+        "error",
+      );
+    } finally {
+      // Reset button state
+      downloadBtn.innerHTML = originalBtnContent;
+      downloadBtn.disabled = false;
+    }
+  };
 
-            const zip = new JSZip();
+  // Close event details modal
+  window.closeEventDetailsModal = function () {
+    const modal = document.getElementById(
+      "eventDetailsModal",
+    ) as HTMLDialogElement;
+    const filesContent = document.getElementById("filesContent");
 
-            // Get current event files
-            const baseUrl = "https://pocketbase.ieeeucsd.org";
-            const collectionId = "events";
-            const recordId = window.currentEventId;
+    if (modal) {
+      // Reset the files content
+      if (filesContent) {
+        filesContent.innerHTML = "";
+      }
 
-            // Get the current event from the window object
-            const eventDataId = `event_${window.currentEventId}`;
-            const event = window[eventDataId];
+      // Reset any other state if needed
+      window.currentEventId = "";
 
-            if (!event || !event.files || event.files.length === 0) {
-                throw new Error("No files available to download");
-            }
+      // Close the modal
+      modal.close();
+    }
+  };
 
-            // Download each file and add to zip
-            const filePromises = event.files.map(async (filename: string) => {
-                const fileUrl = `${baseUrl}/api/files/${collectionId}/${recordId}/${filename}`;
-                const response = await fetch(fileUrl);
-                if (!response.ok) {
-                    throw new Error(`Failed to download ${filename}`);
-                }
-                const blob = await response.blob();
-                zip.file(filename, blob);
-            });
-
-            await Promise.all(filePromises);
-
-            // Generate and download zip
-            const zipBlob = await zip.generateAsync({ type: "blob" });
-            const downloadUrl = URL.createObjectURL(zipBlob);
-            const link = document.createElement("a");
-            link.href = downloadUrl;
-            link.download = `${event.event_name}_files.zip`;
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
-            URL.revokeObjectURL(downloadUrl);
-
-            // Show success message
-            createToast("Files downloaded successfully!", "success");
-        } catch (error: any) {
-            console.error("Failed to download files:", error);
-            createToast(
-                error?.message || "Failed to download files. Please try again.",
-                "error"
-            );
-        } finally {
-            // Reset button state
-            downloadBtn.innerHTML = originalBtnContent;
-            downloadBtn.disabled = false;
-        }
-    };
-
-    // Close event details modal
-    window.closeEventDetailsModal = function () {
-        const modal = document.getElementById(
-            "eventDetailsModal"
-        ) as HTMLDialogElement;
-        const filesContent = document.getElementById("filesContent");
-
-        if (modal) {
-            // Reset the files content
-            if (filesContent) {
-                filesContent.innerHTML = "";
-            }
-
-            // Reset any other state if needed
-            window.currentEventId = "";
-
-            // Close the modal
-            modal.close();
-        }
-    };
-
-    // Make helper functions available globally
-    window.showFilePreview = window.showFilePreviewEvents;
-    window.handlePreviewError = function () {
-        const previewContent = document.getElementById("previewContent");
-        if (previewContent) {
-            previewContent.innerHTML = `
+  // Make helper functions available globally
+  window.showFilePreview = window.showFilePreviewEvents;
+  window.handlePreviewError = function () {
+    const previewContent = document.getElementById("previewContent");
+    if (previewContent) {
+      previewContent.innerHTML = `
                 <div class="alert alert-error">
                     <Icon icon="heroicons:x-circle" className="h-6 w-6" />
                     <span>Failed to load file preview</span>
                 </div>
             `;
-        }
-    };
+    }
+  };
 </script>