<script lang="ts">
  import Menu from "$elem/menu.svelte";
  import Portfolio from '$elem/portfolio.svelte';
  let menuHandler: Menu;
  let portfolioHandler: Portfolio;
  let currentLanguage: string ='it';
  function changeLanguage(language:string){
    console.log(language);
    menuHandler.changeLanguage(language);
    portfolioHandler.changeLanguage(language);
  }
  let titles = {home:{it:"Home",en:"Home"},
              job:{it:"Esperienze",en:"Experiences"},
              school:{it:"Formazione",en:"Training"},
              contacts:{it:"Contatti",en:"Contacts"},
              portfolio:{it:"Portfolio",en:"Portfolio"}}
</script>
<main class="maindiv">
  <!-- svelte-ignore a11y-invalid-attribute -->
  <div class="language-selector" id="language-selector"> <a href="#" on:click={()=>{changeLanguage('it')}}>IT</a>  <a href="#" on:click={()=>{changeLanguage('en')}}>EN</a> </div>
  <div class="menu">
    <Menu bind:this="{menuHandler}"/>
  </div>
  <div class="content" id="portfolio">
    <h2>{titles.portfolio[currentLanguage]}</h2>
    <Portfolio bind:this="{portfolioHandler}"/>
  </div>
</main>
<style lang="scss">
  @import "./static/colors.scss";
  .maindiv {
    background-color: $middle-blue-green;
    margin: 0;
    color: $rich-black-fogra-29;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    height: 100vh;
    overflow: auto;
    // padding-bottom: 3vh;
  }

  .language-selector {
    width: 100%;
    color: $rich-black-fogra-29;
    display: flex;
    justify-content: flex-end;
    background-color: $steel-blue;
  }

  .language-selector > a, .language-selector > a:visited {
    text-decoration: none;
    color: $rich-black-fogra-29;
    font-size: 16px;
    margin-right: 20px ;
  }
  
  .content{
    // padding-top: 2vh;
    margin-bottom: 2vh;
  }

  h2{
    width: 100%;
    text-align: center;
  }

  .menu {
    width: 100%;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    bottom: 0;
    top: 0;
  }

</style>