<div id="app" method="Post">


<!-- Text input-->

  <label class="col-md-4 control-label">Name</label>
  <div class="col-md-4">
  <input id="name" name="name" type="text" v-model="name" class="form-control input-md">
  </div>


<!-- Text input-->

  <label class="col-md-4 control-label" >Age</label>
  <div class="col-md-4">
  <input id="age" name="age" type="text" v-model="age" class="form-control input-md">
  </div>


<!-- Text input-->

  <label class="col-md-4 control-label">Email</label>
  <div class="col-md-4">
  <input id="email" name="email" type="text" v-model="email" class="form-control input-md">
  </div>


<!-- Button -->

  <label class="col-md-4 control-label" for="signup"></label>
  <div class="col-md-4">
    <button id="signup" v-on:click="Add()" class="btn btn-primary">Sign up!</button>
    <button id="edit" v-on:click="Reedit()" class="btn btn-primary">EDIT</button>
  </div>




<table class="table">
    <tr>
        <th>#</th>
        <th>Name</th>
        <th>Age</th>
        <th>Email</th>
    </tr>

<tr v-for="participant in participants">
    <td> {{ participant.id }} </td>
    <td> {{ participant.name }} </td>
    <td> {{ participant.age }} </td>
    <td> {{ participant.email }} </td>
    <td><a v-on:click="Edit(participant)" class="btn bnt-default">Edit</a></td>
    <td><a v-on:click="Delete(participant)" class="btn bnt-default">Delete</a></td>
</tr>

</table>
</div>
@section Scripts {
<script>
var app = new Vue({
  el:'#app',

  data: {
    participants: [],
    id:null,
    name:'',
    age:null,
    email:''
  },
  created: function () {
    var self = this;

    // Fetch list of authors
    axios.get('/api/Participants')
    .then(function (response) {
        self.participants=response.data;
    })
  },

methods: {
  Add: function(){
    axios.post('/api/Participants',{
      "name":this.name,
      "age":this.age,
      "email":this.email
    }).then(response=>{
      self.participants.push({
      "id":response.id,
      "name":self.name,
      "age":self.age,
      "email":self.email
      });
        self.name='';
        self.age=null;
        self.email='';
    });

  },
  Reedit: function(participant){
    axios.put('/api/Participants/' + this.id,{
	    "id":this.id,
      "name":this.name,
      "age":this.age,
      "email":this.email
   	}).then(result=>{
		   self.participants[this.id].name=self.name;
		   self.participants[this.id].age=self.age;
		   self.participants[this.id].email=self.email;
		   self.name='';
		   self.age=null;
		   self.email='';
	   });
  },
  Edit: function(participant){
    this.id=participant.id;
    this.name=participant.name;
    this.age=participant.age;
    this.email=participant.email;
  },
  Delete: function(participant){
    axios.delete('/api/Participants/' + participant.id);
    this.participants.splice(this.participants.indexOf(participant),1)
    }
}
})
</script>
}