did some minor housekeeping in room.html

app/client/templates/room.html

@@ -1,237 +1,180 @@
 <template name="room">
-    {{#if loaded}}
-        <header>
-            <nav>
-                <div class="nav-wrapper teal accent-4">
-                    <ul class="left hide-on-med-and-down">
-                        <li><a href="/"><i class="material-icons">home</i></a></li>
-                        <li><a href="#add_song_modal" id="add-song-modal-button"><i class="material-icons">playlist_add</i></a></li>
-                        <li><a href="#bug_report_modal"><i class="material-icons">flag</i></a></li>
-                        <li><a id="vote-skip"><i class="material-icons left">skip_next</i>{{votes}}</a></li>
-                        {{#if isAdmin}}
-                            <li><a class='dropdown-button' data-activates='admin-dropdown'><i class="material-icons">control_point</i></a></li>
-                        {{/if}}
-                    </ul>
-                    <span class="brand-logo center">{{type}}</span>
-                    <ul class="right hide-on-med-and-down">
-                        <!-- <li><a href="#"><i class="material-icons">queue_music</i></a></li> -->
-                        <!-- <li><a href="#" data-activates="chat" class="dropdown-button"><i class="material-icons">chat</i></a></li> -->
-                        <li><a href="#" id="playlist-slideout" data-activates="playlist-slide-out" class="header-collapse"><i class="material-icons">queue_music</i></a></li>
-                        <li><a href="#" id="chat-slideout" data-activates="chat-slide-out" class="header-collapse"><i class="material-icons">chat</i></a></li>
-                    </ul>
-                    <div id='chat' class='dropdown-content right'>
-                        <ul id="chat-ul">
-                            {{#each chat}}
-                                {{#emojione}}
-                                    <li class="chat-message">
-                                        <small class="rank-{{this.rawrank}}">{{this.rank}}</small>
-                                        <a style="text-decoration: none" href="/u/{{this.username}}" target="_blank"><b
-                                                class="bold">{{this.username}}</b></a> <span title="{{time}}"
-                                                                                             style="float: right;">{{rtime time}}</span>
-                                        <br/>
-                                        {{#if this.isMentioned}}
-                                            {{#if this.curUserMention}}
-                                                <span style="background-color: lightblue">{{this.message}}</span>
-                                            {{else}}
-                                                {{this.message}}
-                                            {{/if}}
-                                        {{else}}
-                                            {{this.message}}
-                                        {{/if}}
-                                    </li>
-                                {{/emojione}}
-                                <hr>
-                            {{/each}}
-                        </ul>
-                        <div id="chat-input-div">
-                            {{#if currentUser}}
-                                <textarea id="chat-input" placeholder="Type a message..."></textarea>
-                            {{else}}
-                                <input id="chat-input" placeholder="Please register and login to chat." disabled>
-                            {{/if}}
-                            <div id="submit">
-                                <button class="btn btn-primary btn-block">Submit<i id="submit-message"
-                                                                                   class="fa fa-paper-plane-o"></i>
-                                </button>
-                            </div>
-                        </div>
+    <header>
+        <nav>
+            <div class="nav-wrapper teal accent-4">
+                <ul class="left hide-on-med-and-down">
+                    <li><a href="/"><i class="material-icons">home</i></a></li>
+                    <li><a href="#add_song_modal" id="add-song-modal-button"><i class="material-icons">playlist_add</i></a></li>
+                    <li><a href="#bug_report_modal"><i class="material-icons">flag</i></a></li>
+                    <li><a id="vote-skip"><i class="material-icons left">skip_next</i>{{votes}}</a></li>
+                    {{#if isAdmin}}
+                        <li><a class='dropdown-button' data-activates='admin-dropdown'><i class="material-icons">control_point</i></a></li>
+                    {{/if}}
+                </ul>
+                <span class="brand-logo center">{{type}}</span>
+                <ul class="right hide-on-med-and-down">
+                    <li><a href="#" id="playlist-slideout" data-activates="playlist-slide-out" class="header-collapse"><i class="material-icons">queue_music</i></a></li>
+                    <li><a href="#" id="chat-slideout" data-activates="chat-slide-out" class="header-collapse"><i class="material-icons">chat</i></a></li>
+                </ul>
+            </div>
+        </nav>
+    </header>
+    {{> alerts}}
+    <main id="room-content">
+        <div class="container">
+            <div class="row">
+                <div class="col s12 m10 l8 offset-l2 offset-m1" id="media-container">
+                    <div class="video-container">
+                        <div id="player"></div>
                     </div>
                 </div>
-            </nav>
-        </header>
-        {{> alerts}}
-        <main id="room-content">
-            <div class="container">
-                <div class="row">
-                    <div class="col s12 m10 l8 offset-l2 offset-m1" id="media-container">
-                        <div class="video-container">
-                            <div id="player"></div>
-                        </div>
-                    </div>
-                    <div class="col s12 m10 l8 offset-l2 offset-m1">
-                        <div class="row">
-                            <div class="col s12 m12 l8">
-                                <h4 id="time-display"><span id="time-elapsed"></span> / <span id="time-total"></span></h4>
-                                <h3>{{{title}}}</h3>
-                                <h4 class="thin" style="margin-left: 0">{{{artist}}}</h4>
-                                <div class="row">
-                                    <form action="#" class="left col s4 m4 l4">
-                                        <p class="range-field" style="margin-top: 0">
-                                            <input type="range" id="volume_slider" min="0" max="100"/>
-                                        </p>
-                                    </form>
-                                    <div class="right col s4 m2 l2">
-                                        <ul>
-                                            <li id="like" class="left"><i id="thumbs_up"
-                                                                          class="material-icons {{liked}}">thumb_up</i>
-                                            </li>
-                                            <li id="dislike" class="right"><i id="thumbs_down"
-                                                                              class="material-icons {{disliked}}">thumb_down</i>
-                                            </li>
-                                        </ul>
-                                    </div>
-                                </div>
-                                <div class="seeker-bar-container white" id="preview-progress">
-                                    <div class="seeker-bar teal" style="width: 0%"></div>
+                <div class="col s12 m10 l8 offset-l2 offset-m1">
+                    <div class="row">
+                        <div class="col s12 m12 l8">
+                            <h4 id="time-display"><span id="time-elapsed"></span> / <span id="time-total"></span></h4>
+                            <h3>{{{title}}}</h3>
+                            <h4 class="thin" style="margin-left: 0">{{{artist}}}</h4>
+                            <div class="row">
+                                <form action="#" class="left col s4 m4 l4">
+                                    <p class="range-field" style="margin-top: 0">
+                                        <input type="range" id="volume_slider" min="0" max="100"/>
+                                    </p>
+                                </form>
+                                <div class="right col s4 m2 l2">
+                                    <ul>
+                                        <li id="like" class="left"><i id="thumbs_up"
+                                                                      class="material-icons {{liked}}">thumb_up</i>
+                                        </li>
+                                        <li id="dislike" class="right"><i id="thumbs_down"
+                                                                          class="material-icons {{disliked}}">thumb_down</i>
+                                        </li>
+                                    </ul>
                                 </div>
                             </div>
-                            <img alt="Not loading" class="responsive-img song-img col s12 m12 l4"
-                                 onError="this.src='http://static.boredpanda.com/blog/wp-content/uploads/2014/04/amazing-fox-photos-182.jpg'"
-                                 id="song-img" style="margin-top: 10px !important"/>
+                            <div class="seeker-bar-container white" id="preview-progress">
+                                <div class="seeker-bar teal" style="width: 0%"></div>
+                            </div>
                         </div>
+                        <img alt="Not loading" class="responsive-img song-img col s12 m12 l4"
+                             onError="this.src='http://static.boredpanda.com/blog/wp-content/uploads/2014/04/amazing-fox-photos-182.jpg'"
+                             id="song-img" style="margin-top: 10px !important"/>
                     </div>
                 </div>
             </div>
-            <div id="add_song_modal" class="modal">
-                <div class="modal-content container">
+        </div>
+    </main>
+    <!--Chat slideout-->
+    <div id="chat-slide-out" class="side-nav room-slideout">
+        <h5>Chat</h5>
+        <ul class="chat-ul">
+            {{#each globalChat}}
+                {{#emojione}}
+                    <li class="chat-message">
+                        <span title="{{time}}" style="float: right;">{{rtime time}}</span>
+                        <small class="rank-{{this.rawrank}}">{{this.rank}}</small>
+                        <a style="text-decoration: none" href="/u/{{this.username}}" target="_blank">{{this.username}}</a>
+                        <p style="clear: both; line-height: initial;">{{this.message}}</p>
+                    </li>
+                {{/emojione}}
+                <hr>
+            {{/each}}
+        </ul>
+        <div>
+            <div class="row">
+                <div class="input-field col s12">
+                  <input id="chat-message" type="text">
+                  <label for="chat-message">Send a message</label>
+                </div>
+            </div>
+            <a id="submit" class="waves-effect waves-light btn">Send</a>
+        </div>
+    </div>
+    <!--Playlist slideout-->
+    <div id="playlist-slide-out" class="side-nav room-slideout">
+        <h5>Playlist</h5>
+    </div>
+    <!--Admin room controls-->
+    <ul id='admin-dropdown' style="background-color: #00bfa5 !important; display: none">
+        <li><a id="pause"><i class="material-icons">pause</i></a></li>
+        <li><a id="skip"><i class="material-icons">skip_next</i></a></li>
+        <li><a id="shuffle"><i class="material-icons">shuffle</i></a></li>
+        <li><a id="lock"><i class="material-icons">lock_outline</i></a></li>
+    </ul>
+    <!--Add song modal-->
+    <div id="add_song_modal" class="modal">
+        <div class="modal-content container">
+            <div class="row">
+                <form class="black-text" id="search-info">
                     <div class="row">
-                        <form class="black-text" id="search-info">
+                        <div class="input-field">
+                            <select id="si_or_pl">
+                                <option value="singleVideo" selected>Single Song</option>
+                                <option value="importPlaylist">Import Playlist</option>
+                                <label>Import Type</label>
+                            </select>
+                        </div>
+                    </div>
+                    {{#if singleVideo}}
+                        {{#if editingSong}}
                             <div class="row">
-                                <div class="input-field">
-                                    <select id="si_or_pl">
-                                        <option value="singleVideo" selected>Single Song</option>
-                                        <option value="importPlaylist">Import Playlist</option>
-                                        <label>Import Type</label>
+                                <button type="button" id="return-button" style="margin-bottom: 20px;"
+                                        class="btn btn-small col l4 m4 s8 offset-l4 offset-m4 offset-s2 center waves-effect waves-light">
+                                    Return
+                                </button>
+                                <h4 class="center-align col l12 m12 s12">Add Song</h4>
+                                <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
+                                    <select multiple id="genres">
+                                        <option value="" disabled selected>Select Genre(s):</option>
+                                        <option value="edm">EDM</option>
+                                        <option value="chill">Chill</option>
+                                        <option value="pop">Pop</option>
+                                        <option value="country">Country</option>
+                                        <option value="rock">Rock</option>
+                                        <option value="randb">R&B</option>
+                                        <option value="rap">Rap</option>
+                                        <option value="heavymetal">Heavy Metal</option>
+                                        <option value="christmas">Christmas</option>
+                                        <option value="alternative">Alternative</option>
                                     </select>
+                                    <label class="white-text">Genre(s)</label>
                                 </div>
+                                <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
+                                    <i class="material-icons prefix">vpn_key</i>
+                                    <label for="id" class="teal-text">Song ID</label>
+                                    <input class="validate" name="id" id="id" type="text" pattern=".{11}"/>
+                                </div>
+                                <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
+                                    <i class="material-icons prefix">person</i>
+                                    <label for="artist" class="teal-text">Song Artist</label>
+                                    <input class="validate" name="artist" id="artist" aria-required="true"
+                                           type="text"/>
+                                </div>
+                                <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
+                                    <i class="material-icons prefix">subject</i>
+                                    <label for="title" class="teal-text">Song Title</label>
+                                    <input class="validate required" name="title" id="title" type="text"/>
+                                </div>
+                                <button type="button" id="add-song-button"
+                                        class="btn btn-large col l6 m6 s10 offset-l3 offset-m3 offset-s1 waves-effect waves-light">
+                                    Add Song
+                                </button>
                             </div>
-                            {{#if singleVideo}}
-                                {{#if editingSong}}
-                                    <div class="row">
-                                        <button type="button" id="return-button" style="margin-bottom: 20px;"
-                                                class="btn btn-small col l4 m4 s8 offset-l4 offset-m4 offset-s2 center waves-effect waves-light">
-                                            Return
-                                        </button>
-                                        <h4 class="center-align col l12 m12 s12">Add Song</h4>
-                                        <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
-                                            <select multiple id="genres">
-                                                <option value="" disabled selected>Select Genre(s):</option>
-                                                <option value="edm">EDM</option>
-                                                <option value="chill">Chill</option>
-                                                <option value="pop">Pop</option>
-                                                <option value="country">Country</option>
-                                                <option value="rock">Rock</option>
-                                                <option value="randb">R&B</option>
-                                                <option value="rap">Rap</option>
-                                                <option value="heavymetal">Heavy Metal</option>
-                                                <option value="christmas">Christmas</option>
-                                                <option value="alternative">Alternative</option>
-                                            </select>
-                                            <label class="white-text">Genre(s)</label>
-                                        </div>
-                                        <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
-                                            <i class="material-icons prefix">vpn_key</i>
-                                            <label for="id" class="teal-text">Song ID</label>
-                                            <input class="validate" name="id" id="id" type="text" pattern=".{11}"/>
-                                        </div>
-                                        <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
-                                            <i class="material-icons prefix">person</i>
-                                            <label for="artist" class="teal-text">Song Artist</label>
-                                            <input class="validate" name="artist" id="artist" aria-required="true"
-                                                   type="text"/>
-                                        </div>
-                                        <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
-                                            <i class="material-icons prefix">subject</i>
-                                            <label for="title" class="teal-text">Song Title</label>
-                                            <input class="validate required" name="title" id="title" type="text"/>
-                                        </div>
-                                        <button type="button" id="add-song-button"
-                                                class="btn btn-large col l6 m6 s10 offset-l3 offset-m3 offset-s1 waves-effect waves-light">
-                                            Add Song
-                                        </button>
-                                    </div>
-                                    <script>
-                                        $('#genres').material_select();
-                                    </script>
-                                {{else}}
-                                    <div class="row" id="single-video">
-                                        <div class="input-field">
-                                            <input id="song-input" type="text" class="validate">
-                                            <label for="search_for_song">Search for song</label>
-                                        </div>
-                                        <a class="waves-effect waves-light btn" id="search-song"><i
-                                                class="material-icons left">search</i>Search</a>
-                                        {{#if singleVideoResultsActive}}
-                                            <div id="single-video-results">
-                                                <div style="overflow: auto; height: 30vh; margin-top: 1rem;">
-                                                    <ul class="collection teal-text">
-                                                        {{#each result in singleVideoResults}}
-                                                            <li class="collection-item avatar youtube-search-result-li">
-                                                                <img src="{{result.image}}"
-                                                                     onerror="this.src='http://static.boredpanda.com/blog/wp-content/uploads/2014/04/amazing-fox-photos-182.jpg'"
-                                                                     alt="" class="video-import-thumbnail">
-                                                                <span class="title video-import-text">{{result.title}}</span>
-                                                                <p class="video-import-text">{{result.artist}} <br>
-                                                                    <a href="https://youtube.com/watch?v={{result.id}}"
-                                                                       target="_blank">View Video In YouTube</a>
-                                                                </p>
-                                                                <a href="#" class="secondary-content" id="addSong"
-                                                                   data-result="{{result.id}}"><i class="material-icons"
-                                                                                                  data-result="{{result.id}}">add</i></a>
-                                                            </li>
-                                                        {{/each}}
-                                                    </ul>
-                                                </div>
-                                            </div>
-                                        {{/if}}
-                                    </div>
-                                {{/if}}
-                            {{else}}
-                                <div class="row" id="import-playlist">
-                                    <div class="input-field">
-                                        <input id="playlist-url" type="text" class="validate">
-                                        <label for="search_for_song">Playlist URL</label>
-                                    </div>
-                                    <div class="progress">
-                                        <div class="determinate" id="import-progress" style="width: 0%"></div>
-                                    </div>
-                                    <a class="waves-effect waves-light btn" id="import-playlist-button">Import
-                                        Playlist</a>
-                                    {{#if playlistImportVideosActive}}
-                                        <a class="waves-effect waves-light btn" id="confirm-import">Confirm selection
-                                            and add songs to queue</a>
-                                        <div class="input-field col l12 m12 s12">
-                                            <select multiple id="genres_pl">
-                                                <option value="" disabled selected>Select Genre(s):</option>
-                                                <option value="edm">EDM</option>
-                                                <option value="chill">Chill</option>
-                                                <option value="pop">Pop</option>
-                                                <option value="country">Country</option>
-                                                <option value="rock">Rock</option>
-                                                <option value="randb">R&B</option>
-                                                <option value="rap">Rap</option>
-                                                <option value="heavymetal">Heavy Metal</option>
-                                                <option value="christmas">Christmas</option>
-                                                <option value="alternative">Alternative</option>
-                                            </select>
-                                            <label class="white-text">Genre(s)</label>
-                                        </div>
-                                        <script>
-                                            $('#genres_pl').material_select();
-                                        </script>
-                                        <div id="import-playlist-results">
+                            <script>
+                                $('#genres').material_select();
+                            </script>
+                        {{else}}
+                            <div class="row" id="single-video">
+                                <div class="input-field">
+                                    <input id="song-input" type="text" class="validate">
+                                    <label for="search_for_song">Search for song</label>
+                                </div>
+                                <a class="waves-effect waves-light btn" id="search-song"><i
+                                        class="material-icons left">search</i>Search</a>
+                                {{#if singleVideoResultsActive}}
+                                    <div id="single-video-results">
+                                        <div style="overflow: auto; height: 30vh; margin-top: 1rem;">
                                             <ul class="collection teal-text">
-                                                {{#each result in importPlaylistVideos}}
+                                                {{#each result in singleVideoResults}}
                                                     <li class="collection-item avatar youtube-search-result-li">
                                                         <img src="{{result.image}}"
                                                              onerror="this.src='http://static.boredpanda.com/blog/wp-content/uploads/2014/04/amazing-fox-photos-182.jpg'"
@@ -241,111 +184,129 @@
                                                             <a href="https://youtube.com/watch?v={{result.id}}"
                                                                target="_blank">View Video In YouTube</a>
                                                         </p>
-                                                        <a href="#" class="secondary-content" id="removeSong"
+                                                        <a href="#" class="secondary-content" id="addSong"
                                                            data-result="{{result.id}}"><i class="material-icons"
-                                                                                          data-result="{{result.id}}">remove</i></a>
+                                                                                          data-result="{{result.id}}">add</i></a>
                                                     </li>
                                                 {{/each}}
                                             </ul>
                                         </div>
-                                    {{/if}}
+                                    </div>
+                                {{/if}}
+                            </div>
+                        {{/if}}
+                    {{else}}
+                        <div class="row" id="import-playlist">
+                            <div class="input-field">
+                                <input id="playlist-url" type="text" class="validate">
+                                <label for="search_for_song">Playlist URL</label>
+                            </div>
+                            <div class="progress">
+                                <div class="determinate" id="import-progress" style="width: 0%"></div>
+                            </div>
+                            <a class="waves-effect waves-light btn" id="import-playlist-button">Import
+                                Playlist</a>
+                            {{#if playlistImportVideosActive}}
+                                <a class="waves-effect waves-light btn" id="confirm-import">Confirm selection
+                                    and add songs to queue</a>
+                                <div class="input-field col l12 m12 s12">
+                                    <select multiple id="genres_pl">
+                                        <option value="" disabled selected>Select Genre(s):</option>
+                                        <option value="edm">EDM</option>
+                                        <option value="chill">Chill</option>
+                                        <option value="pop">Pop</option>
+                                        <option value="country">Country</option>
+                                        <option value="rock">Rock</option>
+                                        <option value="randb">R&B</option>
+                                        <option value="rap">Rap</option>
+                                        <option value="heavymetal">Heavy Metal</option>
+                                        <option value="christmas">Christmas</option>
+                                        <option value="alternative">Alternative</option>
+                                    </select>
+                                    <label class="white-text">Genre(s)</label>
+                                </div>
+                                <script>
+                                    $('#genres_pl').material_select();
+                                </script>
+                                <div id="import-playlist-results">
+                                    <ul class="collection teal-text">
+                                        {{#each result in importPlaylistVideos}}
+                                            <li class="collection-item avatar youtube-search-result-li">
+                                                <img src="{{result.image}}"
+                                                     onerror="this.src='http://static.boredpanda.com/blog/wp-content/uploads/2014/04/amazing-fox-photos-182.jpg'"
+                                                     alt="" class="video-import-thumbnail">
+                                                <span class="title video-import-text">{{result.title}}</span>
+                                                <p class="video-import-text">{{result.artist}} <br>
+                                                    <a href="https://youtube.com/watch?v={{result.id}}"
+                                                       target="_blank">View Video In YouTube</a>
+                                                </p>
+                                                <a href="#" class="secondary-content" id="removeSong"
+                                                   data-result="{{result.id}}"><i class="material-icons"
+                                                                                  data-result="{{result.id}}">remove</i></a>
+                                            </li>
+                                        {{/each}}
+                                    </ul>
                                 </div>
                             {{/if}}
-                        </form>
-                        <div id="song-results"></div>
-                    </div>
+                        </div>
+                    {{/if}}
+                </form>
+                <div id="song-results"></div>
+            </div>
+            <div class="row">
+                <form class="black-text hide" id="add-info">
                     <div class="row">
-                        <form class="black-text hide" id="add-info">
-                            <div class="row">
-                                <div class="input-field">
-                                    <input id="song-id" type="text" class="validate">
-                                    <label for="song-id">Song ID</label>
-                                </div>
-                            </div>
-                            <div class="row">
-                                <a class="waves-effect waves-light btn" id="add-song-button"><i
-                                        class="material-icons left">playlist_add</i>Request Song</a>
-                            </div>
-                        </form>
+                        <div class="input-field">
+                            <input id="song-id" type="text" class="validate">
+                            <label for="song-id">Song ID</label>
+                        </div>
                     </div>
-                </div>
-
-                <div class="divider"></div>
-                <div class="modal-footer">
-                    <a href="#" class="modal-action modal-close waves-effect btn">Close</a>
-                </div>
-            </div>
-
-            <div id="report_modal" class="modal">
-                <div class="modal-content container">
-
-                </div>
-                <div class="divider"></div>
-                <div class="modal-footer">
-                    <a href="#" class="modal-action modal-close waves-effect btn">Close</a>
-                </div>
-            </div>
-        </main>
-        <div id="chat-slide-out" class="side-nav room-slideout">
-            <h5>Chat</h5>
-            <ul class="chat-ul">
-                {{#each globalChat}}
-                    {{#emojione}}
-                        <li class="chat-message">
-                            <span title="{{time}}" style="float: right;">{{rtime time}}</span>
-                            <small class="rank-{{this.rawrank}}">{{this.rank}}</small>
-                            <a style="text-decoration: none" href="/u/{{this.username}}" target="_blank">{{this.username}}</a>
-                            <p style="clear: both; line-height: initial;">{{this.message}}</p>
-                        </li>
-                    {{/emojione}}
-                    <hr>
-                {{/each}}
-            </ul>
-            <div>
-                <div class="row">
-                    <div class="input-field col s12">
-                      <input id="chat-message" type="text">
-                      <label for="chat-message">Send a message</label>
+                    <div class="row">
+                        <a class="waves-effect waves-light btn" id="add-song-button"><i
+                                class="material-icons left">playlist_add</i>Request Song</a>
                     </div>
-                </div>
-                <a id="submit" class="waves-effect waves-light btn">Send</a>
+                </form>
             </div>
         </div>
-        <div id="playlist-slide-out" class="side-nav room-slideout">
-            <h5>Playlist</h5>
+        <div class="divider"></div>
+        <div class="modal-footer">
+            <a href="#" class="modal-action modal-close waves-effect btn">Close</a>
         </div>
-        <ul id='admin-dropdown' style="background-color: #00bfa5 !important; display: none">
-            <li><a id="pause"><i class="material-icons">pause</i></a></li>
-            <li><a id="skip"><i class="material-icons">skip_next</i></a></li>
-            <li><a id="shuffle"><i class="material-icons">shuffle</i></a></li>
-            <li><a id="lock"><i class="material-icons">lock_outline</i></a></li>
-        </ul>
-        <script>
-            $("#add-song-modal-button").leanModal({
-                dismissible: true,
-                opacity: .5,
-                in_duration: 500,
-                out_duration: 200
-            });
+    </div>
+    <!--Report modal-->
+    <div id="report_modal" class="modal">
+        <div class="modal-content container">
 
-            $("#report-modal-button").leanModal({
-                dismissible: true,
-                opacity: .5,
-                in_duration: 500,
-                out_duration: 200
-            });
-            $(".dropdown-button").dropdown({
-                belowOrigin: true
-            });
-            $('select').material_select();
-            $("#chat-slideout").sideNav({
-                menuWidth: 350,
-                edge: 'right'
-            });
-            $("#playlist-slideout").sideNav({
-                menuWidth: 350,
-                edge: 'right'
-            });
-        </script>
-    {{/if}}
+        </div>
+        <div class="divider"></div>
+        <div class="modal-footer">
+            <a class="modal-action modal-close waves-effect btn">Close</a>
+        </div>
+    </div>
+    <script>
+        $("#add-song-modal-button").leanModal({
+            dismissible: true,
+            opacity: .5,
+            in_duration: 500,
+            out_duration: 200
+        });
+        $("#report-modal-button").leanModal({
+            dismissible: true,
+            opacity: .5,
+            in_duration: 500,
+            out_duration: 200
+        });
+        $(".dropdown-button").dropdown({
+            belowOrigin: true
+        });
+        $('select').material_select();
+        $("#chat-slideout").sideNav({
+            menuWidth: 350,
+            edge: 'right'
+        });
+        $("#playlist-slideout").sideNav({
+            menuWidth: 350,
+            edge: 'right'
+        });
+    </script>
 </template>