<template>
  <div v-if="hasInfo" class="card d-inline-block">
    <h6 class="card-header">Pathway</h6>
    <div class="card-body">
      <dl class="card-text">
        <dt>GPA:</dt>
        <dd>{{pw.gpa}}</dd>

        <dt>Credits:</dt>
        <dd>{{pw.credits}}</dd>

        <dt>Site:</dt>
        <dd>{{pw.site}}</dd>
      </dl>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'

export default {
  name: 'DetailsPathway',
  computed: {
    ...mapState({
      pw: state => state.pathway,
      hasInfo: state => state.pathway.completion === 'Y'
    })
  }
}
</script>
<style scoped>
dl {
  display: grid;
  grid-template-columns: [label] auto [value] auto;
  grid-column-gap: 0.5rem;
}
dt {
  font-weight: bold;
  text-align: right;
  grid-column-start: label;
}
dd {
  grid-column-start: value;
}
</style>
