Give /myapplications/:id a page and include a style for the application state.

controllers/backpack.js

@@ -150,9 +150,12 @@ module.exports = function (app) {
     loggedIn
   ], function (req, res, next) {
     var user = req.session.user;
-    applications.find({where: {LearnerId: user.id, BadgeId: req.params.id}}).success(function (application) {
-      res.render('user/application.html', {
-        item: application
+    openbadger.getBadge({id: req.params.id}, function(err, data) {
+      var badge = data.badge;
+      applications.find({where: {LearnerId: user.id, BadgeId: req.params.id}}).success(function (application) {
+        res.render('user/application.html', {
+          badge: _.extend(badge, application)
+        });
       });
     });
   });

views/user/application.html

@@ -0,0 +1,43 @@
+{% extends 'layout.html' %}
+{% set navitem = 'backpack' %}
+{% set pageTitle = badge.name %}
+
+{% block content %}
+    <div class="row">
+        <div class="span4">
+            <img class="{{ badge.state }}"  src="{{ badge.image }}">
+        </div>
+        <div class="span8">
+          <p>
+            <b>Issued by:</b>
+            {% if badge.program.issuer.url %}
+              <a href="{{ badge.program.issuer.url }}">
+            {% endif %}
+            {{ badge.program.issuer.name }}
+            {% if badge.program.issuer.url %}
+              </a>
+            {% endif %}
+          </p>
+
+          <p>
+            <b>Issued to:</b> {{ user.email }}
+          </p>
+
+          <h3>What is this badge about?</h3>
+          <p>{{ badge.description }}</p>
+        </div>
+    </div>
+
+    <div class="row">
+      <h3>Similar Badges</h3>
+      <p>Cupcake <a href="#">link to Badges page</a> something about badges
+      should go here.</p>
+
+      {% for item in similar %}
+      <div class="span3">
+        {% include "includes/badge-thumbnail.html" %}
+      </div>
+      {% endfor %}
+
+    </div>
+{% endblock %}