{%- import "partials/_ui.html" as ui -%}
<div id="insertion-library">
    <h3 class="insertion-list-heading">Clips</h3>

    <div class="insertion-list-toolbar">
        <button type="button" class="btn btn-sm insertion-list-upload" onclick="MNW.insertions.startUpload()">Upload Clip</button>
        <input type="file" id="insertion-file-input" class="sr-only" accept=".mp3,.wav,.flac,.ogg,.m4a" onchange="MNW.insertions.handleFileSelected(this)">
    </div>

    {% if insertions.is_empty() %}
    {% call ui::empty_state("", "No clips yet. Upload an audio clip to use as a pre-roll, mid-roll, or post-roll on your items.") %}
    {% else %}
    <table class="data-table insertion-list-table">
        <thead>
            <tr>
                <th>Title</th>
                <th>Duration</th>
                <th>Type</th>
                <th>Created</th>
                <th class="insertion-list-th-actions">Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for ins in insertions %}
            <tr id="insertion-row-{{ ins.id }}">
                <td>{{ ins.title }}</td>
                <td>{{ ins.duration_display }}</td>
                <td>{{ ins.media_type }}</td>
                <td>{{ ins.created_at }}</td>
                <td class="insertion-list-actions">
                    <button type="button" class="btn btn-xs insertion-list-action-btn" onclick="MNW.insertions.rename('{{ ins.id }}', '{{ ins.title }}')">Rename</button>
                    <button type="button" class="btn btn-xs btn-danger insertion-list-action-btn"
                            hx-delete="/api/insertions/{{ ins.id }}"
                            hx-target="#insertion-library"
                            hx-swap="outerHTML"
                            hx-confirm="Delete this clip? It will be removed from all items using it.">Delete</button>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% endif %}
</div>