{% include "partials/head.html" %}

<div class="container mt-4">
    <h1 class="mb-4">Media Library Manager</h1>
    <div class="control-panel">
        <a href="/configure" class="btn btn-primary mb-4">Configure Directories</a>
        <button id="do-rescan-media-lib" class="btn btn-warning mb-4">Rescan Library</button>
    </div>
    
    <div class="loading-spinner-container d-none">
        <span class="loader"></span>
    </div>

    <table class="table table-striped d-none" id="media-table">
        <thead>
            <tr>
                <th>#</th>
                <th>File</th>
                <th>Size</th>
            </tr>
        </thead>
        <tbody>
            <!-- Data will be loaded dynamically -->
        </tbody>
    </table>
</div>

{% include "partials/footer.html" %}