
<template>
    <section class="news-feed">
    <template v-if="workoutItems.length==0">
      <div>Публичные тренировки не найдены</div>
    </template>
    <template v-if="workoutItems.length>0" v-for="(item, index) in workoutItems" :key="item.id">
      <WorkoutListItem :item=item :openWorkout=openWorkout></WorkoutListItem>
    </template>
    </section>
  </template>
  <script setup lang="ts">
  
  import { AxiosResponse, AxiosInstance } from "axios";
  import { ref, inject } from 'vue';
  import { useToast } from "vuestic-ui/web-components";
  import { useRouter } from "vue-router";
  import { WorkoutItem } from "./Definitions.vue";
  import WorkoutListItem from "./components/WorkoutListItem.vue";
  
  
  const { push } = useRouter();
  const axiosPublic= inject('axiosPublic') as AxiosInstance;
  let workoutItems = ref<Array<WorkoutItem>>([]);
  const { init } = useToast();
  
  
  const openWorkout = (id: string) => {
    push({ name: "workout_public_item", params: {id: id}}).catch((error) => {});
  };
  
  const initWorkouts = () => {
    axiosPublic
      .get(`/api/v0/public/workouts`)
      .then((response: AxiosResponse) => {
        workoutItems.value = response.data.results;
      })
      .catch((error: any) => {
        console.log(error);
        init({
            message: "Что-то пошло не так.",
            color: "error",
        });
      });
  };
  
  initWorkouts();
  </script>
  
  
<style>
.news-feed {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: 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>