<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Snek</title>
  <style>{{highlight_styles}}</style>
  <script src="/push.js"></script>
  <script src="/fancy-button.js"></script>
  <script src="/upload-button.js"></script>
  <script src="/generic-form.js"></script>
  <script src="/html-frame.js"></script>
  <script src="/schedule.js"></script>
  <script src="/app.js"></script>
  <link rel="stylesheet" href="/base.css">
  <link rel="manifest" href="/manifest.json" />
  <link rel="icon" type="image/png" href="/image/snek1.png" sizes="32x32">
</head>
<body>
  <header>
    <div class="no-select logo">Snek</div>
    <nav class="no-select">
      <a class="no-select" href="/web.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="/web.html">👥</a>
      <a class="no-select" href="#">⚙️</a>
      <a class="no-select" href="/logout.html">🔒</a>
    </nav>
  </header>
  <main>
    {% block sidebar %}
    <aside class="sidebar">
      <h2 class="no-select">Chat Rooms</h2>
      <ul>
        {% for channel in channels %}
        <li><a class="no-select" href="/channel/{{channel['uid']}}.html">{{channel['name']}}</a></li>
        {% endfor %}
      </ul>
    </aside>
    {% endblock %}
    {% block main %}
    <chat-window class="chat-area"></chat-window>
    {% endblock %}
  </main>
  <script>
let installPrompt = null 
        window.addEventListener("beforeinstallprompt", async(event) => {
            event.preventDefault();
            installPrompt = event;
            document.addEventListener("DOMContentLoaded", () => {
            alert("Jaaah") 
            const button = document.getElementById("install-button")
            button.addEventListener("click", async ()=>{  
            const result = await installPrompt.prompt()
            console.info(result.outcome)
            })
            button.style.display = 'inline-block'
            
            })
        });
        ;
    </script>
</body>
</html>
