<template>
  <v-img 
  class="image"
  src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg" 
  cover
  ></v-img>
  
  <v-card 
  class="stick-bottom card-height"
  width="100%"
  height="60vh"
  style="padding-top: 15px; font-weight:bold;"
  :title="destination.title" 
  :subtitle="destination.subTitle"
  >

    <v-list lines="one">
      <v-list-item>
        <template v-slot:prepend>
          <v-avatar>
            <img :src="detial[0].icon" 
            class="iconCheck"
            />
          </v-avatar>
        </template>
        <v-list-item-title class="textCheck">{{detial[0].title}}</v-list-item-title>
        <v-list-item-subtitle ><a href="https://wiki.openstreetmap.org/wiki/Key:wheelchair" class="knowMore">{{detial[0].subtitle}}</a></v-list-item-subtitle>
      </v-list-item>

      <v-list-item>
        <template v-slot:prepend>
          <v-avatar>
            <img :src="detial[1].icon" 
            class="icon"
            />
          </v-avatar>
        </template>
        <v-list-item-title class="text-decoration-underline">{{detial[1].title}}</v-list-item-title>
      </v-list-item>

      <v-list-item>
        <template v-slot:prepend>
          <v-avatar>
            <img :src="detial[2].icon" 
            class="icon"
            />
          </v-avatar>
        </template>
        <v-list-item-title>{{detial[2].title}}</v-list-item-title>
      </v-list-item>


    </v-list>

    <v-card-actions class="stick-bottom btnlist-height justify-sa">
      <v-btn rounded="xl" variant="tonal" width="45vw" height="44px">
        เพิ่มลงในสถานที่โปรด</v-btn>
      <v-btn rounded="xl" variant="flat" class="text-white" width="45vw" height="44px" color="#f16322">
        ดูเส้นทาง</v-btn>
    </v-card-actions>

    <v-btn :to="{name: 'favorite'}" variant="tonal" icon="mdi-close" style="position: absolute; top: 15px; right: 15px;" />


  </v-card>
</template>
  
<script setup>
import findLocation from '../../icons/Material/find-location.svg';
import clock from '../../icons/Material/clock.svg';
import check from '../../icons/Material/check-round.svg';
const destination = {
  title: "อนุสาวรีย์ชัยสมรภูมิ",
  subTitle: "ราชเทวี , กรุงเทพมหานคร"
}
const detial = [
  {
    icon: check,
    subtitle: 'เรียนรู้เพิ่มเติม',
    title: 'Unrestricted Wheelchair access',
  },
  {
    icon: findLocation,
    subtitle: '',
    title: '13.76493, 100.53828',
  },
  {
    icon: clock,
    subtitle: '',
    title: 'Mo-Su 11:30-22:00',
  },
]
</script>

<style>
.stick-bottom {
  position: fixed;
  bottom: 0;
}

.btnlist-height {
  height: 25%;
  width: 100%;
}

.v-card-actions.justify-sa {
  display: flex;
  justify-content: space-around;
}

.text-white {
  color: white;
}

.icon, .iconCheck {
  width: 30px;
  height: 30px;
}

.iconCheck, .textCheck {
  filter: invert(55%) sepia(39%) saturate(601%) hue-rotate(73deg) brightness(97%) contrast(98%);
}

.knowMore {
  filter: invert(67%) sepia(85%) saturate(5663%) hue-rotate(8deg) brightness(100%) contrast(101%);
}

.image { 
  width: 100%;
  height: 45vh;
}
</style>
  