<script lang="ts">
    // Left side
    import NameAndImage from "../Comps/NameAndImage.svelte";
    import ShortProfile from "../Comps/ShortProfile.svelte"
    import CombinedContacts from "../Comps/CombinedContacts.svelte"
    import LinkedInQR from "../Comps/LinkedInQR.svelte";
    
    // Right side
    import Profile from "../Comps/Profile.svelte";
    import Education from "../Comps/Education.svelte";
    import Experience from "../Comps/Experience.svelte";

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

    // Cedit
    import LinkToSource from "../Comps/LinkToSource.svelte";

    // 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`;
        }
    });

</script>

<div class="cv-info-container hide-on-print">
    <div>
        Under here is my CV for an Epos application. This page has been able 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="cv-container-container include-in-print">
    <div class="cv-container sections decorations">
        <div id="left-section">
            <LeftTopDecor/>
            <BottomRightDecor/>
            <div>
                <NameAndImage/>
                <ShortProfile/>
                <CombinedContacts/>
                <LinkedInQR/>
            </div>
        </div>
        <div id="right-section">
            <AlexWatermark/>
            <div id="TopRightSkillsText">
                <RepeatedSkills targetTextHeight={30} targetTextWidth={75}/>
            </div>
            <div id="Credit">
                <LinkToSource/>
            </div>
            <div>
                <Profile/>
                <Experience/>
                <Education/>
            </div>
        </div>
    </div>
</div> 

<style lang="scss">
    .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%;
        }
    }

    @media print {
    .hide-on-print {
        display: none;
    }
}

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

        display: grid;
        place-items: center;
    }

    .cv-container-container * {
        color: black; // Set all text black
    }

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

        background-color: #eeeeee;

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

    .include-in-print { &, & * {
        -webkit-print-color-adjust:exact !important;
        print-color-adjust:exact !important;
    }}

    .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;
            width: calc(100% / 3 * 1);

            filter: drop-shadow(1mm 1mm 1mm #00000042);

            > 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 {
      > 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;
        }

        #Credit {
            position: absolute;
            z-index: 0;

            display: flex;
            align-self: flex-end;
        }
      }
    }
</style>