MusareMeteor/app/templates/admin.html

<template name="admin">
    {{> header}}
    <div class="landing row">
        {{#each queues}}
            <div class="col-md-8 col-md-offset-2 admin-queue-panel">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title">{{type}} review queue</h3>
                    </div>
                    <div class="panel-body">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>Title</th>
                                    <th>Artist(s)</th>
                                    <th>Type</th>
                                    <th>Id</th>
                                    <th>Img</th>
                                    <th>Preview</th>
                                    <th>Add</th>
                                    <th colspan="10">Remove</th>
                                </tr>
                            </thead>
                            <tbody>
                                {{#each songs}}
                                    <tr>
                                        <th scope="row">{{title}}</th>
                                        <td>{{artist}}</td>
                                        <td>{{type}}</td>
                                        <td>{{id}}</td>
                                        <td>{{img}}</td>
                                        <td class="column-small"><button class="btn btn-primary preview-button" data-toggle="modal" data-target="#previewModal">Preview</button></td>
                                        <td class="column-small"><button class="btn btn-success" id="add-song-button" data-genre="{{../type}}"><i class="fa fa-check-circle"></i></button></td>
                                        <td class="column-small"><button class="btn btn-danger" id="deny-song-button" data-genre="{{../type}}"><i class="fa fa-ban"></i></button></td>
                                    </tr>
                                {{/each}}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        {{/each}}

        <div class="col-md-4 col-md-offset-4">
            <div id="croom_container">
                <label for="croom" id="croom_label">Room Name:</label>
                <div class="input-group">
                    <input type="text" id="croom" name="croom" required />
                </div>
                <button class="btn btn-warning btn-block" id="croom_create">Create</button>
            </div>
        </div>

        <div id="previewModal" class="modal fade" role="dialog">
            <div class="modal-dialog">
                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Preview</h4>
                    </div>
                    <div class="modal-body">
                        <div width="960" height="540" id="previewPlayer"></div>
                        <button id="play" class="btn btn-success"><i class="fa fa-play"></i></button>
                        <button id="stop" class="btn btn-danger" disabled><i class="fa fa-stop"></i></button>
                    </div>
                    <div class="modal-footer">
                        <button id="close-modal" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

        <ul class="bg-bubbles">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</template>