<script lang="ts">
  import type { AniListAuthorisation } from '$lib/Data/AniList/identity';
  import Skeleton from '$lib/Loading/Skeleton.svelte';
  import locale from '$stores/locale';
  import settings from '$stores/settings';
  import ListTitle from '../ListTitle.svelte';
  import AnimeList from '$lib/List/Anime/DueAnimeList.svelte';

  export let userIdentity: { id: number };
  export let user: AniListAuthorisation;
</script>

<details open={!$settings.displayAnimeCollapsed} class="list list-due">
  {#if userIdentity.id !== -2}
    <AnimeList {user} />
  {:else}
    <ListTitle title={$locale().lists.due.episodes} />

    <Skeleton card={false} count={5} height="0.9rem" list />
  {/if}
</details>
