{% load static %}
{% load slippers %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>htmx demo</title>
    <link rel="icon" type="image/png" href="{% static "img/favicon.png" %}">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
    <meta name="author" content="Andros Fenollosa">
    <meta name="generator" content="Django">
    <meta name="description" content="Demo WebSockets over HTML with htmx">
    <meta property="og:type" content="website">
    {# Styles #}
    <link rel="stylesheet" type="text/css" href="{% static "css/normalize.css" %}">
    <link rel="stylesheet" type="text/css" href="{% static "css/nprogress.css" %}">
    <link rel="stylesheet" type="text/css" href="{% static "css/pico.min.css" %}">
    {# JavaScript #}
    <script src="{% static "js/nprogress.js" %}"></script>
    <script src="{% static "js/htmx.min.js" %}"></script>
    <script defer src="{% static "js/main.js" %}"></script>
</head>
<body>
    <div class="container" hx-ws="connect:ws:{{ DOMAIN }}/ws/pages/{{ room_random }}/">
        <header>
            <nav>
              <ul>
                <li><strong>HTML over WebSockets with htmx</strong></li>
              </ul>
              <ul>
                  <li>
                      {# To page Talks #}
                      {% #link action="page" value="talks" scroll-up="true" %}Talks{% /link %}
                  </li>
                  <li>
                      {# To page Profiles #}
                      {% #link action="page" value="profiles" scroll-up="true" %}Profiles{% /link %}
                  </li>
                  <li>
                      {# To page Chat #}
                      <a href="#" onclick="document.querySelector('#chat').classList.toggle('hidden')">Chat</a>
                  </li>
                  <li>
                      {# To page About #}
                      {% #link action="page" value="about" scroll-up="true" %}About{% /link %}
                  </li>
              </ul>
            </nav>
        </header>
        <main id="main"></main>
    </div>
    <section hx-ws="connect:ws:{{ DOMAIN }}/ws/chat/">
        <div id="chat" class="hidden"></div>
    </section>
</body>
</html>
