<script setup>

    const props = defineProps(['unitydate', 'gregdate']);

</script>



<style>

.todayblock {
    display: flex; flex-direction: column; align-items: center; gap: 1.2rem;
    margin-left: auto; margin-right: 1.2rem;
}

.todayis{
    font-size: 2.4rem;
    text-align: right;
    margin-left: auto;

}

.datewrap {
    display: flex;
}

.dateblock {
    display: grid;
    grid-template-columns: 6rem repeat(2, auto) 2.4rem repeat(2, auto);
    row-gap: .6rem;
}

.gregblock, .unityblock, .labelblock {
    display: grid; grid-template-columns: subgrid;
    grid-column: 1 / 7;
    text-align: center;
    gap: .6rem;
    align-items: center;

}

.unityblock {
    font-size: 2.4rem;
}

.unitylabel, .greglabel {
    font-size: 1rem;
    text-align: right;
    margin-right: .6rem;
}

.labelspan {
    text-align: center;
    margin: auto;
}

.monthlabel {
    width: fit-content;
    justify-self: center;
}

@media (max-width: 720px) {

    .unitylabel, .greglabel {
        margin: 0;
        font-size: .9rem;
    }
    
    .gregblock, .unityblock, .labelblock {
        gap: .3rem;
        
    }

    .blockspan {
        margin-left: .3rem; margin-right: .3rem;
    }

    .todayblock {
        margin: 0;
    }

    .todayis {
        margin-left: 0;
        text-align: center;
    }

    .datewrap::after {
        content: '';
        width: 6rem;
    }

}

</style>


<template>

    <div class="todayblock">
        <span class="todayis">Today's date is</span>
        <div class="datewrap">
            <div class="dateblock">
                <div class="gregblock">
                    <span class="greglabel">Gregorian</span>
                    <span class="blockspan">{{ gregdate.getFullYear() }}</span>
                    <span class="blockspan"></span>
                    <span class="blockspan">{{ gregdate.getMonth() + 1 }}</span>
                    <span class="blockspan"></span>
                    <span class="blockspan">{{ gregdate.getDate() }}</span>
                </div>
                <div class="unityblock">
                    <span class="unitylabel">Unity</span>
                    <span class="unityyear">{{ unitydate.year }}</span>
                    <span class="blockspan">/</span>
                    <span class="blockspan">{{ unitydate.month + 1 }}</span>
                    <span class="blockspan">/</span>
                    <span class="blockspan">{{ unitydate.day + 1 }}</span>
                </div>
                <div class="labelblock">
                    <span></span>
                    <span class="labelspan">Year</span>
                    <span></span>
                    <div class="monthlabel">Month</div>
                    <span></span>
                    <span class="labelspan">Day</span>
                </div>
            </div>
        </div>
    </div>

</template>