<template>
  <div class="applicants">
    <button class="button">
      <nuxt-link to="/applicant/create">Create New Applicant</nuxt-link>
    </button>
    <b-table
        :data="applicants"
    >
      <template slot-scope="props">
        <b-table-column label="First Name">
          {{props.row.first_name}}
        </b-table-column>
        <b-table-column label="Other Name">
          {{props.row.other_name}}
        </b-table-column>
        <b-table-column label="Last Name">
          {{props.row.surname}}
        </b-table-column>
        <b-table-column label="Email">
          {{props.row.email_address}}
        </b-table-column>
        <b-table-column label="Application Status" >
          <button class="button">{{props.row.application_status}}</button>
        </b-table-column>
        <b-table-column>
          <nuxt-link :to="'/applicant/'+props.row.id" class="view__applicant">View Aplicant <i class="mdi mdi-account"></i></nuxt-link>
        </b-table-column>
      </template>
    </b-table>
  </div>
</template>

<script>
export default {
  data(){
    return{
    }
  },
  computed:{
    applicants(){
      return this.$store.state.applicants.applicant.allApplicants
    }
  },
  fetch({store}){
    store.dispatch('applicants/applicant/getApplicants')
  },
  methods: {
    getStyle(progress){
      let appProg = _.find(this.appStatus, prog=>{
        prog.val === progress
      })
      return appProg.style
    }
  }
}
</script>

<style>
.applicants{
  padding: 20px;
}
.view__applicant{
  color: black;
}
</style>