<script lang="ts">
	import { str, strf } from "$lib/data/language";
	import Icon from "./Icon.svelte";

  /** The album. */
  export let album: Album | undefined = undefined;

  /** The title. Set to `undefined` (or leave unset) to use the title the album (if exists, `Galerie` otherwise). */
  export let title: string | undefined = undefined;

  /** The description. Set to `undefined` (or leave unset) to use the description the album (if exists, `Fotogalerie von Luca Bosin` otherwise). */
  export let description: string | undefined = undefined;

  /** The back link. Set to `undefined` (or leave unset) to hide the back link. */
  export let back: string | undefined = undefined;

  /** Base URL */
  export let base = '';

  $: displayTitle = title || (album && album.title ? $strf(album.title) : $str('gallery'));
  $: displayDescription = description || (album && album.description ? $strf(album.description) : $str('gallery-description'));
  $: displayAuthors = album && album.authors ? (
                Array.isArray(album.authors) ?
                  album.authors.join(', '):
                typeof album.authors === 'string' ?
                  album.authors:
                "unknown author"):
              "Luca Bosin";
  $: displayAuthorsTitle = album && album.authors ? (
                Array.isArray(album.authors) ?
                  album.authors.length > 1 ?
                    $str('authors'):
                    $str('author'):
                typeof album.authors === 'string' ?
                  $str('author'):
                "unknown author"):
              $str('author');
</script>

<header>
  <section>
    {#if back}
      <a href={back}>
        <Icon mdi="arrow-left" />
      </a>
    {/if}
    <h1>{displayTitle}</h1>
    <p>{displayDescription}</p>
  </section>
  {#if album}
    <section class="nospace">
      <dl>
        <dt>{displayAuthorsTitle}</dt>
        <dd>{displayAuthors}</dd>
        <dt>{$str('license')}</dt>
        <dd><a href={`${base}/license`} tabindex="0">{album.license}</a></dd>
      </dl>
      <menu>
        {#if album.allowDownload !== false}
          <li>
            <a href={`${base}/download`} tabindex="0">{$str('download-all')}</a>
          </li>
        {/if}
      </menu>
    </section>
  {/if}
</header>

<style>
  header {
    display: block;
    padding: 1.5rem 0;
  }

  section:not(.nospace) {
    padding-top: 1.5rem;
  }

  section {
    padding-right: 1.5rem;
    padding-bottom: 1.5rem;
    padding-left: 1.5rem;
    margin: 0 auto;
    max-width: 80rem;
  }

  h1 {
    font-size: 2.5rem;
    margin-bottom: 1.2rem;
    font-weight: 500;
  }

  dl {
    display: grid;
    grid-template-columns: auto 1fr;
    row-gap: .25rem;
    column-gap: 1rem;
  }

  dt {
    font-weight: 600;
  }

  dd a {
    color: inherit;
    border-radius: 3px;
  }

  dd a:focus {
    outline: 2px solid var(--main-text-color);
    outline-offset: 2px;
  }

  menu {
    list-style: none;
  }

  menu :has(> *) {
    padding-top: 1rem;
  }

  menu a {
    display: inline-block;
    padding: .5rem 1rem;
    border-radius: 8px;
    background-color: var(--interactive-bg-color);
    color: var(--interactive-text-color);
    transition: background-color .2s, color .2s;
    text-decoration: none;
  }

  menu a:hover {
    background-color: var(--interactive-bg-hover-color);
    color: var(--interactive-text-hover-color);
  }

  menu a:focus {
    outline: 2px solid var(--main-text-color);
  }
</style>
