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

<br>

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

    <a-player ref="player"
            :live-args="{% player_live_attr %}"
            :playlists="{pin: ['{% translate "Bookmarks" %}', 'fa fa-star'], queue: ['{% translate 'Playlist' %}', 'fa fa-list']}"
            button-title="{% translate "Play or pause audio" %}">
        <template v-slot:content="{ loaded, live, current }">
            <h4 v-if="loaded" class="title">
                <a v-if="current?.data?.page_url" :href="current.data.page_url">
                    [[ loaded.name ]]
                </a>
                <template v-else>[[ loaded.name ]]</template>
            </h4>
            <h4 v-else-if="current && current.data.type == 'track'"
                class="title" aria-description="{% translate "Track currently on air" %}">
                <span class="icon secondary-color mr-3">
                    <i class="fas fa-music"></i>
                </span>
                <span>[[ current.data.title ]]</span>
                <span class="has-text-grey-dark has-text-weight-light">
                &mdash; [[ current.data.artist ]]
                <i v-if="current.data.info">([[ current.data.info ]])</i>
                </span>
            </h4>
            <h4 v-else-if="live && current && current.data.type == 'diffusion'"
                class="title"
                aria-description="{% translate "Diffusion currently on air" %}">
                    <a :href="current.data.url" v-if="current.data.url">[[ current.data.title ]]</a>
                    <template v-else>[[ current.data.title ]]</template>
                </h4>
            <h4 v-else class="title is-4" aria-description="{% translate "Currently playing" %}">
                {{ request.station.name }}
            </h4>
        </template>
    </a-player>
</div>