<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
    <link rel="manifest" href="/manifest.json" />
  <title>Snek</title>
  <style>{{highlight_styles}}</style>
  <link rel="stylesheet" href="/file-upload-grid.css">
  
  <script src="/njet.js" type="module"></script>
  <script src="/file-upload-grid.js" type="module"></script>
  <script src="/polyfills/Promise.withResolvers.js" type="module"></script>

  <script src="/push.js" type="module"></script>
  <script src="/fancy-button.js" type="module"></script>
  <script src="/upload-button.js" type="module"></script>
  <script src="/generic-form.js" type="module"></script>
  <script src="/html-frame.js" type="module"></script>
  <script src="/app.js" type="module"></script>
  <script src="/file-manager.js" type="module"></script>
  <script src="/user-list.js"></script>
  <script src="/message-list.js" type="module"></script>
  <script src="/chat-input.js" type="module"></script>
  <script src="/container.js" type="module"></script>
  <link rel="stylesheet" href="/sandbox.css">
  <link rel="stylesheet" href="/user-list.css">
  <link rel="stylesheet" href="/fa640.min.css">
  <link rel="stylesheet" href="/base.css">
  <link rel="icon" type="image/png" href="/image/snek_logo_32x32.png" sizes="32x32">
  <link rel="icon" type="image/png" href="/image/snek_logo_64x64.png" sizes="64x64">
<script defer src="https://umami.molodetz.nl/script.js" data-website-id="d127c3e4-dc70-4041-a1c8-bcc32c2492ea"></script>
</head>
<body>
  <header>
    <div class="logo no-select">{% block header_text %}{% endblock %}</div>
    <nav class="no-select" style="overflow:hidden;scroll-behavior:smooth">
      <a class="no-select" href="/web.html">🏠</a>
      <a class="no-select" href="/drive.html">📂</a>
      <a class="no-select" href="/search-user.html">🔍</a>
      <a class="no-select" style="display:none" id="install-button" href="#">📥</a>
      <a class="no-select" href="/threads.html">👥</a>
      <a class="no-select" href="/settings/index.html">⚙️</a>
      <a class="no-select" href="#" onclick="registerNotificationsServiceWorker()">✉️</a>
      <a class="no-select" href="/logout.html">🔒</a>
    </nav>

  </header>

    {% block sidebar %}
    {% include "sidebar_channels.html" %}
    {% endblock %}
<main>

    {% block main %}
    <chat-window class="chat-area"></chat-window>
    {% endblock %}
  </main>
  <script type="module">
      import { app } from "/app.js";
      import { Container } from "/container.js";
      let prevKey = null;
      document.addEventListener("keydown", () => {
        if(prevKey == "Escape"){
            document.querySelector("chat-input").querySelector("textarea").value = "";
        }  
        if(prevKey == "Escape" && event.key == "t"){
           app.starField.shuffleAll(5000) 

        }

        prevKey = event.key 
        if(event.key == "," && event.ctrlKey){
            event.preventDefault();
            let textAreas = document.querySelectorAll("textarea")
            textAreas.forEach(textArea => {
                if(document.activeElement != textArea)
                    setTimeout(() => textArea.focus(), 300)
            })
        }
      })
    
    {% if channel %}
      app.channelUid = '{{ channel.uid.value }}'

      window.getContainer = function(){
        return new Container(app.channelUid,false)
      }
        {% endif %}
let installPrompt = null 
        window.addEventListener("beforeinstallprompt", (e) => {
            //e.preventDefault();
            installPrompt = e;
            //document.addEventListener("DOMContentLoaded", () => {
            const button = document.getElementById("install-button")
            
            button.style.display = 'inline-block'
            
            button.addEventListener("click", async ()=>{  
                const result = await installPrompt.prompt()
            })

            
            })
    
        ;
    </script>
    {% include "sandbox.html" %}
</body>
</html>
