<div class="footer">
    <% if (user){ %>
    <select id="theme_select">
      <% for(const theme of dataset.themes){%>
      <option value="<%= theme.codename %>"><%= theme.name %></option>
      <% } %>
    </select>
    <script>
      const theme_select = document.getElementById("theme_select");
      theme_select.querySelector(`option[value=<%= user.theme.codename %>]`).selected = true;
      theme_select.addEventListener("change", async e => {
        const codename = e.target.value;
        await fetch('/api/users/<%= user.id %>', {
          method: 'PATCH',
          body: JSON.stringify({
            theme: {
              codename
            }
          }),
          headers: {
            "Content-Type": "application/json"
          }
        });
        const theme = await fetch("/api/themes/" + codename).then(res => res.json());
        const txt = "Theme changed to:\n" +
          "Name: " + theme.name + "\n" +
          "Description: " + theme.description + "\n" +
          "Author: " + theme.author + "\n";
        alert(txt);
        location.reload();
      });
    </script>
    <% } %>
  
    <a href="https://github.com/Akif9748/akf-forum" style="color: white;"> This website is powered by
      <span style="color: #ffbf00;">akf-forum</span>
    </a>
    <div>
      <span style="color:white">Coders</span> <br>
      <div style="text-align:center;">
        <a href="https://github.com/Akif9748/" style="color: #ffbf00;">Akif</a><br><a href="#" style="color:#ffbf00;">Tokmak</a>
      </div>
    </div>
  </div>