<script setup lang="ts">
import ResumeComponent from './ResumeComponent.vue';
import PrintResumeButton from './PrintResumeButton.vue';
import ResumeNameInput from './ResumeNameInput.vue';
import { useResumesStore } from '@/stores/resume';

const resumeStore = useResumesStore();
const resume = resumeStore.currentResume;
const selectedComponent = resumeStore.currentSelectedResumePlacement;

</script>

<template>
    <div class="flex-2 flex flex-col gap-3 w-full">
        <div id="tools" class="w-full flex gap-3 justify-between">
            <ResumeNameInput />
            <PrintResumeButton />
        </div>
        <div class="resume aspect-[0.707317073] w-full bg-white text-black">
            <ResumeComponent v-for="componentPlacement in resume?.components_placements" :key="componentPlacement.id" :componentPlacement="componentPlacement" :active="componentPlacement.id === selectedComponent?.id" @click="resumeStore.setSelectedResumePlacementById(componentPlacement.id)" />
        </div>
        <div class="w-[210mm]" style="position: fixed; top:calc(-297mm - 5000px); container-type: inline-size; ">
            <div id="resume" class="aspect-[0.707317073] w-full bg-white text-black" >
                <ResumeComponent v-for="componentPlacement in resume?.components_placements" :key="componentPlacement.id" :componentPlacement="componentPlacement" :active="componentPlacement.id === selectedComponent?.id" @click="resumeStore.setSelectedResumePlacementById(componentPlacement.id)" />
            </div>
        </div>
    </div>
</template>

<style scoped>
.resume {
    container-type: inline-size;
    font-size: 1cqw;
}
</style>
