<script>
    // 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";
</script>

<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-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;
                > * {
                    pointer-events:all;
                }
            }
        }
    }

    .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>