<head>
  <title>{{title}}</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

</head>

<body>

  <style>

  body {
    background-image: url("bg/{{bg_img}}");
    background-size: cover;
    background-position: center;
    font-family: {{font}};
    font-size: {{font_size}}px;
    color: {{font_color}};
  }

  table, th, td {
    border: 1px solid black;
  }

  .settings {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 14px;
  }

  option, select {
    width: 70px;
    font-family: {{font}};
    background: grey;
  }

  .container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .link-container {
    width: 300px;
    background: rgba(255, 255, 50, 0.11);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.26);
    padding: 20px;
  }

  .link {
    color: {{link_color}};
    text-decoration: none;
  }

  .link:hover {
    color: {{link_hover_color}};
    text-decoration: none;
  }

  </style>

  <div class='settings'>
     <select name="dropdown" id="dropdown">
        <option value="">set bg</option>
        {{bg_options}}
     </select>
  </div>
  <div class="container">
    <div class="link-container">
        {{links}}
      <br>
      <span style="font-size:14px">
        {{section_links}}
      </span><br>
    </div>
  </div>

  <script>

  function getCookie(cname) {
    let name = cname + "=";
    let decodedCookie = decodeURIComponent(document.cookie);
    let ca = decodedCookie.split(';');
    for(let i = 0; i <ca.length; i++) {
      let c = ca[i];
      while (c.charAt(0) == ' ') {
        c = c.substring(1);
      }
      if (c.indexOf(name) == 0) {
        return c.substring(name.length, c.length);
      }
    }
    return "";
  }

  var bg = getCookie("bg")
  console.log(bg)
  if (bg != "" && bg != 'undefined') {
    changeWallpaper(bg)
  }

  function changeWallpaper(bg) {
    document.cookie = "bg=" + bg;
    var bg_map = {{bg_map}}

    document.body.style.backgroundImage = "url('bg/"+ bg_map[bg] +"')";
  }

  document.getElementById("dropdown").addEventListener("change", function () {
    if (this.value != "") {
      changeWallpaper(this.value);
    }
  });

  var key_map = {{key_map}}

  function toggleSection(section) {
    var sections = {{section_array}}
    for (let i = 0; i < sections.length; i++) {
      if (section == sections[i]) {
        document.getElementById(sections[i]).style.display = 'block';
      } else {
        document.getElementById(sections[i]).style.display = 'none';
      }
    }
  }

  document.onkeypress = function (e) {

    var section_map = {{section_map}}

    if (e.key in section_map) {
      toggleSection(section_map[e.key])
    } else {
      if (e.key in key_map) {
        window.location.href = key_map[e.key];
      }
    }
  };


  </script>

</body>

