<!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">
</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">
<thead>
<tr>
<th>#</th>
<th>File Name</th>
<th>Size</th>
</tr>
</thead>
<tbody>
{% if media_files %}
{% for file in media_files %}
<tr>
<td>{{ loop.index }}</td>
<td>
<div class="filename"><b>{{ file.name }}</b></div>
<div class="filepath">{{ file.path }}</div>
{% if file.info.video %}
<b>Container:</b>
<ul>
<li>Duration: {{ file.info.container.duration }}</li>
<li>Bitrate: {{ file.info.container.bitrate }}</li>
<li>Size: {{ file.info.container.size }}</li>
</ul>
<ul>
{% for video in file.info.video %}
<li>Resolution: {{ video.resolution }}, Bitrate: {{ video.bitrate }} Kbit/s, Codec: {{ video.codec }}</li>
{% endfor %}
</ul>
{% endif %}
{% if file.info.audio %}
<ul>
{% for audio in file.info.audio %}
<li>Audio: {{ audio.layout }}, Bitrate: {{ audio.bitrate }} Kbit/s, Codec: {{ audio.codec }}, Language: {{ audio.language }}</li>
{% endfor %}
</ul>
{% endif %}
</td>
<td>{{ file.size }}</td>
</tr>
{% endfor %}
{% else %}
<tr>
<td colspan="3" class="text-center">No files found in the configured directories.</td>
</tr>
{% endif %}
</tbody>
</table>
</div>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
$('.table').DataTable();
});
</script>
</body>
</html>
