add simple layout

client/views/radios/radio.html

@@ -1,3 +1,35 @@
 <template name="radio">
-  Radio
+  <div class="row">
+    <div class="col-md-8">
+      {{> searchBar viewToggle=0 collection="Playlists" playlistId=this._id }}
+
+      {{#each radioSongs}}
+        {{> radioSong}}
+      {{/each}}
+    </div>
+    <div class="col-md-4">
+      <h1>{{title}}</h1>
+      <p>Stuff</p>
+    </div>
+  </div>
+</template>
+
+<template name="radioSong">
+  <div class="row">
+    <div class="col-md-1">
+      <img src="{{song.snippet.thumbnails.default.url}}" class="img-responsive" alt="Responsive image">
+    </div>
+    <div class="col-md-6">
+      <p><strong>{{song.snippet.title}}</strong></p>
+      <small>Added by xxx on xxx</small>
+    </div>
+    <div class="col-md-4">
+      {{#each votes}}
+        {{> circleAvatar}}
+      {{/each}}
+    </div>
+    <div class="col-md-1">
+      <button><span class="glyphicon glyphicon-chevron-up"></span></button>
+    </div>
+  </div>
 </template>

client/views/radios/radio.js

@@ -0,0 +1,17 @@
+Template.radio.helpers({
+  radioSongs: function () {
+    var radioSongs = RadioSongs.find({radioId: this._id}).fetch();
+
+    _.each(radioSongs, function (rs) {
+      var songInfo = Songs.findOne({_id: rs.songId});
+
+      rs.votes = _.map(rs.votes, function (vote) {
+        return Meteor.users.findOne({_id: vote});
+      });
+
+      rs.song = songInfo;
+    });
+
+    return radioSongs;
+  },
+});