<!DOCTYPE html>
<html lang="en">

## devicepage.html - The device page showing a device

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${deviceobj.devicename|h}</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<link rel="stylesheet" href="/static/w3.css">
<link rel="stylesheet" href="/static/w3-colors-flat.css">
<link rel="stylesheet" href="/static/indipyweb.css">
<script src="/static/htmx.min.js"></script>
<script src="/static/sse.js"></script>
<script src="/static/indipyweb.js"></script>

<body class="w3-flat-clouds">

  <header class="w3-container w3-flat-silver w3-block">
    <p class="w3-margin-right w3-left"><a href="/" class="w3-button w3-black w3-ripple w3-round w3-medium">Devices</a></p>
    % if loggedin:
      <p class="w3-right"><a href="/logout" class="w3-button w3-black w3-ripple w3-round w3-small w3-margin-right">Logout</a></p>
      <p class="w3-right"><a href="/edit" class="w3-button w3-black w3-ripple w3-round w3-small w3-margin-right">Edit</a></p>
    % else:
      <p class="w3-right"><a href="/login" class="w3-button w3-black w3-ripple w3-round w3-small w3-margin-right">Login</a></p>
    % endif
    <h3>Device - ${deviceobj.devicename|h}</h3>
  </header>

## create an SSE connection which send messages whenever there is a device message change
<div hx-ext="sse" sse-connect="/device/devicechange/${deviceobj.itemid|h}">

    ## Show the device messages panel

    <div class="w3-panel">
      <div class="w3-container w3-border">
        <div hx-get="/device/updatemessages/${deviceobj.itemid|h}" hx-trigger="sse:devicemessages">
           ## /device/updatemessages/... is called as devicemessages events are received, which then inserts messages.html here
           <div class="w3-margin">
              % if messages:
                % for message in messages:
                  <p>${message|h}</p>
                % endfor
              % else:
                <p>Device messages: Waiting..</p>
              % endif
           </div>
        </div>
      </div>
    </div>

    <div id="grouptabs">
      <%include file="group.html" args="deviceobj=deviceobj, groups=groups, selectedgp=group, vectors=vectors, loggedin=loggedin, blobfolder=blobfolder"/>
    </div>

</div>

</body>
</html>
