<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>indipyweb</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">
<script src="/static/htmx.min.js"></script>
<script src="/static/sse.js"></script>

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

  <header class="w3-container w3-flat-silver w3-block">
    % 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>${hostname|h}</h3>
  </header>


<div class="w3-panel w3-row" hx-ext="sse" sse-connect="/instruments">
  <div class="w3-container w3-third">

    <div hx-get="/updateinstruments" hx-trigger="sse:newinstruments" hx-target=this>
      <p>No device available</p>
    </div>

  % if loggedin and blobfolder:
   <div class="w3-margin">
     <p>Download received BLOBs:</p>
     <div>
      <a href="/blobs" class="w3-button w3-black w3-ripple w3-round w3-margin" style="width:100%">BLOB Folder</a>
     </div>
   </div>
  % endif


  </div>
  <div class="w3-twothird">

    % if not loggedin:
     <div class="w3-container" style="margin-top:5vh; margin-left:20px; max-width:600px">
       <p>You have Read - Only access.  Login for read-write access.</p>
     </div>
    % endif

    <div class="w3-container w3-border" style="margin-top:5vh">

        <div hx-get="/updatemessages" hx-trigger="sse:newmessages">
         ## /updatemessages is called as soon as the sse-connect is made, and which then inserts messages.html here
        </div>

    </div>


   <div class="w3-container w3-flat-silver" style="margin-top:5vh; margin-left:20px; max-width:600px">
    <p>An api returning a JSON file showing the current state is available.</p>
    <p>call <strong>/api</strong> - returns the entire client state, including all devices</p>
    <p>call <strong>/api/&lt;devicename&gt;</strong> - returns the requested device state</p>
    <p>call <strong>/api/&lt;devicename&gt;/&lt;vectorname&gt;</strong> - returns the requested vector</p>
    <p>Note: BLOB values will not be included in the JSON responses</p>
   </div>

  </div>

</div>


</body>
</html>
