{% comment %}List item for a source.{% endcomment %}
{% load i18n %}

<section class="box"><div class="flex-row gap-3">

    <div class="flex-grow-1">
        <h5 class='title is-5' :class="{'has-text-danger': source.isPlaying, 'has-text-warning': source.isPaused}">
            <span>
                <span v-if="source.isPlaying" class="fas fa-play"></span>
                <span v-else-if="source.isPaused" class="fas fa-pause"></span>
            </span>
            [[ source.id ]]

            <small v-if="source.isPaused || source.isPlaying">([[ source.remainingString ]])</small>

            <a v-if="source.data.program !== undefined"
               :href="'{% url 'program-edit' "$$" %}'.replace('$$', source.data.program)"
               title="{% translate "Edit program" %}">
                <span class="icon">
                    <span class="fas fa-edit"></span>
                </span>
            </a>
        </h5>

        <table class="table bg-transparent">
            <tbody>
                <tr><th class="has-text-right ws-nowrap">
                    {% translate "Status" %}
                    </th>
                    <td :class="{'has-text-danger': source.isPlaying, 'has-text-warning': source.isPaused}">
                        <span v-if="source.isPlaying" class="fas fa-play"></span>
                        <span v-else-if="source.data.status" class="fas fa-pause"></span>
                        [[ source.data.status_verbose || "&mdash;" ]]
                    </td>
                </tr>
                <tr v-if="source.data.air_time">
                    <th class="has-text-right ws-nowrap">
                        {% translate "Air time" %}
                    </th><td>
                        <span class="far fa-clock"></span>
                        <time :datetime="source.date">
                        [[ source.data.air_time.toLocaleDateString() ]],
                        [[ source.data.air_time.toLocaleTimeString() ]]
                        </time>
                    </td>
                <tr v-if="source.remaining">
                    <th class="has-text-right ws-nowrap">
                        {% translate "Time left" %}
                    </th><td>
                        <span class="far fa-hourglass"></span>
                        [[ source.remainingString ]]
                    </td>
                </tr>
                <tr v-if="source.data.uri">
                    <th class="has-text-right ws-nowrap">
                        {% translate "Source" %}
                    </th><td>
                        <span class="far fa-play-circle"></span>
                        <template v-if="source.data.uri.length > 64">...</template>[[ (source.data.uri && source.data.uri.slice(-64)) || '&mdash;' ]]
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <div>
        <div>
            <button class="button smaller mr-2 mb-2" @click="source.restart()"
                    title="{% translate "Restart current track" %}">
                <span class="icon is-small">
                    <span class="fas fa-step-backward"></span>
                </span>
                <span>{% translate "Restart" %}</span>
            </button>
            <button class="button smaller mr-2 mb-2" @click="source.skip()"
                    title="{% translate "Skip current file" %}">
                <span>{% translate "Skip" %}</span>
                <span class="icon is-small">
                    <span class="fas fa-step-forward"></span>
                </span>
            </button>
            <button class="button smaller mr-2 mb-2" @click="source.sync()"
                    title="{% translate "Synchronize source with Liquidsoap" %}">
                <span class="icon is-small">
                    <span class="fas fa-sync"></span>
                </span>
                <span>{% translate "Synchronise" %}</span>
            </button>
        </div>

        <div v-if="source.isQueue">
            <hr>
            <h6 class="title is-6">{% translate "Add sound" %}</h6>
            <form @submit.prevent="source.push($event.target.elements['sound_id'].value); $event.target.reset()">
                <div class="field is-grouped">
                    {# TODO: select station => change the shit #}
                    <a-autocomplete class="control is-expanded"
                        url="{% url "aircox:sound-list" %}?station={{ station.pk }}&search=${query}"
                        name="sound_id" :model="Sound" value-field="id" label-field="name"
                        placeholder="{% translate "Select a sound" %}">
                            <template v-slot:item="{item}">
                                [[ item.data.name ]]
                                <span class="is-size-7 is-italic has-text-info">[[ item.data.file ]]</span>
                            </template>
                    </a-autocomplete>
                    <div class="control">
                        <button type="submit" class="button is-primary">
                            <span class="icon">
                                <span class="fas fa-plus"></span>
                            </span>
                            <span>{% translate "Add" %}</span>
                        </button>
                    </div>
                </div>
                <p class="help">
                {% translate "Add a sound to the queue (queue may start playing)" %}
                </p>
                {# TODO: help text about how it works #}
            </form>

            <div v-if="source.queue.length">
                <h6 class="title is-6 is-marginless">{% translate "Sounds in queue" %}</h6>
                <table class="table is-fullwidth"><tbody>
                    <tr v-for="[index, request] in source.queue.entries()">
                        <td :class="{'has-text-weight-semibold': index==0 }">
                            <span v-if="index==0" class="far fa-play-circle"></span>
                            <span>[[ request.data.uri ]]</span>
                        </td>
                    </tr>
                </tbody></table>
            </div>
        </div>
    </div>

</div></section>