<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mctl</title>
<link rel="icon" type="image/webp" href="/static/images/favicon mctl.webp">
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="/static/css/main.css">
<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="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
<script src="/static/js/utils.js" defer></script>
<script src="/static/js/lib.js" defer></script>
<script src="/static/js/components/progress-bar-line.js" defer></script>
<script src="/static/js/index.js" defer></script>
</head>
<body>
<div class="container mb-2 mt-2">
<div class="row">
<div class="col-12 d-flex align-items-center gap-2">
<a href="/" class="nav-brand">
<img src="/static/images/logo mctl mini.webp" alt="mctl" class="nav-logo">
</a>
<div class="ms-auto d-flex align-items-center gap-2">
<a href="/audio-tracks" class="btn btn-outline-secondary nav-icon-btn" title="audio tracks library">
<i class="bi bi-music-note-list"></i>
</a>
<a href="/originals" class="btn btn-outline-secondary nav-icon-btn" title="backups">
<i class="bi bi-archive"></i>
</a>
<a href="/configure" class="btn btn-outline-secondary nav-icon-btn" title="configure">
<i class="bi bi-gear"></i>
</a>
<button class="btn btn-outline-secondary open-transcoding-tasks" data-bs-toggle="offcanvas" data-bs-target="#global-transcoding-tasks" title="transcoding tasks">
<i class="bi bi-cpu"></i>
<span class="total-tasks"></span>
</button>
<button class="btn btn-outline-secondary nav-icon-btn open-notifications" data-bs-toggle="offcanvas" data-bs-target="#notifications-center" title="notifications">
<i class="bi bi-bell"></i>
<span class="notif-badge"></span>
</button>
<div class="nav-user-divider"></div>
<span class="nav-username">{{ session.username }}</span>
<a href="/logout" class="btn btn-outline-secondary nav-icon-btn" title="logout">
<i class="bi bi-box-arrow-right"></i>
</a>
</div>
</div>
</div>
</div>
{% include "components/global-transcoding-tasks.html" %}
{% include "components/errors-center.html" %}
{% include "components/notifications-center.html" %}
