<!DOCTYPE html>
<html>

<head>
  <link href="//cdn.jsdelivr.net/picnicss/4.1.1/picnic.min.css" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <meta charset="utf-8">
  <title>Mag.JS</title>
</head>

<body>
  <h1>Hello Mag.JS!</h1>
  <a target="_tab" href="https://github.com/magnumjs/mag.js">GitHub</a>
  <hr/>

  <div id="app">
    <div id="user-list" class="user-list">
      <a class="user-list-item"></a>
    </div>
  </div>

  <script src="//rawgit.com/magnumjs/mag.js/master/mag-latest.min.js"></script>
  <script src="//rawgit.com/magnumjs/mag.js/master/dist/mag.addons.0.22.min.js"></script>

  <script src="user.js"></script>
  <script src="user-list.js"></script>
  <script src="app.js"></script>

</body>

</html>
//Main:
var app = {};

app.controller = function(props) {


}

app.view = function(state, props) {

  mag.module('user-list', UserList)

}

mag.module("app", app)
a:empty, .hide {
  display: none;
}

.user-list {list-style:none;margin:0 0 10px;padding:0;}
.user-list-item {background:#fafafa;border:1px solid #ddd;color:#333;display:block;margin:0 0 1px;padding:8px 15px;text-decoration:none;}
.user-list-item:hover {text-decoration:underline;}
#Mag.JS

## plunk boilerplate
var User = {
	list: [],
	loadList: function() {
		return mag.request({
			method: "GET",
			url: "https://rem-rest-api.herokuapp.com/api/users",
			withCredentials: true,
		})
		.then(function(result) {
			User.list = result.data
			return result;
		})
	},
}
var UserList = {
	controller: function(){
		this.list = User.loadList();
	},
	view: function(state) {
	  if(state.list.data){
	  state.a = state.list.data.map(function(user) {
        return {
          _href: "#/edit/" + user.id,
          _text: user.firstName + " " + user.lastName
	    }
      });
	  }
	}
}