View = require('ampersand-view');
Model = require('ampersand-model')
Collection = require('ampersand-collection');

Person = Model.extend({
  props: { name: 'string' },
  session: { selected: 'boolean' }
});

People = Collection.extend({
  model: Person,
  initialize: function(){
    this.listenTo(this, 'change:selected', this.selectionChanged)
  },
  selectionChanged: function(model, value){
    if(value){
      this.forEach(function(m){
        if(m != model){ m.selected = false }
      })
    }
  }
});

SubView = View.extend({
  template: "<label><input data-hook=checkbox type=checkbox /><span data-hook=name></span></label>",
  events: {
    'change input': 'checkboxChanged'
  },
  bindings: {
    'model.name': { hook: 'name' },
    'model.selected': { hook: 'checkbox', name: 'checked', type: 'booleanAttribute' }
  },
  checkboxChanged: function(event){
    this.model.selected = event.target.checked
  }
});

MainView = View.extend({
  collections: { people: People },
  initialize: function(){
    this.el = document.body;
    this.render();
  },
  render: function(){
    this.renderCollection(this.people, SubView);
  }
});

view = new MainView({ people: [{ name: 'Shadrach' }, { name: 'Meshach' }, { name: 'Abednego' }] })