{% load i18n aircox %}
{% comment %}
The audio player
{% endcomment %}

<br>

<div class="box is-fullwidth is-fixed-bottom is-paddingless player"
    role="{% trans "player" %}"
    aria-description="{% trans "Audio player used to listen to the radio and podcasts" %}">
    <noscript>
        <audio src="{{ audio_streams.0 }}" controls>
            {% for stream in audio_streams %}
            <source src="{{ stream }}" />
            {% endfor %}
        </audio>
        {# TODO: live infos #}
    </noscript>

    <a-player ref="player"
            :live-args="{url: '{% url "api:live" %}', timeout:10, src: {{ audio_streams|json }} || []}"
            button-title="{% trans "Play or pause audio" %}">
        <template v-slot:content="{ loaded, live }">
            <h4 v-if="loaded" class="title is-4">
                [[ loaded.name ]]
            </h4>
            <h4 v-else-if="live && live.current && live.current.data.type == 'track'"
                class="title is-4" aria-description="{% trans "Track currently on air" %}">
                <span class="has-text-info is-size-3">&#9836;</span>
                <span>[[ live.current.data.title ]]</span>
                <span class="has-text-grey-dark has-text-weight-light">
                &mdash; [[ live.current.data.artist ]]
                <i v-if="live.current.data.info">([[ live.current.data.info ]])</i>
                </span>
            </h4>
            <div v-else-if="live && live.current && live.current.data.type == 'diffusion'">
                <h4 class="title is-4" aria-description="{% trans "Diffusion currently on air" %}">
                    <a :href="live.current.data.url">[[ live.current.data.title ]]</a>
                </h4>
                <div class="">[[ live.current.data.info ]]</div>
            </div>
            <h4 v-else class="title is-4" aria-description="{% trans "Currently playing" %}">
                {{ station.name }}
            </h4>
        </template>

        </template>
    </a-player>
</div>

