<script>
    import { onMount } from 'svelte'
    import { site } from '../store'

    // Dependencies
    import AOS from 'aos'

    // 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'

    // Categories
    $: credits = $site.credits_list


    /*
    ** Run code on browser only
    */
    onMount(() => {
        // Scroll apparitions
        if (process.browser) {
            AOS.init()
        }
    })
</script>

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

<section class="page">
    <div class="wrap">
        <div class="page__top">
            <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 style-description">
            <p>{$site.credits_text}</p>
        </div>

        <div class="page__list">
            {#each credits 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>
