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

<script type="text/x-template" id="tmpl-music-snapcast">
    <div class="row plugin music-snapcast-container">
        <modal id="music-snapcast-host-info" title="Server info" v-model="modal.host.visible" ref="modalHost">
            {% include 'plugins/music.snapcast/modals/host.html' %}
        </modal>

        <modal id="music-snapcast-group-info" title="Group info" v-if="modal.group.visible" v-model="modal.group.visible" ref="modalGroup">
            {% include 'plugins/music.snapcast/modals/group.html' %}
        </modal>

        <modal id="music-snapcast-client-info" title="Client info" v-if="modal.client.visible" v-model="modal.client.visible" ref="modalClient">
            {% include 'plugins/music.snapcast/modals/client.html' %}
        </modal>

        <music-snapcast-host
            v-for="host in hosts"
            :key="host.server.host.name"
            :server="host.server"
            :streams="host.streams"
            :groups="host.groups"
            :bus="bus">
        </music-snapcast-host>
    </div>
</script>