<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./index.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="module" src="./index.js" defer></script>
<title>File Browser</title>
</head>
<body class="h-screen max-h-screen flex flex-col overflow-hidden">
<header class="bg-amber-500 w-screen h-12 flex items-center justify-between">
<span class="flex gap-2">
<button data-ui="up-one-dir">Back</button>
</span>
<span class="flex">
<div data-ui="breadcrumbs" class="flex gap-0 before:content-['/']"></div>
<button>Search</button>
</span>
<span class="flex">
<button data-ui="view-list">List</button>
<button data-ui="view-panel">Panel</button>
<button data-ui="view-column">Column</button>
</span>
</header>
<div class="h-full flex">
<dialog data-ui="favourite-dialog" class="flex flex-col gap-2 bg-green-500 backdrop-blur-lg mt-16 w-44">
<input type="text" aria-label="Name" data-ui="favourite-name" />
<input type="text" aria-label="Path" data-ui="favourite-path" />
<div class="w-44 flex">
<button data-ui="favourite-submit" class="bg-white w-1/2">Add</button>
<button data-ui="favourite-close" class="bg-white w-1/2">Close</button>
</div>
</dialog>
<menu class="bg-blue-500 h-full min-w-[250px] flex flex-col" data-ui="favourites">
<li class="order-last">
<button data-ui="add-favourite">+ Add favourite</button>
</li>
</menu>
<main class="bg-red-500 h-full w-full" data-ui="files"></main>
</div>
<template data-template="favourites">
<li data-el="added" class="h-8 flex">
<button data-el="action" class="w-full text-left"></button>
<button data-el="remove" class="w-8">x</button>
</li>
</template>
<template data-template="breadcrumbs">
<button data-el="action" class="after:content-['/']"></button>
</template>
<template data-template="files-list">
<div class="w-full h-full overflow-y-scroll">
<table class="w-full">
<thead>
<tr class="sticky top-0 bg-red-500">
<th>Name</th>
<th>Size</th>
<th>Permissions</th>
<th>Modified</th>
</tr>
</thead>
<tbody data-el="body"></tbody>
</table>
</div>
</template>
<template data-template="files-list-item">
<tr data-el="action">
<td data-el="name"></td>
<td data-el="size"></td>
<td data-el="permission"></td>
<td data-el="modified"></td>
</tr>
</template>
<template data-template="files-panel">
</template>
<template data-template="files-panel-item">
</template>
<template data-template="files-column">
</template>
<template data-template="files-column-item">
</template>
</body>
</html>