<div class="offcanvas offcanvas-end transcoding-offcanvas" tabindex="-1" id="global-transcoding-tasks" aria-labelledby="transcodingTasksLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="transcodingTasksLabel">// transcoding tasks</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body p-0 d-flex flex-column">
        <div class="transcoding-toolbar d-flex align-items-center px-4 py-2">
            <span class="transcoding-toolbar-count">active: <span class="total-tasks">0</span></span>
        </div>
        <div class="transcoding-tasks-container flex-grow-1 overflow-auto">
            <ul class="list-group list-group-flush"></ul>
            <p class="text-muted text-center py-4 mb-0 empty-tasks-message">No active transcoding tasks</p>
        </div>
    </div>
</div>

<script src="/static/js/components/global-transcoding-tasks.js"></script>