{#
SPDX-FileCopyrightText: 2026 Martin Kirchgessner

SPDX-License-Identifier: AGPL-3.0-or-later
#}

{% extends 'layout.jinja' %}
{% block title %}Sounds in {{cart.title}}{% endblock title %}

{% from 'carts/macros.jinja' import sound_lines, cart_summary %}
{% set can_carts = current_user.user.can_carts() %}

{% macro add_button(cart_id) %}
<div class="file is-primary">
    <label class="file-label" for="addsound">
        <input id="addsound"
            type="file"
            class="file-input"
            name="sounds"
            multiple
            hx-post="{{ url_for('carts.add_sounds', cart_id=cart_id, from_list=True) }}"
            hx-encoding="multipart/form-data"
            hx-trigger="change"
            hx-disabled-elt="this"
            hx-indicator="next .htmx-indicator"
            hx-target="#soundsrows"
            hx-swap="beforeend show:window:bottom"
        >
        <span class="file-cta">
            {{ icon('📂') }}
            <span class="file-label">Add sounds</span>
            <span class="htmx-indicator" aria-label="loading"></span>
        </span>
    </label>
</div>
{% endmacro %}

{% block content %}
<section class="content">
<div class="container">
<h1>
    Sounds in {{cart.title}}
</h1>

<div class="level">
    <div class="level-left">
        <div class="level-item tag is-info is-large" role="note">
            {{ cart_summary(cart, swap=False) }}
        </div>
        {% if can_carts %}
            <div class="level-item">
                {{ add_button(cart.id) }}
            </div>
            <a
                class="button is-primary"
                href="{{ url_for('carts.edit_form', cart_id=cart.id, coming_from='sounds')}}"
                >
                Edit cart
            </a>
        {% endif %}
    </div>
</div>

<table class="table is-fullwidth is-striped is-hoverable" aria-label="Sounds list">
    <thead>
        <tr>
            {% if cart.mode != CartMode.RANDOM %}
                <th scope="col" class="has-text-centered">Rank</th>
            {% endif %}
            <th scope="col">Listen</th>
            <th scole="col">Duration</th>
            <th scope="col">Title</th>
            <th scope="col">Last played</th>
            <th scope="col">Uploaded by</th>
            <th scope="col" class="has-text-centered">Active</th>
            {% if can_carts %}
            <th scope="col" class="has-text-centered">Action</th>
            {% endif %}
        </tr>
    </thead>
    <tbody id="soundsrows"
        hx-post="{{ url_for('carts.sort_sounds', cart_id=cart.id) }}"
        hx-trigger="end"
        hx-include=".rankinputs"
        hx-sync="this:queue" {# queue ordering events when a request is in flight #}
        hx-swap="none" {# only swaps out of band <span id='rank-X'>  #}
        >
        {{ sound_lines(cart.sounds, next_id, cart.mode, can_carts) }}
    </tbody>
</table>

{% if can_carts %}
<div class="level">
    <div class="level-left">
        <div class="level-item">
            {{ add_button(cart.id) }}
        </div>
    </div>
</div>
{%endif %}

</div>
</section>
{% endblock content %}

{% block scripts %}
{% if can_carts %}
<script defer src="{{ url_for("static", filename="Sortable.min.js") }}"></script>
<script>
    sortableTableId = "soundsrows";

    document.addEventListener("DOMContentLoaded", function() {
        var sortable = document.getElementById("soundsrows");
        var sortableInstance = new Sortable(sortable, {
            animation: {{ transitions_delay_ms }},
            ghostClass: 'is-light',
            handle: ".draghandle",

            // Disable sorting on the `end` event
            onEnd: function (evt) {
                this.option("disabled", true);
            }
        });

        // Re-enable sorting on the `htmx:afterSwap` event
        document.getElementById("soundsrows").addEventListener("htmx:afterSwap", function() {
            sortableInstance.option("disabled", false);
        });
    });

    function createSpinner() {
        var spinner = document.createElement('span');
        spinner.ariaLabel = "Loading";
        spinner.className = 'htmx-indicator';
        return spinner;
    }

    function moveSound(event, going_up) {
        var button = event.target;
        var line = button.closest('tr');
        if (going_up) {
            var other = line.previousElementSibling;
        } else {
            var other = line.nextElementSibling;
        }
        if (other) {
            var spinner = createSpinner();
            button.before(spinner);
            button.remove();

            // move the line before sending the request, so Sortable will send values in the correct order
            if (going_up) {
                other.before(line);
            } else {
                other.after(line);
            }
            var table = document.getElementById(sortableTableId);
            htmx.trigger(table, "end");
            document.getElementById("soundsrows").addEventListener("htmx:beforeSwap", function() {
                spinner.before(button);
                spinner.remove();
            }, { once: true });
        }
    }

</script>
{% endif %}
{% endblock scripts %}
