﻿<script setup>
import {useSubscriptionStore} from "@/stores/subscriptionStore.js";

const subscriptionStore = useSubscriptionStore()
</script>

<template>

  <template v-if="Object.keys(subscriptionStore.subscriptions).length > 0">
    <template v-for="subscription in subscriptionStore.subscriptions">

      <RouterLink class="capitalize" :to="`/@${subscription.creatorName}`">

        <div class="flex items-center content-center font-sans font-semibold pt-2 ">
          <img
              :src="subscription.creatorPortraitUrl ? subscription.creatorPortraitUrl: '/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png' "
              alt="Profile Image"
              class="rounded-full mx-2"
              width="32px"
              height="32px">
          {{ subscription.creatorName }}
        </div>

      </RouterLink>

    </template>
  </template>

  <template v-else>
    <span>No subscriptions</span>
  </template>

</template>