define(['react', 'underscore', 'components/page_header',
'components/intro', 'collections/projects', 'router',
'components/common/time'], function(React, _,
PageHeader, Intro, ProjectCollection, router, Time) {

    var ProjectItemMixin = {
        render: function() {
            return React.DOM.li({className: 'project-item row ' + this.getClassName()},
                React.DOM.div({className: 'project-item-name col-md-6'}, this.renderName()),
                React.DOM.div({className: 'project-item-details col-md-6'}, this.renderDetails()));
        }
    };

    var InstanceProjectItem = React.createClass({
        mixins: [ProjectItemMixin],
        getClassName: function() {
            return 'instance';
        },
        renderName: function() {
            var instance = this.props.model;
            var instance_url = function(instance) {
                var provider_id = instance.get('identity').provider;
                var identity_id = instance.get('identity').id;
                return 'provider/' + provider_id + '/identity/' + identity_id + '/instances/' + instance.id;
            };
            return React.DOM.a({
                href: url_root + '/' + instance_url(instance),
                onClick: function(e) {
                    e.preventDefault();
                    router.navigate(instance_url(instance), {trigger: true});
                }}, this.props.model.get('name_or_id'));
        },
        renderDetails: function() {
            var machine_name = this.props.model.get('machine_name') ||
                this.props.model.get('machine_alias');
            return [this.props.model.get('ip_address') + ', from ',
                React.DOM.a({}, machine_name)];
        }
    });

    var VolumeProjectItem = React.createClass({
        mixins: [ProjectItemMixin],
        getClassName: function() {
            return 'volume';
        },
        renderName: function() {
            return React.DOM.a({}, this.props.model.get('name_or_id'));
        },
        renderDetails: function() {
            return [this.props.model.get('size') + ' GB, created ',
                Time({date: this.props.model.get('create_time')})];
        }
    });

    var ProjectItems = React.createClass({
        render: function() {
            var project = this.props.project;
            var items = [];
            items = items.concat(project.get('instances').map(function(instance) {
                return InstanceProjectItem({model: instance});
            }));
            items = items.concat(project.get('volumes').map(function(volume) {
                return VolumeProjectItem({model: volume});
            }));

            return React.DOM.ul({className: 'project-items container-fluid'}, items);
        }
    });

    var Project = React.createClass({
        render: function() {
            var project = this.props.project;
            console.log(project);
            return React.DOM.li({}, React.DOM.h2({}, project.get('name')), 
                React.DOM.div({className: 'project-description'}, React.DOM.p({}, project.get('description'))),
                ProjectItems({project: project}));
        }
    });

    var ProjectsList = React.createClass({
        render: function() {
            var items = this.props.projects.map(function(model) {
                return Project({key: model.id, project: model});
            });
            return React.DOM.ul({id: 'project-list'}, items);
        }
    });

    var Projects = React.createClass({
        helpText: function() {
            return React.DOM.p({}, "Projects help you organize your cloud resources");
        },
        render: function() {
            var content = ProjectsList({projects: this.props.projects});

            return React.DOM.div({},
                PageHeader({title: "Projects", helpText: this.helpText}),
                content
            );
        }
    });

    return Projects;
});

@@ -803,16 +803,63 @@
 .model;%0A
+            /* TODO: Move this to the model */%0A
         
@@ -894,32 +894,32 @@
 ion(instance) %7B%0A
-
                 
@@ -1984,47 +1984,665 @@
     
-return React.DOM.a(%7B%7D, this.props.model
+/* TODO: Move this to the model */%0A            var volume_url = function(volume) %7B%0A                var provider_id = volume.get('identity').provider;%0A                var identity_id = volume.get('identity').id;%0A                return 'provider/' + provider_id + '/identity/' + identity_id + '/volumes/' + volume.id;%0A            %7D;%0A            var volume = this.props.model;%0A            var url = volume_url(volume);%0A            return React.DOM.a(%7B%0A                href: url_root + '/' + url,%0A                onClick: function(e) %7B%0A                    e.preventDefault();%0A                    router.navigate(url, %7Btrigger: true%7D);%0A                %7D%7D, volume
 .get
@@ -3129,24 +3129,42 @@
 rojectItem(%7B
+key: instance.id, 
 model: insta
@@ -3258,32 +3258,32 @@
 ction(volume) %7B%0A
-
                 
@@ -3308,16 +3308,32 @@
 ctItem(%7B
+key: volume.id, 
 model: v

Add links to volumes from projects list