<script>
  import Navbar from "$components/navbar.svelte";
  import Footer from "$components/footer.svelte";
  import Header from "$components/header.svelte";
  import Service from "$components/service.svelte";
  import Head from "$components/head.svelte";
  import Card from "$components/card.svelte";

  import { locale, _ } from "$lib/locale.js";
  import api from "$lib/api.js";
  let { data } = $props();

  // filtered list of services that have descriptions for the current locale
  let services = $derived(
    data.services.filter(
      s =>
        s.desc[$locale.code] !== "" &&
        s.desc[$locale.code] !== null &&
        s.desc[$locale.code] !== undefined
    )
  );
</script>

<Head title="services" desc="my self-hosted services and projects" />
<Navbar />
<Header picture="cool" title={$_("services.title")} />
<main>
  <Card>
    <p>{@html $_("services.desc")}</p>
    <br />
    <p>
      {@html $_("services.feed", {
        links: [api.join("/news/" + $locale.code)],
      })}
    </p>
  </Card>
  <div class="services">
    {#if services.length === 0}
      <h3>{$_("services.none")}</h3>
    {:else}
      {#each services as service}
        <Service {service} />
      {/each}
    {/if}
  </div>
</main>
<Footer />

<style>
  main {
    background: var(--black-1);
    flex: 1;
    padding: 40px;
  }

  main .services {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 28px;
    color: var(--white-3);
  }
</style>
