<script lang="ts">
  import MarkdownIt from 'markdown-it';
  const md = new MarkdownIt({
    html:true,
    xhtmlOut:true,
    typographer:  true,
    breaks: true,
    linkify: true
  });
  import type { Schema } from 'src/model/job';
  export let currentLanguage = '';
  export let jobs:Schema[] = [];
</script>
<div class="jobsContainer">
  {#each jobs as job }
    <div class="job container">
      <h3>{job.title[currentLanguage]}</h3>
      <div class="job-content">
        <div class="images-container">
          {#each job.images as image }
            <img src="{image}" alt="{image}"/>
          {/each}
        </div>
        <div class="text-content">
          {@html md.render(job.content[currentLanguage])}
        </div>
      </div>
      <div class="added-info">
        {#if job.year.lenght!=0}
          Date: {job.year.start}{#if job.year.end.length!=0};  {job.year.end} {/if}
        {/if}
        <div>
        {#if job.collaborators.length!=0}
          Collab:
        {/if}
        {#each job.collaborators as collaborator, index }
            <a href="{collaborator.ref}">{collaborator.name} {collaborator.surname}</a>{index!=job.collaborators.length-1?', ':''}
        {/each}
        </div>
        <div>
        {#if job.languages.length!=0}
          Lang:
        {/if}
        {#each job.languages as language,index }
          {language}{index!=job.languages.length-1?', ':''}
        {/each}
        </div>
        <div>
        {#if job.tecnologies.length!=0}
          Tech:
        {/if}
        {#each job.tecnologies as tecnology, index }
          {tecnology}{index!=job.tecnologies.length-1?', ':''}
        {/each}
        </div>
      </div>
    </div>
  {/each}
</div>
<style  lang="scss">
  @import './static/colors.scss';
  .jobsContainer{
    margin: auto;
    background-color:$steel-blue;
    display: flex;
    flex-wrap: wrap;
    border-radius: 10px;
    width: 90%;
    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: 1vh;
  }
  .job{
    background-color: $cultured;
    text-align: center;
    width: 98%;
    border-radius: 10px;
    margin-bottom: 1vh;
    padding: 1vh;
    background-color: $cultured;
    border-style: solid;
    border-width: 0.1px;
  }
  .job:last-child{
    margin-bottom: 0px;
  }

  .job-content{
    padding: 2vh;
  }
  
  .added-info{
    font-size: 13px;
    text-align: left;
  }

  .text-content{
    margin: auto;
    text-align: justify;
    width: 80%;
  }

  

  img{
    width: auto;
    max-width: 80%;
    max-height: 20%;
    background-color: $rich-black-fogra-29;
    text-align: center;
  }

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

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