Initial markup of recommended badges in playlist

controllers/backpack.js

@@ -151,11 +151,12 @@ module.exports = function (app) {
   app.get('/myplaylist', [
     loggedIn,
     openbadger.middleware('getAllBadges'),
+    openbadger.middleware('getUserRecommendations'),
     playlistMiddleware
   ], function (req, res, next) {
     res.render('user/myplaylist.html', {
       user: res.locals.user,
-      recommended: [], // XXX: grouped by STEAM?
+      recommended: req.remote.recommendations, // XXX: grouped by STEAM?
       playlist: req.playlist
     });
   });

views/user/myplaylist.html

@@ -20,4 +20,21 @@
 			{% endif %}
 		{% endblock %}
 	</div><!-- .playlist -->
+
+	<div class="recommendations">
+		<h3>Recommendations</h3>
+		<p class="lead">Check out these other badges you can earn in the STEAM
+		categories and add them to your playlist</p>
+		{% if recommended.length %}
+			<ul class="thumbnails">
+				{% for item in recommended %}
+					<li span="3">
+						{% include "includes/badge-thumbnail.html" %}
+					</li>
+				{% endfor %}
+			</ul>
+		{% else %}
+			<p>Nothing recommended yet …</p>
+		{% endif %}
+	</div>
 {% endblock %}