MusareMeteor/app/client/templates/playlist.html

<template name="playlist">
    <div class="input-field">
        <input type="text" id="search-playlist" style="padding-left: 10px;"/>
        <label for="search-playlist">Search playlist by song/artist</label>
    </div>
    <ul id="up-next">
        {{#each nextSong}}
            <p style="margin: -20px 0 0 15px; font-weight: 300;">Up Next</p>
            <li class="pl-item" style="color: rgb(3, 169, 244) !important;">
                <img onerror="this.src='/notes.png'" src={{img}} style="width: 80px; float: left; margin: 0 10px 10px 0;">
                <p style="float:right; margin-top: -20px;">{{formatTime duration}}</p>
                <p class="pl-title" style="font-size: 1.2em">{{title}}</p>
                <p id="pl-artist" style="margin-top: -20px; font-size: 0.7em">{{artist}}</p>
            </li>
        {{/each}}
        <hr style="clear: both">
    </ul>
    <ul id="playlist-ul" style="max-height: calc(100% - 240px); overflow-y: scroll;">
        {{#each playlist_songs}}
            <li class="pl-item" style="clear: both">
                <p style="float:right; margin-top: -20px;">{{formatTime duration}}</p>
                <p class="pl-title">{{title}}</p>
                <p id="pl-artist" style="margin-top: -10px">{{artist}}</p>
            </li>
        {{/each}}
    </ul>
</template>