<template>
  <Page>
    <template #header>
      <Header :info="playlist.info" />
    </template>
    <template #content>
      <Content
        :tracks="playlist.tracks"
        :count="playlist.info?.count"
        :name="playlist.info.name"
        :playlistid="playlist.info.playlistid"
      />
    </template>
  </Page>
</template>

<script setup lang="ts">
import Page from "@/layouts/HeaderContentBottom.vue";

import Header from "@/components/PlaylistView/Header.vue";
import Content from "./Content.vue";

import usePTrackStore from "@/stores/pages/playlist";
import { onMounted, onUnmounted } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();
const playlist = usePTrackStore();

onMounted(() => {
  playlist.fetchArtists(route.params.pid as string);
});

onUnmounted(() => playlist.resetArtists());
</script>

<style lang="scss"></style>
