<script lang="ts">
  import root from './Utility/root';
  import { env } from '$env/dynamic/public';
  import tooltip from './Tooltip/tooltip';
  import CompletedAnimeList from './List/Anime/CompletedAnimeList.svelte';
  import MangaListTemplate from './List/Manga/MangaListTemplate.svelte';
</script>

<div class="example-item card">
  <div class="item-content">
    <details class="list" open>
      <MangaListTemplate due={true} dummy displayUnresolved={false} />
    </details>
  </div>

  <div class="card item-description">
    <span class="big-text">
      Instantly view which manga on your lists have newly released chapters
    </span>

    <p>
      <a href={root('/')}>due.moe</a> will automatically check which manga on your lists have new
      chapters available. <a href={root('/')}>due.moe</a> will even alert you when you need to update
      your logged volume count if you are trailing behind.
    </p>

    <p>
      Separating concluded and publishing manga, <a href={root('/')}>due.moe</a> truly gives a one-of-a-kind
      experience when it comes to staying on top of your favourite titles.
    </p>

    <br />

    <p class="medium-text">
      <a href={root('/')}>due.moe</a> even supports checking for new light novels chapters!
    </p>

    <small class="bottom">This is simulated data including concluded manga.</small>
  </div>
</div>

<p></p>

<div class="example-item card">
  <div class="card item-description">
    <span class="big-text">Let's not forget anime!</span>

    <p>
      <a href={root('/')}>due.moe</a> will let you know which episodes you still need to watch, which
      anime you are caught up on, and planned anime which will begin to air soon.
    </p>

    <p>
      We'll always let you know when your next episodes are coming out with a countdown, and did we
      mention that all displayed countdowns are for <b>subtitled release times by default</b>? Cool,
      right?
    </p>

    <small class="bottom">This is simulated data including concluded anime.</small>
  </div>
  <div class="item-content">
    <details class="list" open>
      <CompletedAnimeList dummy />
    </details>
  </div>
</div>

<p></p>

<div class="example-item card">
  <div class="item-content">
    <span class="big-text">Tools & More!</span>

    <p>
      <a href={root('/')}>due.moe</a> also offers a suite of helpful tools to make your life on AniList
      that much easier. Some examples include &#8230;
    </p>

    <ul>
      <li><a href={root('/wrapped')}>AniList Wrapped</a> — Your Year on AniList</li>
      <li>
        Badge Wall — A unified badge collection experience for AniList
        <blockquote style="margin: 0 0 0 1.5rem;">
          Easily display all of your earned badges in a single place, with your Anime Watching Club
          (AWC) badges automatically included!
        </blockquote>
      </li>
      <li>
        <a href={root('/schedule')}>Subtitle Schedule</a> — A release calendar which displaying the
        scheduled <b>subtitle release times</b> for simulcast anime!
      </li>
      <li>
        <a href={root('/birthdays')}>Today's Character Birthdays</a> — A calendar to help you stay up
        to date with your favourite characters' birthdays, featuring an even bigger character database
        than AniList!
      </li>
      <li>
        <a href={root('/tools/sequel_spy')}>Sequel Spy</a> — Find media with prequels you haven't seen
        for any simulcast season
      </li>
    </ul>

    <br /><br />

    <span class="big-text">
      <a
        href={`https://anilist.co/api/v2/oauth/authorize?client_id=${env.PUBLIC_ANILIST_CLIENT_ID}&redirect_uri=${env.PUBLIC_ANILIST_REDIRECT_URI}&response_type=code`}
        onclick={() => {
          localStorage.setItem(
            'redirect',
            window.location.origin + window.location.pathname + window.location.search
          );
        }}>Log in</a
      > with AniList to get started!
    </span>
  </div>

  <div class="item-description demo">
    <a href="https://i.imgur.com/yLSBz2f.mp4" target="_blank">
      <img src="https://i.imgur.com/yLSBz2f.gif" alt="Demo" title="Demo" use:tooltip />
    </a>
  </div>
</div>

<style>
  .example-item {
    display: flex;
    flex-wrap: wrap;
  }

  .demo {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .demo img {
    border-radius: 8px;
    margin: 0.15rem;
    width: 100%;
  }

  .item-content {
    flex: 1 1 50%;
  }

  .item-description {
    flex: 1 1 50%;
  }

  .medium-text {
    font-size: 1.125rem;
  }

  .big-text {
    font-size: 1.25rem;
  }

  .bottom {
    position: absolute;
    bottom: 1em;
  }
</style>
