| 1 |
{%- import "partials/_ui.html" as ui -%} |
| 2 |
<div id="placement-list"> |
| 3 |
<h3 class="placement-list-heading">Dynamic Clips</h3> |
| 4 |
|
| 5 |
{% if placements.is_empty() && available_insertions.is_empty() %} |
| 6 |
{% call ui::empty_state("", "No clips available. Upload clips in your dashboard first.") %}{% endcall %} |
| 7 |
{% else %} |
| 8 |
|
| 9 |
{% if !placements.is_empty() %} |
| 10 |
<table class="data-table placement-list-table well"> |
| 11 |
<thead> |
| 12 |
<tr> |
| 13 |
<th>Clip</th> |
| 14 |
<th>Position</th> |
| 15 |
<th>Offset</th> |
| 16 |
<th class="placement-list-th-actions">Actions</th> |
| 17 |
</tr> |
| 18 |
</thead> |
| 19 |
<tbody> |
| 20 |
{% for p in placements %} |
| 21 |
<tr> |
| 22 |
<td>{{ p.insertion_title }}</td> |
| 23 |
<td>{{ p.position }}</td> |
| 24 |
<td>{% if let Some(offset) = p.offset_display %}{{ offset }}{% else %}-{% endif %}</td> |
| 25 |
<td class="placement-list-actions"> |
| 26 |
{{ crate::quasi::clip_acts::remove_html(p.id)|safe }} |
| 27 |
</td> |
| 28 |
</tr> |
| 29 |
{% endfor %} |
| 30 |
</tbody> |
| 31 |
</table> |
| 32 |
{% endif %} |
| 33 |
|
| 34 |
{% if !available_insertions.is_empty() %} |
| 35 |
<form id="add-placement-form" class="placement-list-form"> |
| 36 |
<div> |
| 37 |
<label class="placement-list-label">Clip</label> |
| 38 |
<select name="insertion_id" id="placement-insertion-id" class="placement-list-select input--sm" required> |
| 39 |
{% for ins in available_insertions %} |
| 40 |
<option value="{{ ins.id }}">{{ ins.title }} ({{ ins.duration_display }})</option> |
| 41 |
{% endfor %} |
| 42 |
</select> |
| 43 |
</div> |
| 44 |
<div> |
| 45 |
<label class="placement-list-label">Position</label> |
| 46 |
<select name="position" id="placement-position" class="placement-list-select input--sm" required data-change="onPlacementPositionChange"> |
| 47 |
<option value="pre_roll">Pre-roll</option> |
| 48 |
<option value="mid_roll">Mid-roll</option> |
| 49 |
<option value="post_roll">Post-roll</option> |
| 50 |
</select> |
| 51 |
</div> |
| 52 |
<div id="offset-input-group" class="hidden"> |
| 53 |
<label class="placement-list-label">Offset (seconds)</label> |
| 54 |
<input type="number" name="offset_seconds" id="placement-offset" class="placement-list-input input--sm w-100" min="0" step="1"> |
| 55 |
</div> |
| 56 |
<button type="button" class="btn btn-sm placement-list-add" data-action="onAddPlacement" data-arg="{{ item_id }}">Add</button> |
| 57 |
</form> |
| 58 |
{% endif %} |
| 59 |
|
| 60 |
{% endif %} |
| 61 |
</div> |
| 62 |
|