{% extends "admin/base_site.html" %}
{% comment %}Admin tools used to manage the streamer.{% endcomment %}
{% load i18n static %}

{% block init-scripts %}
aircox.init({apiUrl: "{% url "admin:api:streamer-list" %}"},
            {config: window.StreamerApp})
{% endblock %}

{% block content %}
{{ block.super }}
<div id="app">
    <a-streamer api-url="{% url "admin:api:streamer-list" %}">
    <template v-slot="{streamer,streamers,sources,fetchStreamers,Sound}">
        <div class="navbar toolbar">
            <div class="navbar-start">
                <span class="navbar-item control">
                    <button class="button">
                        <span class="icon is-small">
                            <span class="fas fa-sync"></span>
                        </span>
                        <span>{% trans "Reload" %}</span>
                    </button>
                </span>
            </div>
            <div class="navbar-end">
                <div class="select navbar-item">
                    <select onchange="selectStreamer" class="control"
                            title="{% trans "Select a station" %}"
                            aria-label="{% trans "Select a station" %}">
                        <option v-for="streamer of streamers" :value="streamer.id">[[ streamer.data.name ]]</option>
                    </select>
                </div>
            </div>
        </div>

        <div v-if="streamer">
            <template v-for="source in sources">
                {% include "aircox_streamer/source_item.html" %}
            </template>
        </div>
    </template>
    </a-streamer>
</div>
{% endblock %}