var root = 'http://localhost:5000/api/v1';
var app = {};

// Backbone Model
app.UserModel = Backbone.Model.extend({
    defaults: {
        // urlRoot: root + '/users',
        name: 'Default Name',
        email: '30',
        username: 'default_username'
    },

    initialize: function() {
        // this.fetch();
        // console.log('User model \'' + this.id + '\' has been initialized.');
    },

    parse: function(data) {
        // console.log('Model parse funciton called');
        // return data.data;
    }
});

// Backbone Model View
app.UserView = Backbone.View.extend({
    el: '#users-list',
    // el: '.user-box-wrapper',

    template: _.template($('#connections-user-template').html()),

    initialize: function() {
        // this.render();
    },

    render: function() {
        this.$el.append( this.template( this.model.toJSON()));
    }
});

// Backbone Collection
app.UserCollection = Backbone.Collection.extend({
    model: app.UserModel,
    url: root + '/users',

    initialize: function() {
        // this.fetch();
    },

    parse: function(data) {
        return data.data;
    }
});

// Backbone Collection View
app.UserCollectionView = Backbone.View.extend({
    el: '#users-list',

    template: _.template($('#connections-template').html()),

    initialize: function() {
        this.connections = new app.UserCollection();
        var self = this;
        this.connections.fetch().done(function() {
            self.render();
        });
    },

    render: function() {
        this.$el.html(this.template());
        // this.$el.append( this.template( this.model.toJSON()));
        this.connections.each(function(user) {
            console.log('User : ' + user.get('name'));
            var userView = new app.UserView({
                model: user
            });
            // userView.model.fetch();
            userView.render();
        });
    }
});
var connectionsView = new app.UserCollectionView();