<script lang="ts">
    import RepeatedSkills from "../../cv/Comps/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 LinkedIn banner {getFormattedDate()}</title>
<meta content="Zhentao Wei's LinkedIn banner" property="og:title" />
<meta content="This Linkedin banner is made completely with 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 Linkedin banner. This page has been able to be saved as PDF, and the banner can be extracted as an image fro mthe 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="container include-in-print">
    <div>
        <RepeatedSkills targetTextHeight={70} targetTextWidth={175}/>
    </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;
            }
    }

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

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

        display: grid;
        place-items: center;

        > div:nth-child(1) {
            width:  419.1mm;
            height: 104.775mm;

            background-color: #383636;
            overflow: hidden;

            display: grid;
            place-content: center;

            font-size: 10mm;
            font-family: cozetteVector;
            color: #d4d4d4;

            filter: blur(0); // Force save as image
        }

        > div:nth-child(2){
            height: 0;
        }
    }
</style>