<script>
    import { onMount } from 'svelte'
    import { site, pageReady, pageTransition } from '../utils/store'

    // 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'
    pageTransition.onAnimationEnd = animateIn


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

<svelte:head>
	<title>{$site.seo_name} - Credits</title>
    <meta name="description" content={$site.credits_text}>
    <SocialMetas
        url="https://housesof.world/credits"
        title="{$site.seo_name} - Credits"
        description={$site.credits_text}
        image={$site.seo_share_image.full_url}
    />
</svelte:head>

<section class="page">
    <div class="wrap">
        <div class="page__top page__part">
            <a href="/" class="button-control button-control--pink 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>

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

        <InteractiveGlobe type="part" />
    </div>

    <Footer />
</section>
