﻿<template>
  <div class="text-center rounded-t-lg p-4 tracking-widest uppercase"
       :style="{ color: brandingStore.value.colors.onPrimary, backgroundColor: brandingStore.value.colors.primary}">
    Actualité
  </div>

  <div v-for="(item, index) in articles"
       class="my-1 text-white"
       :key="index"
       :style="{ backgroundColor: brandingStore.value.colors.primary }">

    <div class="flex justify-between items-center border-b-2 border-white p-2 mx-2">
      <p class="text-xl tracking-[8px]">
        <span v-if="item.type === 'nouvelle'">
          Nouvelle
        </span>
        <span v-if="item.type === 'contenu'">
          Contenu
        </span>
      </p>
      <p class="text-xs">{{ item.date }}</p>
    </div>

    <div class="p-4">
      <div class="text-lg tracking-[2px]">
        {{ item.title }}
      </div>

      <p v-if="item.description"
         class="text-gray-300 text-sm text-justify mt-1 py-1">
        {{ item.description }}
      </p>

      <div v-if="item.rating" class="stars flex justify-end">
        {{ item.rating }} ★
      </div>

      <img v-if="item.photo"
           :src="item.photo"
           class="w-full h-auto my-2"/>

      <video v-if="item.video"
             controls
             :src="item.video"
             class="w-full h-auto my-2">
      </video>

      <div class="flex justify-evenly">
        <v-btn icon variant="plain">
          <v-icon>mdi-thumb-up</v-icon>
        </v-btn>
        <v-btn icon variant="plain">
          <v-icon>mdi-comment-outline</v-icon>
        </v-btn>
        <v-btn icon variant="plain">
          <v-icon>mdi-gift-outline</v-icon>
        </v-btn>
      </div>

    </div>
  </div>

</template>

<script setup>
import {ref} from 'vue';
import {useBrandingStore} from "@/stores/brandingStore.js";

const brandingStore = useBrandingStore()

const articles = ref([
  {
    type: 'nouvelle',
    title: 'La visite du studio',
    description: 'Je suis fier de vous montrer les installations sur lesquelles nous avons travaillé si fort.',
    photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png',
    video: null,
    rating: null,
    date: '2024-09-19'
  },
  {
    type: 'contenu',
    title: 'Éditer comme un pro!',
    description: 'Ceci est la description du contenu.',
    photo: null,
    video: null,
    rating: 4.5,
    date: '2024-09-18'
  },
  {
    type: 'nouvelle',
    title: 'Le studio',
    description: 'Nous sommes dans les derniers préparatifs, mais demain nous allons vous dévoiler la première partie du studio qui est complétée.',
    photo: null,
    video: null,
    rating: null,
    date: '2024-09-17'
  },
  {
    type: 'contenu',
    title: 'Contenu 2',
    description: 'Deuxième contenu avec description.',
    photo: null,
    video: null,
    rating: 5.0,
    date: '2024-09-16'
  },
  {
    type: 'nouvelle',
    title: 'La 2e visite du studio',
    description: 'Je suis fier de vous montrer les installations sur lesquelles nous avons travaillé si fort.',
    photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png',
    video: null,
    rating: null,
    date: '2024-09-19'
  },
]);

</script>
