<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Library Manager</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.css">
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="/static/js/media.js" defer></script>
</head>
<body>
<div class="container mt-4">
<h1 class="mb-4">Media Library Manager</h1>
<a href="/configure" class="btn btn-primary mb-4">Configure Directories</a>
<table class="table table-striped" id="media-table">
<thead>
<tr>
<th>#</th>
<th>File</th>
<th>Size</th>
</tr>
</thead>
<tbody>
<!-- Data will be loaded dynamically -->
</tbody>
</table>
</div>
</body>
</html>