<script lang="ts">
  import AboutMe from "$elem/AboutMe.svelte";
  import Jobs from "$elem/Jobs.svelte";
  import Menu from "$elem/Menu.svelte";
  import Training from '$elem/Training.svelte'
  import Contacts from '$elem/Contacts.svelte'
  import Data_jobs from '../model/jobs.json';
  import Data_portfolio from '../model/portfolio.json';
  import type { Schema } from "src/model/job";
  let jobs:Schema[] = Data_jobs as Schema[];
  let portfolio:Schema[] = Data_portfolio as Schema[];
  let currentLanguage: string ='it';
  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={()=>{ currentLanguage = 'it'}}>IT</a>  <a href="#" on:click={()=>{currentLanguage = 'en'}}>EN</a> </div>

  <div class="menu">
    <Menu {currentLanguage}/>
  </div>
  <div class="about" id="home">
    <AboutMe {currentLanguage}/>
  </div> 
  <div class="content" id="jobs">
    <h2>{titles.job[currentLanguage]}</h2>
    <Jobs jobs={jobs} {currentLanguage}/>
  </div>
  <div class="content" id="training">
    <h2>{titles.school[currentLanguage]}</h2>
    <Training {currentLanguage} />
  </div> 
  <div class="content" id="portfolio">
    <h2>{titles.portfolio[currentLanguage]}</h2>
    <Jobs jobs={portfolio} {currentLanguage}/>
  </div> 
  <div class="content" id="contacts">
    <h2>{titles.contacts[currentLanguage]}</h2>
    <Contacts/>
  </div>
</main>
<style lang="scss">
  @import "./static/colors.scss";
  .maindiv {
    color: $rich-black-fogra-29;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }

  .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 ;
  }

  .about{
    margin-top: 4vh;
    margin-bottom: 4vh;
  }
  .content{
    
    margin-bottom: 4vh;
  }

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

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

</style>