{#
SPDX-FileCopyrightText: 2026 Martin Kirchgessner

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

{% macro nowplayling(data, remaining) %}
<div class="hero is-fullheight-with-navbar {% if 5 >= remaining and remaining > 0 %}is-danger{% endif %}">
    <div class="hero-head level p-4">
        <div class="level-left">
            <span id="skipbutton" hx-preserve></span>
        </div>
        <div class="level-right">
            {# two separated spans because "date" is very stable, so reading time will be faster in screenreaders #}
            <span class="level-item is-size-1 is-family-monospace" role="timer" aria-label="date">
                {{ data.date }}
            </span>
            <span class="level-item is-size-1 is-family-monospace" role="timer" aria-label="time">
                {{ data.time }}
            </span>
        </div>
    </div>
    <div class="hero-body">
        <div class="container has-text-centered">
            <p class="title is-size-1" role="main">
            {{ data.artist }}
            {% if data.title and data.artist %}-{% endif %}
            {{ data.title }}
            </p>
            <p class="subtitle is-size-1">
                {% if data.source %}
                    [{{ data.source }}]
                {% endif %}
            </p>
        </div>
    </div>
    <div class="hero-foot level p-4">
        {% if data.elapsed%}
            <div class="level-left">
                <span class="level-item is-size-1 is-family-monospace" role="timer" aria-label="elapsed">
                    {{ duration_span(data.elapsed) }}
                </span>
            </div>
        {% endif %}
        {% if remaining %}
            <div class="level-right">
                <span class="level-item is-size-1 is-family-monospace" role="timer" aria-label="remaining">
                    -{{ duration_span(remaining) }}
                </span>
            </div>
        {% endif %}
    </div>
</div>
{% endmacro %}
