From 2897e9fe61b2f0e47f230d3304577d2dfbabbad4 Mon Sep 17 00:00:00 2001
From: Andreas Zweili <andreas@2li.ch>
Date: Mon, 28 Jun 2021 18:47:47 +0200
Subject: [PATCH] add CoachDetails logic

---
 src/pages/coaches/CoachDetails.vue | 64 ++++++++++++++++++++++++++++--
 1 file changed, 61 insertions(+), 3 deletions(-)

diff --git a/src/pages/coaches/CoachDetails.vue b/src/pages/coaches/CoachDetails.vue
index 5160f25..1a381e2 100644
--- a/src/pages/coaches/CoachDetails.vue
+++ b/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>