Vue.component('app-klatsch', {
  methods: {
    getStatusColor(status) {
      switch(status) {
        case 'Confirmed':
          return 'blue';
        case 'Pending':
          return 'orange';
        case 'Cancelled':
          return 'red';
        default:
          return '';
      }
    },
    getBorderColor(status) {
      return `border-${this.getStatusColor(status)}-500`;
    },
    getBgColor(status) {
      return `bg-${this.getStatusColor(status)}-500`;
    },
    getTextColor(status) {
      return `text-${this.getStatusColor(status)}-500`;
    }
  },
  props: ['klatsch'],
  template: `
<div class="flex px-8  items-center today-card bg-white shadow-lg ml-16 h-24 rounded-custom border-l-8" :class="getBorderColor(klatsch.status)">
      <div class="flex flex-col justify-center items-center border-r-2 border-gray-200 px-4">
        <p class="font-extrabold text-xl text-gray-900">{{klatsch.time}}</p>
        <p class="text-sm text-gray-600">{{klatsch.duration}}</p>
      </div>
      <div class="px-4">
        <img v-bind:src="klatsch.avatar" class="h-16 w-16 rounded-full" alt="">
      </div>
      <div class="flex flex-col px-4">
        <p class="font-extrabold text-xl text-gray-900">{{klatsch.client}}</p>
        <p class="text-sm text-gray-600 flex items-center">
          <img src="https://image.flaticon.com/icons/svg/64/64113.svg" alt="" class="h-4 w-4 mr-1">
          {{klatsch.location}}
        </p>
      </div>
      <div class="flex flex-col px-4">
        <p class="font-extrabold text-xl text-gray-900">{{klatsch.date}}</p>
        <div class="flex items-center">
<!--           <img src="https://image.flaticon.com/icons/svg/1870/1870785.svg" alt="" class="h-2 w-2 mr-1"> -->
          <div class="h-2 w-2 mr-1 rounded-full" :class="getBgColor(klatsch.status)"></div>
          <span class="text-sm font-bold" :class="getTextColor(klatsch.status)">{{klatsch.status}}</span>
        </div>
      </div>
      <div class="flex  flex-grow justify-end">
        <img src="https://image.flaticon.com/icons/svg/1159/1159876.svg" alt="" class="cursor-pointer h-4 w-4 opacity-25 mr-8">
        <img src="https://image.flaticon.com/icons/svg/59/59254.svg" alt="" class="cursor-pointer h-4 w-4 opacity-25">
      </div>
    </div>
`
})

var app = new Vue({
  el: '#app',
  data: {
    title: 'My Klatschboard',
    profilePic: 'https://i0.wp.com/zblogged.com/wp-content/uploads/2019/02/FakeDP.jpeg?resize=567%2C580&ssl=1',
    today: {
        time: '3:30 PM',
        duration: '30 minutes',
        client: 'Roger Federer',
        location: 'Intrepid Cafe',
        date: 'September 16th',
        status: 'Confirmed',
        avatar: 'https://www.rogerfederer.com/templates/protostar/img/fed_prof.jpg',
      phone: '+1 (234) 567-890'
      },
    upcoming: [
      {
        time: '4:00 PM',
        duration: '45 minutes',
        client: 'Lionel Messi',
        location: 'Camp Nou',
        date: 'September 20th',
        status: 'Pending',
        avatar: 'https://www.mykhel.com/thumb/250x90x250/football/players/4/19054.jpg'
      },
      {
        time: '3:00 PM',
        duration: '15 Minutes',
        client: 'Tony Stark',
        location: 'Stark Industries',
        date: 'September 23rd',
        status: 'Cancelled',
        avatar: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSP3rerkp3JLcHLpuBV2tOYKYsmBt08wrT88Jdly2BQ0kNu7RAHDA'
      },
      {
        time: '11:00 AM',
        duration: '30 Minutes',
        client: 'Steve Jobs',
        location: 'Menlo Park',
        date: 'September 27th',
        status: 'Confirmed',
        avatar: 'https://www.biography.com/.image/t_share/MTE5NDg0MDU0NTIzODQwMDE1/steven-jobs-9354805-2-402.jpg'
      }
    ]
  },
  methods: {
    getStatusColor(status) {
      switch(status) {
        case 'Confirmed':
          return 'blue';
        case 'Pending':
          return 'orange';
        case 'Cancelled':
          return 'red';
        default:
          return '';
      }
    },
    getBgColor(status) {
      return `bg-${this.getStatusColor(status)}-500`;
    },
    getTextColor(status) {
      return `text-${this.getStatusColor(status)}-500`;
    }
  }
})