<script>
  import placeholder from "$lib/zhen/cv-comps/400x400.png";
  import MakerspaceLogo from "$lib/zhen/cv-comps/MakerspaceLogo.png";
  import EposLogo from "$lib/zhen/cv-comps/EposLogo.png";
  import KhoraLogo from "$lib/zhen/cv-comps/KhoraLogo.jpg";
  import GrazperAILogo from "$lib/zhen/cv-comps/GrazperLogo.jpg";
  import YaaummaLogo from "$lib/zhen/cv-comps/YaaummaLogo.png";

  import IconAndText from "./IconAndText.svelte";
</script>

<div class="container">
  <div>
    <b style="text-align:left;"> Experience </b>
  </div>
  <div class="table">
    <div class="table-item">
      <IconAndText logo={YaaummaLogo}>
        <b>Full-stack</b><br />
        Yaaumma<br />
        <i>Feb 2025 - Now</i>
      </IconAndText>
    </div>
    <div class="table-item">
      <IconAndText logo={GrazperAILogo}>
        <b>Data annotator</b><br />
        GrazperAI<br />
        <i>Jul 2024 - Now</i>
      </IconAndText>
    </div>
    <div class="table-item">
      <IconAndText logo={MakerspaceLogo}>
        <b>3D printer manager</b> - Volunteer<br />
        Makerspace - kildevæld Kulturcenter<br />
        <i>Nov 2023 - Now</i>
      </IconAndText>
    </div>
    <div class="table-item">
      <IconAndText logo={EposLogo}>
        <b>Machine Learning Engineer</b> - Short term intern<br />
        Product design department - Epos<br />
        <i>Apr 2024 - Apr 2024</i>
      </IconAndText>
    </div>
    <div class="table-item">
      <IconAndText logo={KhoraLogo}>
        <b>Assistant</b> - Short term intern<br />
        Khora Virtual Reality<br />
        <i>Oct 2020 - Oct 2020</i>
      </IconAndText>
    </div>
  </div>
</div>

<style lang="scss">
  .container {
    display: grid;
    place-items: center;
    width: 90%;

    overflow: hidden;

    & > div:first-child {
      width: 100%;

      /* Bottom border stripe*/
      border-bottom: 1mm solid black;
    }
  }

  .table-item {
    padding: 2mm;

    &:not(:last-child) {
      border-bottom: 0.25mm solid #000000;
    }
  }
</style>
