<script lang="ts">
  import MarkdownIt from 'markdown-it'
  const md = new MarkdownIt({
    html:true,
    xhtmlOut:true,
    typographer:  true,
  });
  import data from '../model/training.json'
  import type { Schema } from 'src/model/job';
  export let currentLanguage = 'it'
  const training:Schema[] = data as Schema[];

  export function changeLanguage(language = 'it'){
    currentLanguage = language
  }
</script>
<div class="trainingContainer">
  <div class="training">
    {#each training as school }
      <div class="element">
        <img src="{school.images[0]}" alt="school logo" />
        <div>
          <h4>{school.title[currentLanguage]}</h4>
          <p>{school.content[currentLanguage]}</p>
          <p>{school.year.start} - {school.year.end}</p>
        </div>
      </div>
    {/each}
  </div>
</div>
<style lang="scss">
  @import './static/colors.scss';
  .trainingContainer{
    margin: auto;
    background-color:$navajo-white;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    height: auto;
    font-size: 1.1em;
    border-radius: 10px;
    width: 95%;
    border-radius: 10px;
    box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
    -webkit-box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
    -moz-box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
    padding-top: 1vh;
    padding-bottom: 1vh;
  }

  .element{
    padding: 2vw;
    width: auto;
    display: flex;
    align-items: center;
  }

  .element>img{
    width: 35%;
  }

  .element>div{
    max-width: 50%;
    margin: auto;
    justify-self: end;
  }
  
  .element>div>p{
    text-align: center;
    overflow-wrap: break-word;
    text-align: justify;
  }

  .training{
    background-color: $cultured;
    text-align: center;
    width: 98%;
    border-radius: 10px;
    // margin-bottom: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
    padding-top: 2vh;
    padding-bottom: 2vh;
    background-color: $cultured;
    border-style: solid;
    border-width: 0.1px;
  }

  @media screen and (min-width: 600px) {
    .trainingContainer{
      display: flex;
      height: auto;
      max-width: $cv-max-width;
      width: 80vw;
    }
  }
</style>