platypush/platypush/backend/http/templates/plugins/music.snapcast.html

<script type="text/javascript" src="{{ url_for('static', filename='js/music.snapcast.js') }}"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='css/music.snapcast.css') }}"></script>

<div id="snapcast-host-modal" class="modal snapcast-modal">
    <div class="modal-container">
        <div class="modal-header"></div>
        <div class="modal-body">
            <form id="snapcast-host-form" class="snapcast-form" action="#">
                <div class="row snapcast-host-info">
                    <div class="row">
                        <div class="three columns info-name">IP Address</div>
                        <div class="nine columns info-value" data-bind="ip"></div>
                    </div>

                    <div class="row">
                        <div class="three columns info-name">MAC Address</div>
                        <div class="nine columns info-value" data-bind="mac"></div>
                    </div>

                    <div class="row">
                        <div class="three columns info-name">Name</div>
                        <div class="nine columns info-value" data-bind="name"></div>
                    </div>

                    <div class="row">
                        <div class="three columns info-name">OS</div>
                        <div class="nine columns info-value" data-bind="os"></div>
                    </div>

                    <div class="row">
                        <div class="three columns info-name">Architecture</div>
                        <div class="nine columns info-value" data-bind="arch"></div>
                    </div>

                    <div class="row">
                        <div class="three columns info-name">Server Name</div>
                        <div class="nine columns info-value" data-bind="serverName"></div>
                    </div>

                    <div class="row">
                        <div class="three columns info-name">Server Version</div>
                        <div class="nine columns info-value" data-bind="serverVersion"></div>
                    </div>

                    <div class="row">
                        <div class="three columns info-name">Protocol Version</div>
                        <div class="nine columns info-value" data-bind="protocolVersion"></div>
                    </div>

                    <div class="row">
                        <div class="three columns info-name">Control Protocol Version</div>
                        <div class="nine columns info-value" data-bind="controlProtocolVersion"></div>
                    </div>
                </div>

                <div class="row snapcast-form-bottom">
                    <div class="six columns offset-by-six forms-btns">
                        <input type="button" class="btn-default" data-dismiss-modal="#snapcast-host-modal"
                            value="Close">
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<div id="snapcast-group-modal" class="modal snapcast-modal">
    <div class="modal-container">
        <div class="modal-header"></div>
        <div class="modal-body">
            <form id="snapcast-group-form" class="snapcast-form" action="#">
                <div class="row snapcast-group-clients-container">
                    <div class="row snapcast-group-clients"></div>
                </div>
                <div class="row snapcast-group-stream">
                    <select name="stream"></select>
                    <label for="stream">Stream</label>
                </div>
                <div class="row snapcast-form-bottom">
                    <div class="six columns offset-by-six forms-btns">
                        <input type="button" class="btn-default" data-dismiss-modal="#snapcast-group-modal"
                            value="Close">
                        <input type="submit" class="btn-primary" value="Save">
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<div id="snapcast-client-modal" class="modal snapcast-modal">
    <div class="modal-container">
        <div class="modal-header"></div>
        <div class="modal-body">
            <form id="snapcast-client-form" class="snapcast-form" action="#">
                <div class="row form-row">
                    <div class="two columns">
                        <label for="name">Name</label>
                    </div>
                    <div class="ten columns">
                        <input type="text" name="name">
                    </div>
                </div>

                <div class="row snapcast-client-info">
                    <div class="row">
                        <div class="three columns info-name">IP Address</div>
                        <div class="nine columns info-value" data-bind="ip"></div>
                    </div>

                    <div class="row">
                        <div class="three columns info-name">MAC Address</div>
                        <div class="nine columns info-value" data-bind="mac"></div>
                    </div>

                    <div class="row">
                        <div class="three columns info-name">OS</div>
                        <div class="nine columns info-value" data-bind="os"></div>
                    </div>

                    <div class="row">
                        <div class="three columns info-name">Architecture</div>
                        <div class="nine columns info-value" data-bind="arch"></div>
                    </div>

                    <div class="row">
                        <div class="three columns info-name">Client Name</div>
                        <div class="nine columns info-value" data-bind="clientName"></div>
                    </div>

                    <div class="row">
                        <div class="three columns info-name">Client Version</div>
                        <div class="nine columns info-value" data-bind="clientVersion"></div>
                    </div>

                    <div class="row">
                        <div class="three columns info-name">Protocol Version</div>
                        <div class="nine columns info-value" data-bind="protocolVersion"></div>
                    </div>
                </div>

                <div class="row snapcast-client-delete">
                    <input type="checkbox" name="delete">
                    <label for="delete">Delete client</label>
                </div>

                <div class="row snapcast-form-bottom">
                    <div class="six columns offset-by-six forms-btns">
                        <input type="button" class="btn-default" data-dismiss-modal="#snapcast-client-modal"
                            value="Close">
                        <input type="submit" class="btn-primary" value="Save">
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<div id="snapcast-container" class="row">
</div>