<template>
  <div class="card" style="width: 20rem;">
    <div class="card-block">
      <img :src="user.avatar" class="rounded" alt="avatar"> <br><br>
      <h4 class="card-title">{{ user.name }}</h4>
      <h6 class="card-subtitle mb-2 text-muted">{{ user.title }}</h6>
      <p class="card-text">{{ user.description }}</p>
      <a href="#" class="btn btn-primary">Hire {{ user.name.split(' ')[0] }}</a>
    </div>
  </div>
</template>

<script>
import axios from '~plugins/axios'

export default {
  async data({ route }) {
    const { key } = route.params
    const { data } = await axios.get(`users/${key}.json`)
    return {
      user: data
    }
  }
}
</script>