<template>
  <ion-item :router-link="'/tabs/mat_detail/'+obj.id">
    <ion-thumbnail slot="start">
      <ion-img alt="Silhouette of mountains" :src="thmb"  v-if="thmb" />
    </ion-thumbnail>
    <ion-label color="light">{{ name }} <br><span class='small'><ion-icon :icon="timer" size="small" />{{ dt }}</span></ion-label>
  </ion-item>
</template>

<script setup>
  import { IonItem, IonLabel, IonThumbnail, IonImg, IonIcon } from '@ionic/vue';
import { logoIonic, timer } from 'ionicons/icons';
  import { ref, onMounted } from 'vue';
  import moment from 'moment';
  
  const dt = ref()
  const thmb = ref()
  const name = ref()
  
  const props = defineProps({
    obj: Object
  })

  onMounted(() => {
    const obj = props.obj
    let temp  = obj.display_datetime || obj.vimeo_created || obj.created_at 
    dt.value = moment(temp).format('L'); 

    if( obj.gifs && obj.gifs.length > 0 ) {
      console.log(obj.gifs)
      if(obj.gifs[0].sizes.length > 2 ) {
        thmb.value = obj.gifs[0].sizes[2].link
      }else {
        thmb.value = obj.gifs[0].sizes[0].link
      }
    }else {
      thmb.value = obj.course_image
    }
    name.value = obj.vimeo_name || props.courseName
  })

</script>

<style scoped>
.small {
  font-size:0.8em;
  color:#888;
  text-align:right;
  width:100%;
  display:block;
  margin-top:0.3em;
}
ion-icon {
  vertical-align:middle;
}
</style>
