<template>
  <div v-if="hasInfo" class="card">
    <div class="card-body">
      <h6 class="card-title">Self Reliance</h6>
      <dl class="card-text">
        <dt>Certificates:</dt>
        <dd>{{srs.certificates}}</dd>

        <dt>Facilitator:</dt>
        <dd>{{srs.facilitator}}</dd>

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

export default {
  name: 'DetailsSrs',
  computed: {
    ...mapState({
      srs: state => state.srs,
      hasInfo: state => !/none/.test(state.srs.certificates)
    }),
    hasInfo () {
      const certificates = this.srs.certificates
      if (!certificates) {
        return false
      }
      return !/none/.test(certificates)
    }
  }
}
</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>
