MusareMeteor/app/client/templates/home.html

<template name="home">
    {{> header}}
    <main>
        {{> alerts}}
            <div style="margin-left: 5%;margin-right: 5%;">
            <h3 class="center-align">Official Rooms</h3>
            <hr class="center-block" style="width: 99%">
            <div class="row">
                {{#each rooms}}
                    {{#if private}}
                        {{#if isModerator}}
                            <div class="col s12 m6 l3">
                                <div class="card hoverable red white-text">
                                    <div class="card-image waves-effect waves-block waves-light">
                                        <a href=/{{type}}>
                                        <img onerror="this.src='/notes.png'" src={{currentSong.song.img}} style="width: 100%; height: auto;">
                                        <figcaption class="caption center-align">
                                            <h5>{{currentSong.song.title}}</h5>
                                            <h5>{{currentSong.song.artist}}</h5>
                                        </figcaption>
                                        </a>
                                    </div>
                                    <div class="card-content">
                                        <span class="card-title white-text">{{display}}</span><div><span class="user-num">{{userNum}}</span> <i class="material-icons">perm_identity</i></div>
                                        <p>{{roomDesc}}</p>
                                    </div>
                                    <div class="card-action">
                                        <a href=/{{type}} class="white-text">Join Room</a>
                                    </div>
                                </div>
                            </div>
                        {{/if}}
                    {{else}}
                        <div class="col s12 m6 l3">
                            <div class="card hoverable">
                                <div class="card-image waves-effect waves-block waves-light">
                                    <a href=/{{type}}>
                                    <img onerror="this.src='/notes.png'" src={{currentSong.song.img}}>
                                    <figcaption class="caption center-align">
                                        <h5>{{currentSong.song.title}}</h5>
                                        <h5>{{currentSong.song.artist}}</h5>
                                    </figcaption>
                                    </a>
                                </div>
                                <div class="card-content">
                                    <span class="card-title grey-text text-darken-4">{{display}}</span><div><span class="user-num">{{userNum}}</span> <i class="material-icons">perm_identity</i></div>
                                    <p>{{roomDesc}}</p>
                                </div>
                                <div class="card-action">
                                    <a href=/{{type}} class="light-blue-text text-accent-4">Join Room</a>
                                </div>
                            </div>
                        </div>
                    {{/if}}
                {{/each}}
            </div>
            <h3 class="center-align">
                Private Rooms
                {{#if currentUser}}
                    <a href="#create_private_room" id="create_private_room_modal_button"><i class="material-icons">add</i></a>
                {{/if}}
            </h3>
            <hr class="center-block" style="width: 99%">
            <div class="row">
                {{#each privateRooms}}
                    {{#if private}}
                        {{#if isAllowedInPrivateRoom name}}
                            <div class="col s12 m6 l3">
                                <div class="card hoverable light-blue white-text">
                                    <div class="card-image waves-effect waves-block waves-light">
                                        <a href=/private/{{name}}>
                                        <img src='/notes.png'>
                                        <figcaption class="caption center-align">
                                            <h5>{{currentPrivateSong.song.title}}</h5>
                                        </figcaption>
                                        </a>
                                    </div>
                                    <div class="card-content" style="overflow-x: hidden;">
                                        <span class="card-title white-text">{{displayName}}</span><div><span class="user-num">{{userPrivateNum}}</span> <i class="material-icons">perm_identity</i></div>
                                        <p>{{roomDesc}}</p>
                                    </div>
                                    <div class="card-action">
                                        <a href=/private/{{name}} class="white-text">Join Room</a>
                                    </div>
                                </div>
                            </div>
                        {{/if}}
                    {{else}}
                        <div class="col s12 m6 l3">
                            <div class="card hoverable">
                                <div class="card-image waves-effect waves-block waves-light">
                                    <a href=/private/{{name}}>
                                        <img src='/notes.png'>
                                        <figcaption class="caption center-align">
                                            <h5>{{currentPrivateSong.song.title}}</h5>
                                        </figcaption>
                                    </a>
                                </div>
                                <div class="card-content">
                                    <span class="card-title grey-text text-darken-4">{{displayName}}</span><div><span class="user-num">{{userPrivateNum}}</span> <i class="material-icons">perm_identity</i></div>
                                    <p>{{roomDesc}}</p>
                                </div>
                                <div class="card-action">
                                    <a href=/private/{{name}} class="light-blue-text text-accent-4">Join Room</a>
                                </div>
                            </div>
                        </div>
                    {{/if}}
                {{/each}}
            </div>
            </div>
    </main>
    {{> footer}}

    <div id="create_private_room" class="modal">
        <div class="modal-content">
            <h4>Create Modal</h4>
            <div class="input-field">
                <input id="create_private_room_name" type="text">
                <label for="create_private_room_name">Name</label>
            </div>
            <div class="input-field">
                <input id="create_private_room_display_name" type="text">
                <label for="create_private_room_display_name">Display Name</label>
            </div>
            <div class="input-field">
                <input id="create_private_room_description" type="text">
                <label for="create_private_room_description">Description</label>
            </div>
            <button class="btn waves-effect waves-light" id="create_private_room_submit">Create</button>
        </div>
        <div class="divider"></div>
        <div class="modal-footer">
            <a class="modal-action modal-close waves-effect btn">Close</a>
        </div>
    </div>
    <script>
        $("#create_private_room_modal_button").leanModal({
            dismissible: true,
            opacity: .5,
            in_duration: 500,
            out_duration: 200
        });
    </script>
</template>