<!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.Misc.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" 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 active" 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.Misc.SettingsName"></h2>
                    <h3 class="card-title" data-translate="Settings.Misc.DesignLangHeadline"></h3>
                    <div class="row g-3">
                      <div class="col-md-3">
                        <div class="form-label" data-translate="Settings.Misc.Language"></div>
                        <select type="text" class="form-select mb-3" id="select-lang" value="">
                          <% for(const code in countryConfig) { %>
                          <option value="<%= code %>"><%= countryConfig[code] %></option>
                          <% } %>
                        </select>
                      </div>
                      <div class="col-md">
                        <div class="form-label" data-translate="Settings.Misc.Layout"></div>
                        <select type="text" class="form-select mb-3" id="select-layout" value="">
                          <option value="fluid" data-translate="Settings.Misc.LayoutOptions.Fluid"></option>
                          <option value="center" data-translate="Settings.Misc.LayoutOptions.Center"></option>
                        </select>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <%- html_content.footer %>
      </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>
      document.addEventListener("DOMContentLoaded", async () => {
        const selectLayoutElement = document.getElementById("select-layout");
        let design = localStorage.getItem("tablerTheme");
        let parts = design ? design.split(".") : ["light", "centered"]; // default values

        // Determine the current layout setting
        let currentLayout = parts[1] === "fluid" ? "fluid" : "center";

        // Set the selected option in the <select> element
        for (let option of selectLayoutElement.options) {
          if (option.value === currentLayout) {
            option.selected = true;
            break;
          }
        }

        const selectLangElement = document.getElementById("select-lang");

        const currentLang = localStorage.getItem("language") || "en";

        // Set the selected option in the <select> element
        for (let option of selectLangElement.options) {
          if (option.value === currentLang) {
            option.selected = true;
            break;
          }
        }

        // Event listener for changes in the select element
        selectLayoutElement.addEventListener("change", function () {
          toggleFullscreen(this.value);
        });

        selectLangElement.addEventListener("change", function () {
          changeLanguage(this.value);
        });
      });
    </script>
  </body>
</html>
