:wrench: layout + functional tabs between pending/paired

frontend/src/views/MatchesView.vue

 <template lang="pug">
 main.view--matches
+    .select--matches
+        .matches--pending(:class="currentTab =='pending' ? 'active':'idle'" @click="switchTab('pending')") Pending
+        .matches--paired(:class="currentTab =='paired' ? 'active':'idle'" @click="switchTab('paired')") Paired
 
     article.pa12
-        template(v-if='matches.length && !loading')
-            h2 atches
-            ProfileCardList(:pid='pid' :profiles='matches' @reload='getCards')
+        template(v-if="currentTab=='pending'")
+            p Pending Matches
+        template(v-else)
+            p Paired Matches
+        //- template(v-if='matches.length && !loading')
+        //-     h2 atches
+        //-     ProfileCardList(:pid='pid' :profiles='matches' @reload='getCards')
 
-        p(v-else-if='matches.length === 0') No matches.
-        w-spinner(v-else bounce)
+        //- p(v-else-if='matches.length === 0') No matches.
+        //- w-spinner(v-else bounce)
 
     MainNav
 </template>
     name: 'MatchView',
     components: { ProfileCardList },
     mixins: [mixins.pidMixin, mixins.cardMixin],
+    data: () => ({
+        currentTab: 'pending'
+    }),
     methods: {
         /** Gets called from cardMixin */
         async getCards() {
             }
             this.loading = false
         },
+        switchTab(tab){
+            if(this.currentTab === tab) return
+            this.currentTab = tab
+        }
     },
 }
 </script>
+<style>
+.select--matches{
+    display: flex;
+    justify-content: space-between;
+    margin: 0 25px;
+}
+.select--matches > div{
+    width: 100%;
+    text-align: center;
+    font-size: 16px;
+    line-height: 40px;
+}
+.active{
+    border-bottom: 3px solid #F2CD5C;
+    color: #F2CD5C;
+}
+.idle{
+    color: #BCC5D3;
+}
+
+</style>