<template>
  <div>
    <h2>Task</h2>
    <ul>
      <li>
        <form class="info-link-add">
          <input type="text" v-model="text" name="text" placeholder="Text" required>
          <input type="submit" name="submit" @click="submit($event)" value="Add new task">
        </form>
      </li>
      <li v-for="(task,key) in tasks" :key="key">{{task.text}}</li> 
    </ul>
  </div>
</template>

<script>
import Tasks from '../../api/collections/Tasks'

export default {
  data() {
    return {
      text: "",
    }
  },
  meteor: {
    $subscribe: {
      'tasks': [],
    },
    tasks () {
      return Tasks.find({})
    },
  },
  methods: {
    submit(event) {
      event.preventDefault()
      Meteor.call('createTask', this.text, (error) => {
        if (error) {
          alert(error.error)
        } else {
          this.text = ''
        }
      })
    }
  },
}
</script>

<style scoped>
  ul {
    font-family: monospace;
  }
</style>