<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>EBG - Dashboard</title>
    <!-- Essential JS -->
    <script>
      const lang = <%- JSON.stringify(language) %>
    </script>
    <script src="<%= domain %>/appjs/i18next.js?<%= curentUnixTime %>"></script>
    <!-- CSS files -->
    <link href="<%= domain %>/dist/css/tabler.min.css?<%= curentUnixTime %>" rel="stylesheet" />
    <link href="<%= domain %>/dist/css/tabler-flags.min.css?<%= curentUnixTime %>" rel="stylesheet" />
  </head>
  <body>
    <script src="/appjs/format.js"></script>
    <div class="page">
      <!-- Navbar -->
      <%- html_content.navbar %>
      <div class="page-wrapper">
        <!-- Page header -->
        <div class="page-header d-print-none">
          <div class="container-xl">
            <div class="row g-2 align-items-center">
              <div class="col">
                <h2 class="page-title" data-translate="Settings.Main.SettingsName"></h2>
              </div>
            </div>
          </div>
        </div>
        <!-- Page body -->
        <div class="page-body">
          <div class="container-xl">
            <div class="card">
              <!-- Sidebar Toggle Button for Small Screens -->
              <div class="card-body d-md-none">
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#sidebar-menu" aria-controls="sidebar-menu" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
                </button>
              </div>
              <div class="row g-0">
                <div class="col-12 col-md-3 collapse d-md-block border-end" id="sidebar-menu">
                  <div class="card-body">
                    <div class="list-group list-group-transparent">
                      <a href="/profile-dropdown/settings-account" class="list-group-item list-group-item-action d-flex align-items-center active" data-translate="Settings.Side.Account"></a>
                      <a href="/profile-dropdown/settings-misc" class="list-group-item list-group-item-action d-flex align-items-center" data-translate="Settings.Side.Misc"></a>
                      <a href="/profile-dropdown/settings-links" class="list-group-item list-group-item-action d-flex align-items-center" data-translate="Settings.Side.Links"></a>
                      <a href="/profile-dropdown/settings-integrations" class="list-group-item list-group-item-action d-flex align-items-center" data-translate="Settings.Side.Integrations"></a>
                    </div>
                  </div>
                </div>
                <div class="col d-flex flex-column">
                  <div class="card-body">
                    <h2 class="mb-4" data-translate="Settings.Main.SettingsName"></h2>
                    <h3 class="card-title" data-translate="Settings.Main.ProfileHeadline"></h3>
                    <div class="row align-items-center">
                      <div class="col-auto"><span class="avatar avatar-xl" id="Settings.Profile.AvatarIcon" style="background-image: url()"></span></div>
                      <div class="col-auto"><a data-bs-toggle="modal" data-bs-target="#modal-upload-avatar" class="btn" data-translate="Settings.Profile.SetAvatarIcon"></a></div>
                      <div class="col-auto"><a data-bs-toggle="modal" data-bs-target="#modal-danger-delete-avatar" class="btn btn-ghost-danger" data-translate="Settings.Profile.DeleteAvatarIcon" id="DelAvatarIcon"></a></div>
                    </div>
                    <h3 class="card-title mt-4" data-translate="Settings.Main.AccountHeadline"></h3>
                    <div class="row g-3">
                      <div class="col-md">
                        <div class="form-label" data-translate="Settings.Main.Username"></div>
                        <input type="text" class="form-control" value="" onchange="handleInputChange(this.id)" id="SettingsUsername" />
                      </div>
                      <div class="col-md">
                        <div class="form-label" data-translate="Settings.Main.Email"></div>
                        <input type="text" class="form-control" value="" onchange="handleInputChange(this.id)" id="SettingsEmail" />
                      </div>
                    </div>
                    <br />
                    <div class="row g-3">
                      <div class="col-md">
                        <div class="form-label" data-translate="Settings.Main.FirstName"></div>
                        <input type="text" class="form-control" value="" onchange="handleInputChange(this.id)" id="SettingsFirstName" />
                      </div>
                      <div class="col-md">
                        <div class="form-label" data-translate="Settings.Main.LastName"></div>
                        <input type="text" class="form-control" value="" onchange="handleInputChange(this.id)" id="SettingsLastName" />
                      </div>
                    </div>
                    <br />
                    <div class="row g-3">
                      <div class="mb-3">
                        <div class="form-label" data-translate="Settings.Main.Bio"></div>
                        <textarea class="form-control" value="" id="SettingsBio" onchange="handleInputChange(this.id)"></textarea>
                      </div>
                    </div>
                    <h3 class="card-title mt-4" data-translate="Settings.Main.PasswordHeadline"></h3>
                    <div>
                      <div class="row g-2">
                        <div class="col-auto">
                          <div class="form-label" data-translate="Settings.Main.PasswordOld"></div>
                          <div class="input-group input-group-flat">
                            <input id="SettingsPasswordOLD" type="password" class="form-control" data-translate-placeholder="Login.Placeholder.Password" placeholder="" autocomplete="off" />
                            <span class="input-group-text">
                              <a id="passwordToggle_old" class="link-secondary" title="Show password" data-bs-toggle="tooltip"
                                ><!-- Download SVG icon from http://tabler-icons.io/i/eye -->
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                  <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
                                  <path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" />
                                </svg>
                              </a>
                            </span>
                          </div>
                        </div>
                        <div class="col-auto">
                          <div class="form-label" data-translate="Settings.Main.PasswordRepeat"></div>
                          <div class="input-group input-group-flat">
                            <input id="SettingsPasswordOLD_R" type="password" class="form-control" data-translate-placeholder="Login.Placeholder.Password" placeholder="" autocomplete="off" />
                            <span class="input-group-text">
                              <a id="passwordToggle_old_r" class="link-secondary" title="Show password" data-bs-toggle="tooltip"
                                ><!-- Download SVG icon from http://tabler-icons.io/i/eye -->
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                  <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
                                  <path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" />
                                </svg>
                              </a>
                            </span>
                          </div>
                        </div>
                        <div class="row g-2">
                          <div class="col-auto">
                            <div class="form-label" data-translate="Settings.Main.PasswordNew"></div>
                            <div class="input-group input-group-flat">
                              <input id="SettingsPasswordNEW" type="password" class="form-control" data-translate-placeholder="Login.Placeholder.Password" placeholder="" autocomplete="off" />
                              <span class="input-group-text">
                                <a id="passwordToggle_new" class="link-secondary" title="Show password" data-bs-toggle="tooltip"
                                  ><!-- Download SVG icon from http://tabler-icons.io/i/eye -->
                                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                    <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
                                    <path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" />
                                  </svg>
                                </a>
                              </span>
                            </div>
                          </div>
                        </div>
                        <div>
                          <div class="col-auto">
                            <a class="btn" data-translate="Settings.Main.Button.SetPassword" id="SettingsPasswordSubmit"></a>
                            <div id="SettingsPasswordSubmitError"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <h3 class="card-title mt-4" data-translate="Settings.Main.PublicHeadline"></h3>
                    <p class="card-subtitle" data-translate="Settings.Main.ExplainPrivate"></p>
                    <div>
                      <label class="form-check form-switch form-switch-lg">
                        <input class="form-check-input" type="checkbox" onchange="handleInputChange(this.id)" id="SettingsPrivacy" />
                        <span class="form-check-label form-check-label-on" data-translate="Settings.Main.Button.PrivacyActive"></span>
                        <span class="form-check-label form-check-label-off" data-translate="Settings.Main.Button.PrivacyDeactive"></span>
                      </label>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <%- html_content.footer %>
      </div>
    </div>
    <div class="modal fade" id="modal-upload-avatar" tabindex="-1" aria-labelledby="uploadAvatarModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="uploadAvatarModalLabel" data-translate="Settings.Main.AvatarHeadline"></h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div class="col-md-12">
              <div class="card">
                <div class="card-body">
                  <h3 class="card-title" data-translate="Settings.Main.AvatarUploadArea"></h3>
                  <form class="dropzone" id="dropzone-avatar-upload" autocomplete="off" novalidate style="border: 2px dashed #ccc; border-radius: 10px; padding: 40px; text-align: center; cursor: pointer; transition: border-color 0.3s, background-color 0.3s">
                    <div class="fallback">
                      <input name="file" type="file" style="display: none" />
                    </div>
                    <div class="dz-message">
                      <h3 class="dropzone-msg-title" style="font-size: 24px; margin-bottom: 10px" data-translate="Settings.Main.AvatarDragHere"></h3>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" data-translate="Settings.Main.Button.Cancel"></button>
            <button type="button" class="btn btn-primary" id="upload-button" data-translate="Settings.Main.Button.Upload"></button>
          </div>
        </div>
      </div>
    </div>
    <div class="modal modal-blur fade" id="modal-danger-delete-avatar" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
        <div class="modal-content">
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          <div class="modal-status bg-danger"></div>
          <div class="modal-body text-center py-4">
            <!-- Download SVG icon from http://tabler-icons.io/i/alert-triangle -->
            <svg xmlns="http://www.w3.org/2000/svg" class="icon mb-2 text-danger icon-lg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
              <path d="M10.24 3.957l-8.422 14.06a1.989 1.989 0 0 0 1.7 2.983h16.845a1.989 1.989 0 0 0 1.7 -2.983l-8.423 -14.06a1.989 1.989 0 0 0 -3.4 0z" />
              <path d="M12 9v4" />
              <path d="M12 17h.01" />
            </svg>
            <h3 data-translate="Common_Modals.Delete.Title"></h3>
            <div class="text-muted" data-translate="Settings.Profile.AvatarDelete"></div>
          </div>
          <div class="modal-footer">
            <div class="w-100">
              <div class="row">
                <div class="col"><a class="btn w-100" data-bs-dismiss="modal" data-translate="Common_Modals.Delete.Button.Cancel"></a></div>
                <div class="col"><a class="btn btn-danger w-100" data-bs-dismiss="modal" onclick="deleteAvatar()" data-translate="Common_Modals.Delete.Button.Delete"></a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="<%= domain %>/appjs/permission.js?<%= curentUnixTime %>" defer></script>
    <script src="<%= domain %>/appjs/translate.js?<%= curentUnixTime %>"></script>
    <script src="<%= domain %>/dist/js/tabler.min.js?<%= curentUnixTime %>" defer></script>
    <script src="<%= domain %>/appjs/layout.js?<%= curentUnixTime %>"></script>
    <script src="<%= domain %>/dist/libs/dropzone/dist/dropzone-min.js?<%= curentUnixTime %>" defer></script>
    <script>
      // When passwordToggle is clicked, toggle the type of password field (id login_password) (VanillaJS)
      document.getElementById("passwordToggle_old").addEventListener("click", function () {
        const passwordField = document.getElementById("SettingsPasswordOLD");
        if (passwordField.type === "password") {
          passwordField.type = "text";
        } else {
          passwordField.type = "password";
        }
      });

      document.getElementById("passwordToggle_old_r").addEventListener("click", function () {
        const passwordField = document.getElementById("SettingsPasswordOLD_R");
        if (passwordField.type === "password") {
          passwordField.type = "text";
        } else {
          passwordField.type = "password";
        }
      });

      document.getElementById("passwordToggle_new").addEventListener("click", function () {
        const passwordField = document.getElementById("SettingsPasswordNEW");
        if (passwordField.type === "password") {
          passwordField.type = "text";
        } else {
          passwordField.type = "password";
        }
      });

      // Handle set password (VanillaJS)
      document.getElementById("SettingsPasswordSubmit").addEventListener("click", async () => {
        const old_password = document.getElementById("SettingsPasswordOLD").value;
        const old_password_r = document.getElementById("SettingsPasswordOLD_R").value;
        const new_password = document.getElementById("SettingsPasswordNEW").value;

        if (!new_password) {
          document.getElementById("SettingsPasswordSubmit").classList.toggle("btn-danger");
          updateElementText(document.getElementById("SettingsPasswordSubmit"), i18next.t("Settings.Main.Error.Password.Empty"));
          setTimeout(function () {
            document.getElementById("SettingsPasswordSubmit").classList.toggle("btn-danger");
            updateElementText(document.getElementById("SettingsPasswordSubmit"), i18next.t("Settings.Main.Button.SetPassword"));
          }, 3000);
          return;
        }

        if (old_password != old_password_r) {
          document.getElementById("SettingsPasswordSubmit").classList.toggle("btn-danger");
          updateElementText(document.getElementById("SettingsPasswordSubmit"), i18next.t("Settings.Main.Error.Password.NotEqual"));
          setTimeout(function () {
            document.getElementById("SettingsPasswordSubmit").classList.toggle("btn-danger");
            updateElementText(document.getElementById("SettingsPasswordSubmit"), i18next.t("Settings.Main.Button.SetPassword"));
          }, 3000);
          return;
        }

        const response = await fetch("/api/v1/user/setpassword", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            Authorization: "Bearer " + localStorage.getItem("token"),
          },
          body: JSON.stringify({
            old_password: old_password,
            new_password: new_password,
          }),
        });

        if (response.status == 200) {
          document.getElementById("SettingsPasswordSubmit").classList.toggle("btn-success");
          updateElementText(document.getElementById("SettingsPasswordSubmit"), i18next.t("Settings.Main.Success.Password"));
          setTimeout(function () {
            document.getElementById("SettingsPasswordSubmit").classList.toggle("btn-success");
            updateElementText(document.getElementById("SettingsPasswordSubmit"), i18next.t("Settings.Main.Button.SetPassword"));
          }, 3000);
        } else if (response.status == 401 || response.status == 403 || response.status == 400) {
          document.getElementById("SettingsPasswordSubmit").classList.toggle("btn-danger");
          updateElementText(document.getElementById("SettingsPasswordSubmit"), i18next.t("Settings.Main.Error.Password.Wrong"));
          setTimeout(function () {
            document.getElementById("SettingsPasswordSubmit").classList.toggle("btn-danger");
            updateElementText(document.getElementById("SettingsPasswordSubmit"), i18next.t("Settings.Main.Button.SetPassword"));
          }, 3000);
        } else if (response.status == 409) {
          document.getElementById("SettingsPasswordSubmit").classList.toggle("btn-danger");
          updateElementText(document.getElementById("SettingsPasswordSubmit"), i18next.t("Settings.Main.Error.Password.NoPassword"));
          document.getElementById("SettingsPasswordSubmitError").innerHTML = i18next.t("Settings.Main.ExplainNoPassword");
          setTimeout(function () {
            document.getElementById("SettingsPasswordSubmit").classList.toggle("btn-danger");
            updateElementText(document.getElementById("SettingsPasswordSubmit"), i18next.t("Settings.Main.Button.SetPassword"));
          }, 3000);
        } else {
          document.getElementById("SettingsPasswordSubmit").classList.toggle("btn-danger");
          updateElementText(document.getElementById("SettingsPasswordSubmit"), i18next.t("Settings.Main.Error.Password.Unknown"));
          setTimeout(function () {
            document.getElementById("SettingsPasswordSubmit").classList.toggle("btn-danger");
            updateElementText(document.getElementById("SettingsPasswordSubmit"), i18next.t("Settings.Main.Button.SetPassword"));
          }, 3000);
        }
      });

      // Handle changes to all imput fields (VanillaJS)
      const apiEndpoints = {
        SettingsUsername: {
          endpoint: "/api/v1/user/username",
          method: "POST",
          field: "username",
          value: "raw",
        },
        SettingsEmail: {
          endpoint: "/api/v1/user/email",
          method: "POST",
          field: "email",
          value: "raw",
        },
        SettingsFirstName: {
          endpoint: "/api/v1/user/firstname",
          method: "POST",
          field: "first_name",
          value: "raw",
        },
        SettingsLastName: {
          endpoint: "/api/v1/user/lastname",
          method: "POST",
          field: "last_name",
          value: "raw",
        },
        SettingsBio: {
          endpoint: "/api/v1/user/bio",
          method: "POST",
          field: "bio",
          value: "raw",
        },
        SettingsPrivacy: {
          endpoint: "/api/v1/user/public",
          method: "POST",
          field: "public",
          value: "bool",
        },
      };

      const handleInputChange = async (id) => {
        const inputElement = document.getElementById(id);
        let value_send;

        if (apiEndpoints[id].value == "raw") {
          value_send = inputElement.value;
        } else if (apiEndpoints[id].value == "bool") {
          value_send = inputElement.checked;
        }

        const response = await fetch(apiEndpoints[id].endpoint, {
          method: apiEndpoints[id].method,
          headers: {
            "Content-Type": "application/json",

            Authorization: "Bearer " + localStorage.getItem("token"),
          },
          body: JSON.stringify({
            [apiEndpoints[id].field]: value_send,
          }),
        });

        if (response.ok) {
          inputElement.classList.remove("is-invalid");
          inputElement.classList.add("is-valid");

          setTimeout(() => {
            inputElement.classList.remove("is-valid");
          }, 3000);
        } else {
          inputElement.classList.add("is-invalid");
        }
      };

      // Dropzone Avatar
      document.querySelector("#dropzone-avatar-upload").addEventListener("dragover", function (event) {
        event.preventDefault();
        event.stopPropagation();
        this.classList.add("dz-hover");
        this.style.borderColor = "#000";
        this.style.backgroundColor = "#f0f0f0";
      });

      document.querySelector("#dropzone-avatar-upload").addEventListener("dragleave", function (event) {
        event.preventDefault();
        event.stopPropagation();
        this.classList.remove("dz-hover");
        this.style.borderColor = "#ccc";
        this.style.backgroundColor = "";
      });

      document.querySelector("#dropzone-avatar-upload").addEventListener("drop", function (event) {
        event.preventDefault();
        event.stopPropagation();
        this.classList.remove("dz-hover");
        this.style.borderColor = "#ccc";
        this.style.backgroundColor = "";
      });

      const deleteAvatar = async () => {
        const response = await fetch("/api/v1/user/avatar", {
          method: "DELETE",
          headers: {
            "Content-Type": "application/json",
            Authorization: "Bearer " + localStorage.getItem("token"),
          },
        });

        if (response.status == 200) {
          const response_json = await response.json();
          closeModal("modal-danger-delete-avatar");
          localStorage.setItem("avatar_url", response_json.fileName);
          document.getElementById("Settings.Profile.AvatarIcon").style.backgroundImage = `url(${localStorage.getItem("avatar_url")})`;
          document.getElementById("Dashboard.Profile.AvatarIcon").style.backgroundImage = `url(${localStorage.getItem("avatar_url")})`;
        }
      };

      document.addEventListener("DOMContentLoaded", async () => {
        Dropzone.autoDiscover = false;

        const dropzone = new Dropzone("#dropzone-avatar-upload", {
          url: "/api/v1/user/avatar",
          autoProcessQueue: false,
          maxFiles: 1,
          previewsContainer: ".dropzone",
          headers: {
            Authorization: "Bearer " + localStorage.getItem("token"),
          },
          init: function () {
            this.on("addedfile", function (file) {
              // Check if the file is already compressed to prevent loop
              if (file.isCompressed) return;
              if (file.type !== "image/jpeg" && file.type !== "image/png") {
                this.removeFile(file);
                alert(i18next.t("Error.AvatarTypeNotSupported", { type: file.type.split("/")[1] }));
                return;
              }
              if (this.files.length > 1) this.removeFile(this.files[0]);
              // Compress and resize the image before adding it to the Dropzone file list
              const img = new Image();
              img.src = URL.createObjectURL(file);
              img.onload = () => {
                const canvas = document.createElement("canvas");
                const ctx = canvas.getContext("2d");
                const size = Math.min(img.width, img.height);
                const x = (img.width - size) / 2;
                const y = (img.height - size) / 2;
                canvas.width = 1024;
                canvas.height = 1024;
                ctx.drawImage(img, x, y, size, size, 0, 0, canvas.width, canvas.height);

                canvas.toBlob(
                  (blob) => {
                    let newFileType = file.type;
                    let newFileName = file.name;

                    if (file.type === 'image/png') {
                      newFileType = 'image/jpeg';
                      newFileName = file.name.replace(/\.png$/, '.jpg');
                    }

                    const croppedImage = new File([blob], newFileName, { type: newFileType });
                    croppedImage.isCompressed = true; // Set compression flag, so we don't compress it again

                    this.removeFile(file);
                    this.addFile(croppedImage);

                    const previewElement = document.querySelector("[data-dz-thumbnail]");
                    if (previewElement) {
                      previewElement.src = URL.createObjectURL(croppedImage);
                    }
                  },
                  file.type === 'image/png' ? 'image/jpeg' : file.type,
                  0.74
                );
              };
            });
            this.on("success", function (file, response) {
              // Remove the image from the dropzone
              this.removeFile(file);
              localStorage.setItem("avatar_url", response.fileName);
              document.getElementById("Settings.Profile.AvatarIcon").style.backgroundImage = `url(${localStorage.getItem("avatar_url")})`;
              document.getElementById("Dashboard.Profile.AvatarIcon").style.backgroundImage = `url(${localStorage.getItem("avatar_url")})`;
              closeModal("modal-upload-avatar");
            });
          },
          previewTemplate: `
                <div class="dz-preview dz-file-preview">
                    <div class="dz-image"><img data-dz-thumbnail/></div>
                    <div class="dz-details">
                        <div class="dz-size"><span data-dz-size></span></div>
                    </div>
                    <button class="dz-remove" data-dz-remove><i class="fas fa-times"></i>‚ùå</button>
                </div>`,
        });

        document.getElementById("upload-button").addEventListener("click", function () {
          dropzone.processQueue();
        });

        // Auto-fill user data (VanillaJS)
        const response = await fetch("/api/v1/user", {
          method: "GET",
          headers: {
            "Content-Type": "application/json",

            Authorization: "Bearer " + localStorage.getItem("token"),
          },
        });

        if (response.status == 200) {
          const data = await response.json();

          document.getElementById("SettingsUsername").value = data.username;
          document.getElementById("SettingsEmail").value = data.email;
          document.getElementById("SettingsFirstName").value = data.first_name;
          document.getElementById("SettingsLastName").value = data.last_name;
          document.getElementById("SettingsBio").value = data.bio;
          document.getElementById("SettingsPrivacy").checked = !data.public;
        }
      });
    </script>
  </body>
</html>
