<script lang="ts">

  // Left side
  import NameAndImage from "../CompsRev3/NameAndImage.svelte";
  import ShortProfile from "../CompsRev3/ShortProfile.svelte";
  import CombinedContacts from "../CompsRev3/CombinedContacts.svelte";
  import LinkedInQR from "../CompsRev3/LinkedInQR.svelte";

  // Right side
  import Profile from "../CompsRev3/Profile.svelte";
  import Education from "../CompsRev3/Education.svelte";
  import Experience from "../CompsRev3/Experience.svelte";
  import BiggestFlex from "../CompsRev3/BiggestFlex.svelte";
  import TableOfProjects from "../CompsRev3/TableOfProjects.svelte";

  // Decorations
  import LeftTopDecor from "../CompsRev3/LeftTopDecor.svelte";
  import BottomRightDecor from "../CompsRev3/BottomRightDecor.svelte";
  import AlexWatermark from "../CompsRev3/AlexWatermark.svelte";
  import RepeatedSkills from "../CompsRev3/RepeatedSkills.svelte";


  // Discord embed
  import preveiwImage from "$lib/zhen/cv-comps/EposCvPreveiw.png";

  // Print detection setup
  import { onMount } from "svelte";
  onMount(() => {
    // Check if the query parameter exists in the URL
    const urlParams = new URLSearchParams(window.location.search);
    const hideOnPrintParam = urlParams.get("hideOnPrint");

    // If the query parameter is not detected, reload the page with the parameter added
    if (!hideOnPrintParam) {
      window.location.href = `${window.location.href}?hideOnPrint=1`;
    }
  });

  function getFormattedDate(): string {
    const date = new Date();
    const day = String(date.getDate()).padStart(2, "0");
    const month = String(date.getMonth() + 1).padStart(2, "0");
    const year = date.getFullYear();

    return `${day}-${month}-${year}`;
  }
</script>

<title>Zhentao Wei's CV {getFormattedDate()}</title>
<meta content="Zhentao Wei's CV" property="og:title" />
<meta
  content="This CV is made completely with svelte + html + css + js"
  property="og:description"
/>
<meta content={preveiwImage} property="og:image" />
<meta content="#bdd6ee" data-react-helmet="true" name="theme-color" />

<div class="cv-info-container hide-on-print">
  <div>
    Under here is my CV rev1 for an application made entirely in HTML and CSS.
    The page is designed to be saved as PDF. This can be done by pressing <div
      class="keyboard-key"
    >
      P
    </div>
    +
    <div class="keyboard-key">CTRL</div>
    , then set scaling to 100% and no margins. Lastly, select save to PDF or print.
    <br />
    <br />
    I have to sadly recommend chrome for this process. Firefox somehow messes with
    the quality of the PDF :(
  </div>
</div>

<div class="NotoSans cv-config cv-container-container include-in-print">
  <div class="cv-container sections decorations">
    <div id="left-section" class="bg-grid-cv">
      <LeftTopDecor />
      <BottomRightDecor Style="pointer-events: none;" />
      <div
        class="absolute rotate-12 width-[10cm] h-full right-[15cm]"
        style="background-color: #bdd6ee"
      ></div>
      <div class="text-[var(--left-text-color)] pointer-events-none">
        <div class="pointer-events-auto flex flex-col justify-center w-full items-center">
          <NameAndImage />
          <div class="py-2"></div>
          <ShortProfile />
          <div class="py-2"></div>
          <CombinedContacts />
          <div class="py-2"></div>
          <LinkedInQR />
        </div>
      </div>
    </div>
    <div id="leftSectionSeperator"></div>
    <div id="right-section" class="text-[var(--right-text-color)]">
      <AlexWatermark Style="pointer-events: none;" />
      <div id="TopRightSkillsText">
        <RepeatedSkills
          class="cozette-force"
          targetTextHeight={30}
          targetTextWidth={75}
        />
      </div>
      <div>
        <Profile />
        <BiggestFlex />
        <TableOfProjects />
        <Experience />
        <Education />
      </div>
    </div>
  </div>
</div>

<style lang="scss">

  .cv-config * {
    --left-text-color: #eeeeee;
    --left-line-color: #999999;

    --left-decor-text-color: #eeeeee;
    --left-decor-line-color: #999999;

    --qr-color: #999999;

    --left-grid-line-color: #ffffff;
    --left-grid-bg-color: #000000;
    --left-grid-opacity: 0.1;
    --left-grid-size: 10px;


    --right-text-color: #333333;
  }

  .corner-border-container {
    background-color: var(--left-grid-bg-color);
    background-image:
      linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
      linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
      linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
      linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color));
    background-size: 
      30px 4px,   /* top-left horizontal */
      4px 30px,   /* top-left vertical */
      30px 4px,   /* bottom-right horizontal */
      4px 30px;   /* bottom-right vertical */
    background-repeat: no-repeat;
    background-position:
      top left,
      top left,
      bottom right,
      bottom right;
  }

  .bg-grid-cv {
    background:
      linear-gradient(-90deg, rgba(255, 255, 255, var(--left-grid-opacity)) 1px, transparent 1px),
      linear-gradient(rgba(255, 255, 255, var(--left-grid-opacity)) 1px, transparent 1px), var(--left-grid-line-color);
    background-size:
      var(--left-grid-size) var(--left-grid-size),
      var(--left-grid-size) var(--left-grid-size),
      80px 80px,
      80px 80px,
      80px 80px,
      80px 80px,
      80px 80px,
      80px 80px;
    background-color: var(--color-base-100);
  }

  .cv-info-container {
    height: 40mm;
    background-color: #2b2a2a;
    display: flex;
    justify-content: center;
    align-items: center;

    .keyboard-key {
      display: inline;
      padding-left: 1mm;
      padding-right: 1mm;

      border-radius: 2mm;

      background-color: #3e3d3d;
    }

    > div {
      width: 80%;
      height: 60%;
    }
  }

  .cv-container-container {
    width: 100%;
    height: 100%;

    display: grid;
    place-items: center;
  }


  .cv-container {
    width: 210mm;
    height: 297mm;

    background-color: #eeeeee;

    overflow: visible;
    display: flex;
    padding: auto;
  }

  .sections {
    // Shared between sections
    > div {
      display: grid;
      z-index: 0;

      // Needed to cuttoff the extra decoration
      position: relative;
      overflow: hidden;
    }

    #left-section {
      // background-color: #bdd6ee;

      > div:last-child {
        z-index: 1;
        width: 100%;

        left: 0;

        display: grid;
        place-items: center;

        padding-top: 30mm;
        padding-bottom: 30mm;
      }
    }

    #right-section {
      width: calc(100% / 3 * 2);

      > div:last-child {
        z-index: 1;
        width: 100%;

        left: 0;

        display: grid;
        place-items: center;
        row-gap: 6mm;

        padding-top: 45mm;
        padding-bottom: 30mm;

        // Disable interactivity for padding
        // pointer-events: none;
      }
    }
  }

  .decorations {
    #leftSectionSeperator {
      position: relative;
      height: 100%;
      width: 0%;
      z-index: 1;
      overflow: visible;
      > div {
        position: absolute;
        height: 100%;
        width: 5mm;
        z-index: 1;
        background: linear-gradient(90deg, #3636364f, #00000000);
      }
    }
    > div {
      #TopRightSkillsText {
        position: absolute;
        z-index: 0;

        display: grid;
        place-items: center;
        vertical-align: top;
        width: 100%;

        place-content: center;

        padding: 0;
        height: 50mm;

        mask-image: linear-gradient(180deg, #000 0%, transparent 110%);

        color: rgb(190, 190, 190);
        font-family: "CozetteVector";
        font-size: x-large;
      }

    }
  }
</style>
