<!DOCTYPE html>
<html lang="">
<head>
    <title> WAFL frontend </title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://unpkg.com/htmx.org@1.9.5"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <script type="text/javascript" src="/wafl.js"></script>
    <link rel="stylesheet" href="/wafl.css">
</head>
<body>
<div id="default-sidebar"
     class="shadow-lg fixed top-0 left-0 z-40 w-15 h-screen transition-transform -translate-x-full sm:translate-x-0"
     aria-label="Sidebar"
>
    <div id="ticker"
         hx-post="/{{conversation_id}}/check_new_messages"
         hx-swap="outerHTML"
         hx-target="#load_conversation"
         hx-trigger="every 1s"
    ></div>
    <div id="load_conversation"
         hx-post="/{{conversation_id}}/load_messages"
         hx-swap="gm"
         hx-target="#messages"
         hx-trigger="load"></div>
    <div class="h-full px-3 py-4 overflow-y-auto bg-gray-800">
        <ul class="space-y-2 font-medium">
            <li>
                <a title="Reset conversation"
                   hx-post="/{{conversation_id}}/reset_conversation"
                   hx-swap="innerHTML scroll:bottom"
                   hx-target="#messages"
                   class="flex items-center p-2 rounded-lg text-white hover:bg-gray-700 group">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                         stroke-width="1.5" stroke="currentColor" data-slot="icon" class="w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round"
                              d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"/>
                    </svg>
                </a>
            </li>
        </ul>
    </div>
</div>
<div id="screen" class="fixed top-0 left-20 margin-left-20">
    <div id="banner">
    </div>
    <pre id="messages" class="grid grid-flow-col">
    </pre>
    <input id="query" type="text"
           class='shadow-lg'
           name="query"
           placeholder="Type your query here"
           hx-post="/{{conversation_id}}/input"
           hx-swap="outerHTML"
           hx-target="#query"
           hx-trigger="keydown[!shiftKey&&keyCode==13]"
    >
</div>
</body>
</html>
