
<template>
    <article class="news-item">
      <div class="news-item-header" v-on:click="openWorkout(item.id)">
        <h3>{{ item.name }}</h3>
        <VaIcon v-if="deleteItem" 
          name="delete_forever" 
          size="22px" 
          color="#bbc1c3" 
          class="news-item-icon" 
          @click="(event: any) => deleteItem ? deleteItem(item.id, event) : ''"
        />
      </div>
        <ul class="metadata">
            <li v-if="item.workouted_at"><span>Дата:</span> {{ formatTime(item.workouted_at) }}</li>
            <li v-if="item.speed"><span>Скорость:</span> {{ speedConvert(item.speed) }} км/ч</li>
            <li v-if="item.heart_rate"><span>Пульс:</span> {{ item.heart_rate }} уд  /мин</li>
            <li v-if="item.distantion"><span>Расстояние:</span> {{ distConvert(item.distantion) }} км</li>
            <li v-if="item.duraion_sec"><span>Продолжительность:</span> {{ secondsToDuration(item.duraion_sec) }} </li>
            <li v-if="item.cadence"><span>Каденс:</span> {{ item.cadence }} об/мин</li>
            <li v-if="item.power"><span>Мощность:</span> {{ Math.round(item.power) }} Вт</li>
            <li v-if="item.external_links && item.external_links.values.length > 0"><span>Ссылки:</span> <a :href="item.external_links?.values[0].value" target="_blank">Дзен</a></li>
        </ul>
        <div v-if="item.attachment" 
        class="image-container" 
        :style="{'background-image': `url(${item.attachment.url})` }"
        v-on:click="openWorkout(item.id)"></div>
    </article>
  </template>
  
<script setup lang="ts">
  import { WorkoutItem, secondsToDuration, distConvert, formatTime, speedConvert } from "../Definitions.vue";

  interface Props {
    item: WorkoutItem
    openWorkout: (item: string) => void
    deleteItem?: (item: string, event: any) => void
  }
  const { item, openWorkout, deleteItem } = defineProps<Props>()

</script>  
<style>
  .image-container {
    cursor: pointer;
    height: 300px;
    width: 100%;
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center center;
    overflow: hidden;
    position: relative;
  }


  .image-container img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
  }
  @media (min-width: 1300px) {
  .image-container::before,
  .image-container::after {
      top:0;
      content: "";
      position: absolute;
      width: 25%; 
      height: 300px;
      background-image: inherit;
      background-size: inherit;
      filter: blur(10px); 
  }

  .image-container::before {
      left: 0;
  }

  .image-container::after {
      right: 0;
   }
   
  .image-container::before {
      left: 0;
      background-position: left center;
  }

  .image-container:after {
      right: 0;
      background-position: right center;
  }
}
  .news-item {
      display: flex;
      flex-direction: column;
      padding: 1rem;
      border-radius: 10px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
      transition: transform 0.2s ease-in-out;
      width: 100%;
  }
  
  .news-item-header {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
  
  }
  .news-item-icon {
    cursor: pointer;
  }
  
  
  .news-item h3 {
      font-weight: bold;
      color: #3d3d3d;
  }
  
  .metadata {
    border-top: #9c9a9a 1px solid;
  }
  
  .metadata li {
      list-style: none;
      display: inline-block;
      margin-left: 1rem;
  }
  
  .metadata span {
      font-size: 0.9em;
      opacity: 0.7;
  }
  
</style>
  