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

    {% if placements.is_empty() && available_insertions.is_empty() %}
    {% call ui::empty_state("", "No clips available. Upload clips in your dashboard first.") %}
    {% else %}

    {% if !placements.is_empty() %}
    <table class="data-table placement-list-table">
        <thead>
            <tr>
                <th>Clip</th>
                <th>Position</th>
                <th>Offset</th>
                <th class="placement-list-th-actions">Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for p in placements %}
            <tr>
                <td>{{ p.insertion_title }}</td>
                <td>{{ p.position }}</td>
                <td>{% if let Some(offset) = p.offset_display %}{{ offset }}{% else %}-{% endif %}</td>
                <td class="placement-list-actions">
                    <button type="button" class="btn btn-xs btn-danger placement-list-remove"
                            hx-delete="/api/item-insertions/{{ p.id }}"
                            hx-target="#placement-list"
                            hx-swap="outerHTML">Remove</button>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% endif %}

    {% if !available_insertions.is_empty() %}
    <form id="add-placement-form" class="placement-list-form">
        <div>
            <label class="placement-list-label">Clip</label>
            <select name="insertion_id" id="placement-insertion-id" class="placement-list-select input--sm" required>
                {% for ins in available_insertions %}
                <option value="{{ ins.id }}">{{ ins.title }} ({{ ins.duration_display }})</option>
                {% endfor %}
            </select>
        </div>
        <div>
            <label class="placement-list-label">Position</label>
            <select name="position" id="placement-position" class="placement-list-select input--sm" required onchange="MNW.insertions.toggleOffsetInput(this.value)">
                <option value="pre_roll">Pre-roll</option>
                <option value="mid_roll">Mid-roll</option>
                <option value="post_roll">Post-roll</option>
            </select>
        </div>
        <div id="offset-input-group" class="hidden">
            <label class="placement-list-label">Offset (seconds)</label>
            <input type="number" name="offset_seconds" id="placement-offset" class="placement-list-input input--sm w-100" min="0" step="1">
        </div>
        <button type="button" class="btn btn-sm placement-list-add" onclick="MNW.insertions.addPlacement('{{ item_id }}')">Add</button>
    </form>
    {% endif %}

    {% endif %}
</div>