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

## blobs.html - The page showing a list of received BLOBs

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Received BLOBs</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>

% if admin:

<script>

  var evtdetail=null;

  document.addEventListener("htmx:confirm", function(e) {
    // The event is triggered on every trigger for a request, so we need to check if the element
    // that triggered the request has a confirm question set via the hx-confirm attribute,
    // if not we can return early and let the default behavior happen
    if (!e.detail.question) return

    // This will prevent the request from being issued to later manually issue it
    e.preventDefault()

    ## show the modal
    document.getElementById("modalconfirm").style.display = "block";

    evtdetail = e.detail;

    document.getElementById("modalconfirmtext").innerText = e.detail.question;

    ## set onclick to e.detail.issueRequest(true);
    document.getElementById("modalconfirmbutton").setAttribute('onclick','evtdetail.issueRequest(true)')
  })

</script>

% endif

<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>
    <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>
    <h3>Received BLOB Files</h3>
  </header>

<div class="w3-content" style="max-width:800px;margin-top:8vh">
<div class="w3-margin">

% if blobfiles:

  % if admin:

## modal confirm delete box

  <div id="modalconfirm" class="w3-modal">
    <div class="w3-modal-content w3-card-4">

      <header class="w3-container w3-flat-silver">
        <span onclick="document.getElementById('modalconfirm').style.display='none'"
        class="w3-button w3-display-topright">&times;</span>
        <h3>Delete BLOB</h3>
      </header>

      <div class="w3-container">
        <p id="modalconfirmtext"></p>
      </div>

      <footer class="w3-container w3-flat-silver w3-row">
        <div class="w3-container w3-half">
 <button onclick="document.getElementById('modalconfirm').style.display='none'" class="w3-button w3-black w3-ripple w3-round w3-margin" style="width:80%">Cancel</button>
        </div>
        <div class="w3-container w3-half">
 <button id="modalconfirmbutton" onclick="" class="w3-button w3-black w3-ripple w3-round w3-margin" style="width:80%">Delete BLOB File</button>
        </div>
      </footer>

    </div>
  </div>

## end of modal confirm box

   <p>Download File:</p>

   % for index,blob in enumerate(blobfiles):
      <div class="w3-row w3-margin">
        <div class="w3-container w3-twothird">
          <a href="/getblob/${blob|h}" class="w3-button w3-black w3-ripple w3-round w3-margin-right" style="width:100%;margin-top:5px;">${blob|h}</a>
        </div>
        <div class="w3-container w3-third">
<button hx-get="/delblob/${blob|h}" hx-confirm="Delete ${blob|h}, Are you sure?" class="w3-button w3-black w3-ripple w3-round w3-margin-right" style="margin-top:5px;">Delete</button>
        % if images[index]:
             <a href="/viewblob/${blob|h}" class="w3-button w3-black w3-ripple w3-round" style="margin-top:5px;">View</a>
        % endif
        </div>
      </div>
   % endfor

  % else:
   <p>Download File:</p>

   % for index,blob in enumerate(blobfiles):
      <div class="w3-row w3-margin">
        <div class="w3-container w3-threequarter">
          <a href="/getblob/${blob|h}" class="w3-button w3-black w3-ripple w3-round w3-margin-right" style="width:100%;margin-top:5px;">${blob|h}</a>
        </div>
        <div class="w3-container w3-quarter">
        % if images[index]:
            <a href="/viewblob/${blob|h}" class="w3-button w3-black w3-ripple w3-round" style="margin-top:5px;">View</a>
        % else:
            &nbsp;
        % endif
        </div>
      </div>
   % endfor

  % endif


% else:
   <p>No BLOBs received yet</p>
% endif

</div>
</div>

</body>
</html>
