add CoachDetails logic

src/pages/coaches/CoachDetails.vue

@@ -1,5 +1,63 @@
 <template>
-  <div>Details for Coach</div>
-  <router-view></router-view>
-  <base-button link to="/coaches/c1/contact">Contact</base-button>
+  <section>
+    <base-card>
+      <h2>{{ fullName }}</h2>
+      <h3>${{ rate }}/hour</h3>
+    </base-card>
+  </section>
+  <section>
+    <base-card>
+      <header>
+        <h2>Interested? Reach out now!</h2>
+        <base-button link :to="coachContactLink">Contact</base-button>
+      </header>
+      <router-view></router-view>
+    </base-card>
+  </section>
+  <section>
+    <base-card>
+      <base-badge
+        v-for="area in areas"
+        :key="area"
+        :type="area"
+        :title="area"
+      ></base-badge>
+      <p>{{ description }}</p>
+    </base-card>
+  </section>
 </template>
+
+<script>
+export default {
+  props: ['id'],
+  data() {
+    return {
+      selectedCoach: null
+    };
+  },
+  computed: {
+    rate() {
+      return this.selectedCoach.hourlyRate;
+    },
+    areas() {
+      return this.selectedCoach.areas;
+    },
+    description() {
+      return this.selectedCoach.description;
+    },
+    fullName() {
+      return this.selectedCoach.firstName + ' ' + this.selectedCoach.lastName;
+    },
+    coachContactLink() {
+      return this.$route.path + '/contact';
+    }
+  },
+  created() {
+    this.selectedCoach = this.$store.getters['coaches/coaches'].find(
+      coach => coach.id === this.id
+    );
+  }
+};
+</script>
+
+<style></style>