<script>
    import { onMount } from 'svelte'
    import { stores } from '@sapper/app'
    import { site, pageReady, pageAnimation } from 'utils/store'
    // Dependencies
    import Lazy from 'svelte-lazy'
    // Components
    import IconArrow from 'atoms/IconArrow'
    import TitleSite from 'atoms/TitleSite'
    import LinkTranslate from 'atoms/LinkTranslate'
    import InteractiveGlobe from 'molecules/InteractiveGlobe'
    import Footer from 'organisms/Footer'
    import SocialMetas from 'utils/SocialMetas'
    // Animations
    import { animateIn } from 'animations/page'

    // Variables
    const { page } = stores()
    pageAnimation.set(animateIn)
    const pageTitle = `${$site.seo_name} - Credits`


    /*
    ** Run code when mounted
    */
    onMount(() => {
        // Page is loaded
        pageReady.set(true)
    })
</script>

<svelte:head>
	<title>{pageTitle}</title>
    <meta name="description" content={$site.credits_text}>
    <SocialMetas
        url="https://{$page.host}{$page.path}"
        title="{pageTitle}"
        description={$site.credits_text}
        image={$site.seo_share_image.full_url}
    />
</svelte:head>

<main class="housesof page--credits" class:is-transitioning={!$pageReady}>
    <section class="page">
        <div class="wrap">
            <div class="page__top">
                <a href="/" class="button-control button-control--lightpink dir-left">
                    <IconArrow direction="left" color="#fff" class="icon" />
                    <IconArrow direction="left" color="#fff" class="icon" hidden="true" />
                </a>

                <TitleSite />
            </div>

            <div class="page__description page__part style-description">
                <p>{$site.credits_text}</p>
            </div>

            {#if $site.credits_list}
            <div class="page__list page__part">
                {#each $site.credits_list as { title, credits }}
                <div class="page__category">
                    <h2 class="title-category">{title}</h2>
                    {#each credits as { name, role, website }, i}
                    <dl>
                        <dt class="style-location">
                            {#if website}
                            <LinkTranslate href={website} text={name} target="_blank" rel="noopener" />
                            {:else}
                            {name}
                            {/if}
                        </dt>
                        <dd class="style-caps style-caps style-caps--transparent">{role}</dd>
                    </dl>
                    {/each}
                </div>
                {/each}
            </div>
            {/if}
        </div>

        {#if process.browser}
        <Lazy offset={window.innerHeight} fadeOption={null}>
            <InteractiveGlobe type="part" opacity="0.5" />
        </Lazy>
        {/if}

        <Footer />
    </section>
</main>