<script setup lang="ts">
import ItListRow from "@/components/ui/ItListRow.vue";
import * as log from "loglevel";

log.debug("ProfileView created");

const fakeData = {
  notifications: [
    {
      id: 1,
      source: {
        name: "Daniel",
        title: "EFZ Kaufmann/-frau",
        course: "üK",
        avatar: "https://picsum.photos/200",
      },
      ago: "Vor 1 Stunde",
      title: "hat den Transferauftrag «Die Motorhaftpflicht» mit dir geteilt.",
      unread: true,
    },
    {
      id: 2,
      source: {
        name: "Sofia",
        title: "EFZ Kaufmann/-frau",
        course: "üK",
        avatar: "https://picsum.photos/200",
      },
      ago: "Vor 1 Tag",
      title: "hat dir ein Feedback zum Kreis «Analyse» mit dir geteilt.",
      unread: false,
    },
  ],
};
</script>

<template>
  <div class="bg-gray-200">
    <div class="container-large">
      <header class="mt-12 mb-8">
        <h1>{{ $t("general.notification", 2) }}</h1>
      </header>
      <main>
        <div class="bg-white px-8 py-2">
          <ItListRow
            v-for="notification in fakeData.notifications"
            :key="notification.id"
          >
            <template #left>
              <img
                class="h-[45px] rounded-full mr-2"
                :src="notification.source.avatar"
              />
              <div class="ml-1">
                <p class="leading-6">
                  {{ `${notification.source.name} ${notification.title}` }}
                </p>
                <p class="leading-6 text-sm text-gray-800">
                  {{ `${notification.source.title} &hyphen; ${notification.ago}` }}
                </p>
              </div>
            </template>
            <template #link>
              <div
                v-if="notification.unread"
                class="flex items-center h-[45px] flex-row"
              >
                <div class="w-[10px] h-[10px] bg-blue-500 rounded-full"></div>
              </div>
            </template>
          </ItListRow>
        </div>
      </main>
    </div>
  </div>
</template>

<style scoped></style>
