<!-- <!DOCTYPE html> -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=596, initial-scale=0, minimum-scale=0.62">
<link rel="stylesheet" href="../static/css/upload.css">
<link rel="stylesheet" href="../static/css/progress.css">
<script src="../static/js/htmx.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<title>Flask Test</title>
</head>
<nav>
<a href="/">HOME</a>
<a href="upload">UPLOAD</a>
<a href="gallery">GALLERY</a>
<a href="login">LOGIN</a>
<a href="logout">LOGOUT</a>
<div id="indicator"></div>
</nav>
<body>
<form id="uploader" hx-post="/upload" hx-swap="innerHTML" hx-encoding="multipart/form-data">
<input type = "file" name = "myfile" accept = "*">
<button type="submit" class="relative top-2 left-10 cursor-pointer transition-all bg-blue-500 text-white px-6 py-2 rounded-lg
border-blue-600 border-b-[4px] hover:brightness-110 hover:-translate-y-[1px] hover:border-b-[6px]
active:border-b-[2px] active:brightness-90 active:translate-y-[2px]">SUBMIT</button>
<div id="progressdiv">
<progress id="progress_load" value="0" max="100"></progress>
</div>
</form>
<script>
htmx.on('#uploader', 'htmx:xhr:progress', function(event){
htmx.find('#progress_load').setAttribute('value', event.detail.loaded/event.detail.total * 100)
});
</script>
</body>
</html>