{% include 'plugins/music.snapcast/client.html' %}

<script type="text/x-template" id="tmpl-music-snapcast-group">
    <div class="group">
        <div class="head">
            <div class="col-10 name"
                 @click="bus.$emit('modal-show', {type:'group', group:id, host:server.name})">
                <i class="icon fa" :class="{'fa-play': stream.status === 'playing', 'fa-stop': stream.status !== 'playing'}"></i>
                {% raw %}{{  name || stream.id || id }}{% endraw %}
            </div>
            <div class="col-2 switch pull-right">
                <toggle-switch :glow="true" :value="!muted" @toggled="muteToggled"></toggle-switch>
            </div>
        </div>

        <music-snapcast-client
                v-for="client in clients"
                :key="client.id"
                :config="client.config"
                :connected="client.connected"
                :server="server"
                :host="client.host"
                :groupId="id"
                :id="client.id"
                :lastSeen="client.lastSeen"
                :bus="bus"
                :snapclient="client.snapclient">
        </music-snapcast-client>
    </div>
</script>

<script type="application/javascript" src="{{ url_for('static', filename='js/plugins/music.snapcast/group.js') }}"></script>

