<script>
    import { stores } from '@sapper/app'
    import { site, currentLocation } from 'utils/store'
    // Components
    import LinkTranslate from 'atoms/LinkTranslate'
    import Switcher from 'molecules/Switcher'

    // Variables
    const { page } = stores()
</script>

<footer class="footer">
    <div class="wrap">
        <div class="footer__left">
            <Switcher radius="30" />
        </div>

        <nav class="footer__right" >
            <ul>
                <li>
                    <ul>
                        <li>
                            <LinkTranslate href="/subscribe" text="Keep Updated" active={$page.path.includes('subscribe')} rel="prefetch" noScroll />
                        </li>
                        <li>
                            <LinkTranslate href="/credits" text="Credits" active={$page.path.includes('credits')} rel="prefetch" noScroll />
                        </li>
                        {#if $site}
                        <li class="instagram">
                            <LinkTranslate href="https://instagram.com/{$site.instagram}" text="Instagram" target="_blank" rel="noopener">
                                <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" fill="#fff">
                                    <path d="M11.245 0c1.615.005 2.002.02 2.878.06 1.064.048 1.791.217 2.427.464a4.902 4.902 0 0 1 1.772 1.154 4.902 4.902 0 0 1 1.153 1.771c.247.636.416 1.363.465 2.428.042.914.056 1.295.06 3.095v2.055c-.004 1.8-.018 2.182-.06 3.096-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 0 1-1.153 1.772 4.902 4.902 0 0 1-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.049-1.407.06-4.123.06s-3.057-.011-4.124-.06c-1.064-.049-1.79-.218-2.427-.465a4.902 4.902 0 0 1-1.771-1.153A4.902 4.902 0 0 1 .524 16.55c-.247-.636-.416-1.363-.465-2.427C.02 13.247.005 12.86 0 11.245v-2.49c.005-1.616.02-2.002.06-2.878.048-1.065.217-1.792.464-2.428a4.902 4.902 0 0 1 1.154-1.771A4.902 4.902 0 0 1 3.448.524C4.086.277 4.813.108 5.877.06 6.753.02 7.14.005 8.754 0zm-.204 1.802H8.958c-1.739.003-2.101.016-3 .057-.974.045-1.504.208-1.856.345-.467.181-.8.398-1.15.748-.35.35-.567.683-.748 1.15-.137.352-.3.882-.345 1.857-.04.898-.054 1.26-.057 2.999v2.083c.003 1.739.016 2.101.057 3 .045.975.208 1.504.345 1.857.181.466.398.8.748 1.15.35.35.683.566 1.15.747.352.137.882.3 1.857.345 1.054.048 1.37.058 4.04.058h.288c2.407 0 2.738-.012 3.754-.058.975-.045 1.504-.208 1.857-.345.466-.18.8-.398 1.15-.748.35-.35.566-.683.747-1.15.137-.352.3-.881.345-1.856.048-1.055.058-1.371.058-4.041v-.288c0-2.407-.012-2.738-.058-3.753-.045-.975-.208-1.505-.345-1.857a3.098 3.098 0 0 0-.748-1.15 3.099 3.099 0 0 0-1.15-.748c-.352-.137-.881-.3-1.856-.345-.899-.04-1.261-.054-3-.057zM10 4.864a5.135 5.135 0 1 1 0 10.271 5.135 5.135 0 0 1 0-10.27zm0 1.802a3.334 3.334 0 1 0 0 6.667 3.334 3.334 0 0 0 0-6.667zm5.338-3.205a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4z" fill-rule="evenodd"/>
                                </svg>
                            </LinkTranslate>
                        </li>
                        {/if}
                    </ul>
                </li>
                <li class="by">
                    <a href="https://cetrucflotte.com" title="A project by Cetrucflotte" target="_blank" rel="noopener">
                        <img src="/img/logo-ctf.svg" alt="Logo of Cetrucflotte">
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</footer>
