<script lang="ts">
import Spacer from "$lib/Layout/Spacer.svelte";
import Senpy from "$lib/Data/senpy";
import HeadTitle from "$lib/Home/HeadTitle.svelte";
import Message from "$lib/Loading/Message.svelte";
import Skeleton from "$lib/Loading/Skeleton.svelte";
import root from "$lib/Utility/root";
import "$styles/girls.scss";
</script>

<HeadTitle route="Anime Girls Holding Programming Books" path="/girls" />

<div class="card">
  <div class="split">
    <div>
      {#await Senpy.getRandomImage()}
        <Message message="Loading image ..." />

        <Skeleton grid={true} count={1} width="49%" height="16.25em" />
      {:then randomImage}
        <div class="preview">
          <a href={randomImage.image} target="_blank">
            <img src={randomImage.image} alt="A random anime girl holding a programming book" />
          </a>
        </div>
      {/await}
    </div>
    <div>
      The Senpy Club <span class="opaque">|</span> Anime Girls Holding Programming Books

      <Spacer />

      <ul>
        <li>
          <a href="https://github.com/senpy-club/frontend-next" target="_blank"
            >Front-end Version 1.</a
          > — Similar functionality to this page, but with a different design
        </li>
        <li>
          <a href="https://github.com/senpy-club/api-worker" target="_blank">REST API</a> — The Official
          Senpy Club REST API
        </li>
        <li>
          <a href="https://github.com/senpy-club/cli" target="_blank">Command-line Interface</a> — Access
          The Senpy Club API from your terminal (and export to files too)
        </li>
        <li>
          <a href="https://docs.rs/senpy" target="_blank"><code>senpy-rs</code></a> — Rust bindings to
          The Senpy Club API
        </li>
        <li>
          <a href="https://docs.rs/senpy-ffi" target="_blank"><code>senpy-ffi</code></a> — Access The
          Senpy Club API from any programming language (with FFI support)
        </li>
        <li>
          <a href="https://github.com/senpy-club/graphql-api" target="_blank">GraphQL API</a> —
          Official GraphQL access to The Senpy Club API (<a
            href="https://graphql.senpy.club/playground"
            target="_blank"
          >
            Playground</a
          >)
        </li>
      </ul>
    </div>
  </div>
</div>

<Spacer />

<details class="languages" open>
  <summary>Languages</summary>

  {#await Senpy.getLanguages()}
    <Message message="Loading languages ..." />

    <Skeleton
      card={false}
      count={10}
      pad={false}
      height={'0.9rem'}
      width={'100%'}
      list={true}
      grid={false}
    />
  {:then languages}
    <ul>
      {#each languages as language}
        <li><a href={root(`/girls/${encodeURIComponent(language)}`)}>{language}</a></li>
      {/each}
    </ul>
  {/await}
</details>

<style lang="scss">
  @use "breakpoints" as *;

  img {
    border-radius: 8px;
    width: 25vh;
  }

  .languages ul {
    columns: 6;
  }

  @media (max-width: $bp-xl) {
    .languages ul {
      columns: 5;
    }
  }

  @media (max-width: $bp-lg) {
    .languages ul {
      columns: 4;
    }
  }

  @media (max-width: $bp-md) {
    .languages ul {
      columns: 3;
    }
  }

  @media (max-width: $bp-sm) {
    .languages ul {
      columns: 2;
    }
  }

  .split {
    display: flex;
    gap: 1em;
  }
</style>
