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

  export function changeLanguage(language = 'it'){
    currentLanguage = language
  }
</script>
<div class="extraContainer">
  {#each portfolio as element }
    <div class="element">
      <h3>{element.title[currentLanguage]}</h3>
      <div class="content">
        <div class="images">
          {#each element.images as image}
            <img src={image} alt="{element.title[currentLanguage].toString()}" />
          {/each}
        </div>
        <div class="element-text">
          {@html md.render(element.content[currentLanguage])}
        </div>
        <div class="added-info">
          <p>{#each element.languages as language,index }
            {language}{index!=element.languages.length-1?', ':''}
          {/each}</p>
          
          <p>{#each element.tecnologies as tecnology, index }
            {tecnology}{index!=element.tecnologies.length-1?', ':''}
          {/each}</p>
        </div>
        <div class="added-info">
          <p>{#each element.collaborators as collaborator, index }
             <a href="{collaborator.ref}">{collaborator.name} {collaborator.surname}</a>{index!=element.collaborators.length-1?', ':''}
          {/each}</p>
        </div>
      </div>
    </div>
  {/each}
</div>
<style lang="scss">
  @import '/node_modules/@fortawesome/fontawesome-free/css/all.css';
  @import './static/colors.scss';
  .extraContainer{
    margin: auto;
    background-color:$steel-blue;
    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: 1.5vh;
    padding-bottom: 1.5vh;
  }

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

  .images{
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    margin: auto;
  }

  .images>img{
    margin: auto;
    margin-bottom: 2vh;
    max-width: 100%;
    // max-height: 250px;
  }

  .content{
    width: 90%;
    margin: auto;
    text-align: center;
  }

  .added-info{
    font-size: 15px;
  }

  .element-text{
    text-align: justify;
  }

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

    // .job-content{
    //   flex-wrap: unset;
    // }

    // .text-content{
    //   width: 35vw;
    // }
  }
</style>