{"id":2567,"date":"2026-04-21T15:06:01","date_gmt":"2026-04-21T13:06:01","guid":{"rendered":"https:\/\/headit.be\/create-resume\/"},"modified":"2026-04-21T15:14:25","modified_gmt":"2026-04-21T13:14:25","slug":"create-resume","status":"publish","type":"page","link":"https:\/\/headit.be\/en\/create-resume\/","title":{"rendered":"Create Resume"},"content":{"rendered":"[vc_row type=&#8221;in_container&#8221; full_screen_row_position=&#8221;middle&#8221; column_margin=&#8221;default&#8221; column_direction=&#8221;default&#8221; column_direction_tablet=&#8221;default&#8221; column_direction_phone=&#8221;default&#8221; scene_position=&#8221;center&#8221; text_color=&#8221;dark&#8221; text_align=&#8221;left&#8221; row_border_radius=&#8221;none&#8221; row_border_radius_applies=&#8221;bg&#8221; row_position_desktop=&#8221;default&#8221; row_position_tablet=&#8221;inherit&#8221; row_position_phone=&#8221;inherit&#8221; overflow=&#8221;visible&#8221; overlay_strength=&#8221;0.3&#8243; gradient_direction=&#8221;left_to_right&#8221; shape_divider_position=&#8221;bottom&#8221; bg_image_animation=&#8221;none&#8221;][vc_column column_padding=&#8221;no-extra-padding&#8221; column_padding_tablet=&#8221;inherit&#8221; column_padding_phone=&#8221;inherit&#8221; column_padding_position=&#8221;all&#8221; flex_gap_desktop=&#8221;10px&#8221; column_element_direction_desktop=&#8221;default&#8221; column_element_spacing=&#8221;default&#8221; desktop_text_alignment=&#8221;default&#8221; tablet_text_alignment=&#8221;default&#8221; phone_text_alignment=&#8221;default&#8221; background_color_opacity=&#8221;1&#8243; background_hover_color_opacity=&#8221;1&#8243; column_backdrop_filter=&#8221;none&#8221; column_shadow=&#8221;none&#8221; column_border_radius=&#8221;none&#8221; column_link_target=&#8221;_self&#8221; column_position=&#8221;default&#8221; gradient_direction=&#8221;left_to_right&#8221; overlay_strength=&#8221;0.3&#8243; width=&#8221;1\/1&#8243; tablet_width_inherit=&#8221;default&#8221; animation_type=&#8221;default&#8221; bg_image_animation=&#8221;none&#8221; border_type=&#8221;simple&#8221; column_border_width=&#8221;none&#8221; column_border_style=&#8221;solid&#8221;][vc_column_text css=&#8221;&#8221; text_direction=&#8221;default&#8221;]<!-- Date picker (Flatpickr + MonthSelect plugin) -->\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/flatpickr\/dist\/flatpickr.min.css\">\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/flatpickr\/dist\/plugins\/monthSelect\/style.css\">\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/flatpickr\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/flatpickr\/dist\/plugins\/monthSelect\/index.js\"><\/script>\n<!-- Load Quill Rich Text Editor -->\n<link href=\"https:\/\/cdn.quilljs.com\/1.3.6\/quill.snow.css\" rel=\"stylesheet\">\n<script src=\"https:\/\/cdn.quilljs.com\/1.3.6\/quill.min.js\"><\/script>\n\n<!-- Load PDF.js from CDN -->\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/2.16.105\/pdf.min.js\"><\/script>\n\n\n<h2>Create your resume here!<\/h2>\n<form id=\"create-resume-form\">\n    <p id=\"flavor-text-p\">\n        Enter your information below and let us build a professional resume for you.\n        <br>\n        The <b>'About me' section<\/b> of the CV is automatically written by our AI based on your information,\n        unless you choose to fill it in yourself.\n    <\/p>\n    <div class=\"consent-box\" id=\"consent-box\">\n        <label class=\"consent-label\" for=\"consentCheckbox\">\n            <input type=\"checkbox\" id=\"consentCheckbox\" name=\"consent\" value=\"1\" required>\n            <span>I agree that my data is processed with the help of AI to create my CV, as described in the\n                <a href=\"\/en\/privacy-policy\/\" target=\"_blank\" rel=\"noopener\">privacy policy<\/a>.&nbsp;<span class=\"required\">*<\/span><\/span>\n        <\/label>\n    <\/div>\n    <div class=\"border-div\" id=\"import-resume-box\">\n        <h3>Already have a resume?<\/h3>\n        <p>\n            Upload your existing resume (PDF, max. 2 MB) and we'll fill in the form for you.\n        <\/p>\n        <p>\n            You can then check, edit and expand everything before generating your new CV.\n        <\/p>\n        <hr>\n        <!-- No \"name\" attribute and type=\"button\": this must never be submitted with the form -->\n        <input type=\"file\" id=\"importResumeInput\" accept=\"application\/pdf,.pdf\" style=\"display:none;\">\n        <button type=\"button\" id=\"importResumeBtn\" class=\"import-resume-btn\">Upload existing resume<\/button>\n        <p id=\"importResumeStatus\" role=\"status\" aria-live=\"polite\"><\/p>\n    <\/div>\n\n    <span style=\"color: red\">* Required fields<\/span>\n    <div class=\"border-div\">\n        <h3>Personal Details<\/h3>\n        <hr>\n        <div id=\"personal-info-div\">\n            <div class=\"input-row\">\n                <div class=\"input-group\">\n                    <label for=\"firstName\">First name <span class=\"required\">*<\/span><\/label>\n                    <input type=\"text\" id=\"firstName\" name=\"first_name\" required>\n                <\/div>\n                <div class=\"input-group\">\n                    <label for=\"lastName\">Last name <span class=\"required\">*<\/span><\/label>\n                    <input type=\"text\" id=\"lastName\" name=\"last_name\" required>\n                <\/div>\n            <\/div>\n            <div class=\"input-row\">\n                <div class=\"input-group\">\n                    <label for=\"email\">E-mail address<\/label>\n                    <input type=\"email\" id=\"email\" name=\"email\">\n                <\/div>\n                <div class=\"input-group\">\n                    <label for=\"phone\">Telephone number<\/label>\n                    <input type=\"tel\" id=\"phone\" name=\"phone\">\n                <\/div>\n            <\/div>\n            <div class=\"input-row\">\n                <div class=\"input-group\">\n                    <label for=\"linkedin\">LinkedIn profile<\/label>\n                    <input type=\"text\" id=\"linkedin\" name=\"linkedin\" inputmode=\"url\" maxlength=\"200\"\n                        placeholder=\"e.g. https:\/\/www.linkedin.com\/in\/john-doe\">\n                <\/div>\n            <\/div>\n            <div class=\"input-row\">\n                <div class=\"input-group\">\n                    <label for=\"address\">City \/ Address<\/label>\n                    <input type=\"text\" id=\"address\" name=\"address\" placeholder=\"e.g. Antwerp\">\n                <\/div>\n            <\/div>\n\n            <div class=\"input-row\">\n                <div class=\"input-group\">\n                    <label class=\"checkbox-label\">\n                        <input type=\"checkbox\" id=\"aboutMeToggle\" checked>\n                        Let the AI tool write the 'About me' section for me\n                    <\/label>\n                <\/div>\n            <\/div>\n            <div id=\"aboutMeGroup\" class=\"input-group\" style=\"display:none;\">\n                <label for=\"aboutMe\">About me<\/label>\n                <div id=\"aboutMeEditor\" style=\"height: 150px; background: white;\"><\/div>\n                <textarea id=\"aboutMe\" name=\"about_me\" style=\"display:none;\"><\/textarea>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div class=\"border-div\">\n        <h3>Work experience<\/h3>\n        <p>Fill in your past work experience here, including job title, company, location and dates of employment.\n        <\/p>\n        <hr>\n        <div id=\"workExperienceContainer\">\n            <div id=\"workExperienceTemplate\">\n                <div class=\"input-row\">\n                    <div class=\"input-group\">\n                        <label for=\"job_titles[]\">Job title<\/label>\n                        <input type=\"text\" name=\"job_titles[]\">\n                    <\/div>\n                    <div class=\"input-group\">\n                        <label for=\"company_names[]\">Company name<\/label>\n                        <input type=\"text\" name=\"company_names[]\">\n                    <\/div>\n                    <div class=\"input-group date-group\">\n                        <label for=\"work_from[]\">From<\/label>\n                        <input type=\"text\" class=\"month-year-picker\" name=\"work_from[]\" autocomplete=\"off\">\n                    <\/div>\n                    <div class=\"input-group date-group\">\n                        <div class=\"checkbox-div\">\n                            <input type=\"checkbox\" class=\"to-checkbox\" onclick=\"toggleToInput(this)\" autocomplete=\"off\"\n                                checked=\"true\" form=\"\">\n                            <span>To<\/span>\n                        <\/div>\n                        <input type=\"text\" class=\"month-year-picker\" name=\"work_to[]\" autocomplete=\"off\">\n                    <\/div>\n                <\/div>\n                <div class=\"input-row\" style=\"margin-top: 8px;\">\n                    <div class=\"input-group\">\n                        <label for=\"job_descriptions[]\">Job description<\/label>\n                        <div class=\"quill-editor\" style=\"height: 130px; background: white;\"><\/div>\n                        <textarea name=\"job_descriptions[]\" style=\"display:none;\"><\/textarea>\n                    <\/div>\n                <\/div>\n                <div class=\"button-group\">\n                    <button class=\"add-btn add-btn-work\" type=\"button\" onclick=\"addField(this)\">+<\/button>\n                    <button class=\"remove-btn remove-btn-work\" type=\"button\" onclick=\"removeField(this)\">-<\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div class=\"border-div\">\n        <h3>Education<\/h3>\n        <p>Enter your education here, including field of study, name of university\/college and dates of study.\n        <\/p>\n        <hr>\n        <div id=\"studiesContainer\">\n            <div id=\"studiesTemplate\">\n                <div class=\"input-row\">\n                    <div class=\"input-group\">\n                        <label for=\"fields_of_study[]\">Field of study<\/label>\n                        <input type=\"text\" name=\"fields_of_study[]\">\n                    <\/div>\n                    <div class=\"input-group\">\n                        <label for=\"universities[]\">Name of university\/college<\/label>\n                        <input type=\"text\" name=\"universities[]\">\n                    <\/div>\n                    <div class=\"input-group date-group\">\n                        <label for=\"studies_from[]\">From<\/label>\n                        <input type=\"text\" class=\"month-year-picker\" name=\"studies_from[]\" autocomplete=\"off\">\n                    <\/div>\n                    <div class=\"input-group date-group\">\n                        <div class=\"checkbox-div\">\n                            <input type=\"checkbox\" class=\"to-checkbox\" onclick=\"toggleToInput(this)\" autocomplete=\"off\"\n                                checked=\"true\" form=\"\">\n                            <span>To<\/span>\n                        <\/div>\n                        <input type=\"text\" class=\"month-year-picker\" name=\"studies_to[]\" autocomplete=\"off\">\n                    <\/div>\n                <\/div>\n                <div class=\"button-group\">\n                    <button class=\"add-btn\" type=\"button\" onclick=\"addField(this)\">+<\/button>\n                    <button class=\"remove-btn\" type=\"button\" onclick=\"removeField(this)\">-<\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div class=\"border-div\">\n        <h3>Skills<\/h3>\n        <p>\n            What skills set you apart? Think of both your technical knowledge and the way you collaborate with others.\n            <br>\n            You <b>don't need to distinguish<\/b> between hard skills and soft skills, simply enter all your skills into\n            this list.\n            Our AI tool automatically recognizes which skills are technical and which are soft skills,\n            placing them neatly in the right spot on your new CV.\n        <\/p>\n        <hr>\n        <div id=\"skillsContainer\">\n            <div id=\"skillsTemplate\">\n                <input type=\"text\" name=\"skills[]\">\n                <div class=\"button-group\">\n                    <button class=\"add-btn\" type=\"button\" onclick=\"addField(this)\">+<\/button>\n                    <button class=\"remove-btn\" type=\"button\" onclick=\"removeField(this)\">-<\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div class=\"border-div\">\n        <h3>Languages<\/h3>\n        <p>Enter your language skills here.<\/p>\n        <hr>\n        <div id=\"languagesContainer\">\n            <div id=\"languagesTemplate\">\n                <div class=\"input-row\">\n                    <div class=\"input-group languages-group\">\n                        <label for=\"language_name[]\">Language<\/label>\n                        <input type=\"text\" name=\"language_name[]\" placeholder=\"e.g. Dutch\">\n                    <\/div>\n                    <div class=\"input-group languages-group\">\n                        <label for=\"language_proficiency[]\">Proficiency<\/label>\n                        <select name=\"languages_proficiency[]\">\n                            <option value=\"1\">1 - Elementary<\/option>\n                            <option value=\"2\">2 - Beginner<\/option>\n                            <option value=\"3\">3 - Intermediate<\/option>\n                            <option value=\"4\">4 - Advanced<\/option>\n                            <option value=\"5\">5 - Fluent<\/option>\n                        <\/select>\n                    <\/div>\n                <\/div>\n                <div class=\"button-group\">\n                    <button class=\"add-btn\" type=\"button\" onclick=\"addField(this)\">+<\/button>\n                    <button class=\"remove-btn\" type=\"button\" onclick=\"removeField(this)\">-<\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div class=\"border-div\">\n        <h3>Additional information<\/h3>\n        <p>Add any extra information here if needed, such as a driver's license, certifications, or hobbies.<\/p>\n        <hr>\n        <div class=\"input-group\">\n            <div id=\"extraInfoEditor\" style=\"height: 150px; background: white;\"><\/div>\n            <textarea id=\"extraInfo\" name=\"extra_info\" style=\"display:none;\"><\/textarea>\n        <\/div>\n    <\/div>\n\n    <div class=\"hp-field\" aria-hidden=\"true\">\n        <input type=\"text\" id=\"homepage\" name=\"homepage\" autocomplete=\"off\" tabindex=\"-1\"\n            style=\"position:absolute; left:-9999px; top:auto; width:1px; height:1px; opacity:0;\" \/>\n    <\/div>\n    <button id=\"submit-btn\" type=\"submit\">Submit<\/button>\n<\/form>\n\n<div id=\"loading-spinner\" style=\"display:none;\">\n    <img decoding=\"async\" id=\"loading-spinner-gif\" src=\"\/wp-content\/uploads\/ai-loading.gif\" alt=\"Loading...\" \/>\n    <p id=\"loading-spinner-text\">Generating your new CV...<\/p>\n<\/div>\n<div id=\"status\"><\/div>\n\n<!-- Resume Display Section -->\n<div id=\"resume-viewer\" style=\"display:none;\">\n    <div id=\"resume-header\">\n        <div class=\"header-left\">\n            <button id=\"back-to-form-btn\">\u2190 Go back<\/button>\n        <\/div>\n\n        <div class=\"header-right\">\n            <button id=\"improvements-btn\">\n                \u26a0\ufe0f Possible improvements\n            <\/button>\n\n            <button id=\"download-resume-btn\">Download as PDF<\/button>\n\n            <button id=\"match-resume-btn\" aria-label=\"Match this resume with our vacancies\"\n                data-short-label=\"Match this resume with vacancies\">\n                <span class=\"button-text\">Match this resume with our vacancies<\/span>\n                <div class=\"loading-spinner\" style=\"display:none;\"><\/div>\n            <\/button>\n        <\/div>\n    <\/div>\n\n    <!-- PDF.js rendering area -->\n    <div id=\"pdf-container\" style=\"\n        width: 100%;\n        max-width: 1000px;\n        margin: 0 auto;\n        background: #f8f8f8;\n        padding: 10px;\n        border: 1px solid #ddd;\n        border-radius: 8px;\n        box-shadow: 0 2px 6px rgba(0,0,0,0.1);\n    \"><\/div>\n<\/div>\n\n<!-- Modal that displays possible improvements that can be made to the resume -->\n<dialog id=\"improvements-modal\">\n    <h3>\ud83d\udca1 Possible improvements<\/h3>\n    <div id=\"improvements-list\"><\/div>\n    <form id=\"improvements-modal-form\" method=\"dialog\">\n        <button class=\"close-modal-btn\">Close<\/button>\n    <\/form>\n<\/dialog>\n\n<style>\n    .consent-box {\n        margin: 0 0 25px;\n    }\n\n    .consent-label {\n        display: flex;\n        align-items: flex-start;\n        gap: 8px;\n        font-size: 12px !important;\n        line-height: 1.4 !important;\n        cursor: pointer;\n    }\n\n    .consent-label span,\n    .consent-label a {\n        font-size: inherit !important;\n        line-height: inherit !important;\n    }\n\n    .consent-label input[type=\"checkbox\"] {\n        flex: none;\n        margin-top: 3px;\n    }\n\n    \/* Shown when the visitor tries to upload or submit without ticking the box *\/\n    .consent-box.needs-consent .consent-label {\n        color: #c0392b;\n    }\n\n    .import-resume-btn {\n        background-color: #008699;\n        color: white;\n        border: none;\n        padding: 10px 18px;\n        border-radius: 50px;\n        cursor: pointer;\n        font-size: 15px;\n        font-weight: 500;\n        transition: background-color 0.3s;\n    }\n\n    .import-resume-btn:hover:not(:disabled) {\n        background-color: #007684;\n    }\n\n    .import-resume-btn:disabled {\n        opacity: 0.6;\n        cursor: wait;\n    }\n\n    #importResumeStatus {\n        margin-left: 12px;\n        font-size: 14px;\n        color: #666;\n    }\n\n    #importResumeStatus.error {\n        color: #c0392b;\n    }\n\n    #importResumeStatus.success {\n        color: #1e8449;\n    }\n\n    \/* Override Quill's default font settings to match the rest of the form *\/\n    .ql-editor {\n        font-size: 15px;\n        font-family: inherit;\n    }\n\n    \/* Make the placeholder text match standard inputs *\/\n    .ql-editor.ql-blank::before {\n        font-style: normal;\n        color: #999;\n    }\n\n    \/* Add drag handle for Quill editors and restrict to height only *\/\n    .ql-container.ql-snow {\n        resize: vertical;\n        overflow-y: auto;\n        min-height: 130px;\n        padding-bottom: 5px;\n    }\n\n    .ql-editor {\n        min-height: 100%;\n    }\n\n    .required {\n        color: red;\n        font-weight: bold;\n    }\n\n    .close-modal-btn {\n        background-color: #008699;\n        color: white;\n        border: none;\n        padding: 8px 10px;\n        cursor: pointer;\n        font-size: 14px;\n    }\n\n    #improvements-modal-form {\n        text-align: center;\n        margin-top: 20px;\n    }\n\n    #improvements-btn {\n        display: none;\n        background-color: #FF7900 !important;\n    }\n\n    #improvements-modal {\n        border: none;\n        border-radius: 8px;\n        padding: 20px;\n        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);\n        max-width: 800px;\n        width: 90%;\n    }\n\n    #improvements-modal::backdrop {\n        background: rgba(0, 0, 0, 0.5);\n    }\n\n    #improvements-modal h3 {\n        margin-top: 0;\n        color: #FF7900;\n    }\n\n    #create-resume-form {\n        transition: opacity 0.7s ease !important;\n        position: relative !important;\n        z-index: 2 !important;\n    }\n\n    #loading-spinner,\n    #resume-viewer {\n        position: relative !important;\n        z-index: 1 !important;\n    }\n\n    #loading-spinner {\n        transition: opacity 0.7s ease !important;\n        text-align: center !important;\n        margin-top: 0 !important;\n    }\n\n    #loading-spinner-gif {\n        display: block !important;\n        \/* ensures no inline spacing below the image *\/\n        width: 180px !important;\n        height: 180px !important;\n        margin: 0 auto 0px auto !important;\n        \/* centers image and adds a small 4px gap below *\/\n    }\n\n    #loading-spinner-text {\n        margin-top: 0 !important;\n        line-height: 1.2 !important;\n        \/* tighter vertical rhythm *\/\n        text-align: center !important;\n        font-size: 16px !important;\n        color: #666666 !important;\n    }\n\n    .border-div {\n        border: 2px solid #02899c;\n        padding-top: 10px;\n        padding: 10px;\n        margin-bottom: 30px;\n        border-radius: 15px;\n    }\n\n    checkbox-div {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n    }\n\n    input[type=\"checkbox\"] {\n        width: 13px;\n        height: 13px;\n        margin-left: 0;\n        margin-bottom: 0;\n        margin-right: 3px;\n    }\n\n    h3:not(:first-of-type) {\n        margin-top: 30px;\n        margin-bottom: 0;\n        padding-bottom: 0;\n    }\n\n    hr {\n        height: 2px;\n        border-width: 0;\n        background-color: #d7dadf;\n    }\n\n    input,\n    select {\n        height: 45px;\n    }\n\n    textarea {\n        padding: 10px !important;\n    }\n\n    p {\n        padding-bottom: 0;\n    }\n\n    #flavor-text-p {\n        margin-bottom: 20px;\n    }\n\n    .input-row {\n        display: flex;\n        flex-direction: row;\n        gap: 12px;\n        align-items: center;\n        flex-wrap: wrap;\n    }\n\n    .input-group {\n        display: flex;\n        flex-direction: column;\n        flex: 1;\n    }\n\n    #personal-info-div {\n        display: flex;\n        flex-direction: column;\n        gap: 12px;\n    }\n\n    #personal-info-div textarea {\n        min-height: 150px;\n    }\n\n    .input-group textarea {\n        min-height: 130px;\n    }\n\n    .add-btn {\n        background-color: #02899c;\n    }\n\n    .remove-btn {\n        background-color: #e00000;\n        visibility: hidden;\n    }\n\n    .add-btn-work,\n    .remove-btn-work {\n        margin-top: 12px;\n    }\n\n    .add-btn,\n    .remove-btn {\n        color: white;\n        border: none;\n        text-align: center;\n        border-radius: 50%;\n        height: 25px;\n        width: 25px;\n        font-size: 18px;\n        cursor: pointer;\n    }\n\n    .button-group {\n        display: flex;\n        flex-direction: row;\n        gap: 6px;\n        margin-bottom: 15px;\n    }\n\n    #skillsTemplate>.button-group {\n        margin-bottom: 0;\n    }\n\n    #skillsContainer,\n    #workExperienceContainer,\n    #studiesContainer,\n    #languagesContainer {\n        display: flex;\n        flex-direction: column;\n        gap: 12px;\n    }\n\n    #skillsContainer {\n        max-width: 500px;\n    }\n\n    #skillsTemplate {\n        display: flex;\n        align-items: center;\n        flex-direction: row;\n        gap: 12px;\n    }\n\n    #studiesTemplate {\n        display: flex;\n        flex-direction: column;\n        gap: 12px;\n    }\n\n    .date-group {\n        max-width: 160px;\n        flex-basis: 100%;\n    }\n\n    #languagesTemplate {\n        display: flex;\n        flex-direction: column;\n        gap: 12px;\n    }\n\n    .languages-group {\n        max-width: 300px;\n    }\n\n    #submit-btn {\n        margin-top: 30px;\n    }\n\n    #status {\n        margin-top: 10px;\n        color: red;\n    }\n\n\n    @media only screen and (max-width: 1200px) {\n        .input-group {\n            flex: 1 1 48%;\n        }\n\n        .date-group {\n            flex: 1 1 100%;\n            margin-bottom: 12px;\n        }\n    }\n\n    @media only screen and (max-width: 768px) {\n        .input-group {\n            flex: 1 1 100%;\n        }\n    }\n\n    #resume-viewer {\n        display: none;\n        text-align: center;\n        transition: opacity 0.7s ease;\n    }\n\n    #resume-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding: 12px 20px;\n        gap: 15px;\n        flex-wrap: wrap;\n    }\n\n    \/* Ensure the right group stays together *\/\n    .header-right {\n        display: flex;\n        gap: 10px;\n        align-items: center;\n        flex-wrap: wrap;\n        justify-content: flex-end;\n    }\n\n    \/* Mobile Responsiveness *\/\n    @media (max-width: 768px) {\n        #resume-header {\n            flex-direction: column;\n            gap: 15px;\n        }\n\n        .header-right {\n            justify-content: center;\n            width: 100%;\n        }\n\n        .header-right button {\n            width: 100%;\n            \/* Full width buttons on mobile *\/\n            max-width: 320px;\n        }\n    }\n\n    \/* Button base style *\/\n    #resume-header button {\n        background-color: #008699;\n        color: white;\n        border: none;\n        padding: 10px 18px;\n        border-radius: 50px;\n        \/* matches your rounded look *\/\n        cursor: pointer;\n        font-size: 15px;\n        font-weight: 500;\n        transition: background-color 0.3s;\n        white-space: nowrap;\n    }\n\n    #resume-header button:hover {\n        background-color: #007684;\n    }\n\n    \/* Align each button for desktop *\/\n    #back-to-form-btn {\n        justify-self: start;\n    }\n\n    #download-resume-btn {\n        justify-self: center;\n    }\n\n    #match-resume-btn {\n        justify-self: end;\n    }\n\n    #match-resume-btn.loading {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n\n    #match-resume-btn .loading-spinner {\n        width: 20px;\n        height: 20px;\n        border: 3px solid rgba(255, 255, 255, 0.3);\n        border-top-color: #ffffff;\n        border-radius: 50%;\n        animation: spin 1s ease-in-out infinite;\n        margin: 0;\n    }\n\n    \/* Hide\/show logic using a class *\/\n    #match-resume-btn.loading .button-text {\n        display: none;\n    }\n\n    #match-resume-btn.loading .loading-spinner {\n        display: inline-block;\n    }\n\n    \/* Default hidden if not loading *\/\n    #match-resume-btn .loading-spinner {\n        display: none;\n    }\n\n    @keyframes spin {\n        to {\n            transform: rotate(360deg);\n        }\n    }\n\n    \/* ---- Responsiveness of buttons above the embedded pdf ---- *\/\n    @media (max-width: 900px) {\n        #resume-header {\n            flex-direction: column;\n            gap: 15px;\n            padding: 20px 10px;\n        }\n\n        .header-left {\n            width: 100%;\n            display: flex;\n            justify-content: center;\n        }\n\n        .header-right {\n            width: 100%;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            gap: 12px;\n            justify-content: center;\n        }\n\n        #resume-header button {\n            width: 100%;\n            max-width: 350px;\n            margin: 0;\n        }\n    }\n\n    @media (max-width: 420px) {\n        #match-resume-btn {\n            position: relative;\n            display: inline-flex;\n            \/* ensure ::after is centered *\/\n            align-items: center;\n            justify-content: center;\n            color: transparent !important;\n            \/* hide original text completely *\/\n        }\n\n        #match-resume-btn::after {\n            content: attr(data-short-label);\n            position: absolute;\n            color: white;\n            font-size: 15px;\n            line-height: 1.2;\n            white-space: nowrap;\n        }\n\n        #match-resume-btn.loading::after {\n            content: none;\n        }\n    }\n\n    #pdf-container {\n        overflow: visible !important;\n        \/* Let it expand naturally *\/\n        height: auto !important;\n        text-align: center !important;\n        display: block !important;\n    }\n\n    #pdf-container canvas {\n        display: block !important;\n        margin: 0 auto 12px auto !important;\n        max-width: 100% !important;\n        height: auto !important;\n        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;\n        border-radius: 4px !important;\n    }\n<\/style>\n\n<script>\n    const PROXY_PARSE_RESUME_URL = '\/wp-json\/ai-api\/v1\/parse-resume';\n    const IMPORT_LANG = 'en';\n    const IMPORT_MAX_BYTES = 2 * 1024 * 1024;\n\n    const IMPORT_STRINGS = {\n        en: {\n            reading: 'Reading your resume\u2026 this takes a few seconds.',\n            done: 'Done! Please check the pre-filled information below and add anything that is missing.',\n            notPdf: 'Only PDF files are supported.',\n            tooBig: 'The file is larger than 2 MB.',\n            failed: 'We could not read your resume. Please try again or fill in the form manually.',\n            confirmOverwrite: 'The form already contains information. Replace it with the information from your resume?',\n            consent: 'Please tick the box above first to agree to the processing of your data.'\n        },\n        nl: {\n            reading: 'Je CV wordt gelezen\u2026 dit duurt enkele seconden.',\n            done: 'Klaar! Controleer de ingevulde gegevens hieronder en vul aan waar nodig.',\n            notPdf: 'Alleen PDF-bestanden worden ondersteund.',\n            tooBig: 'Het bestand is groter dan 2 MB.',\n            failed: 'Het CV kon niet worden uitgelezen. Probeer het opnieuw of vul het formulier handmatig in.',\n            confirmOverwrite: 'Het formulier bevat al gegevens. Wil je die vervangen door de gegevens uit je CV?',\n            consent: 'Vink eerst hierboven aan dat je akkoord gaat met de verwerking van je gegevens.'\n        }\n    };\n    const T = IMPORT_STRINGS[IMPORT_LANG];\n\n    \/\/ ---------- helpers ----------\n    function escapeHtml(str) {\n        return String(str).replace(\/[&<>\"']\/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '\"': '&quot;', \"'\": '&#39;' }[c]));\n    }\n\n    \/\/ The API already sanitizes this HTML, but it originates from an untrusted PDF and Quill's\n    \/\/ clipboard assigns it to a live element's innerHTML (so e.g. <img onerror> would run).\n    \/\/ Rebuild it from an inert DOMParser document, keeping only what the Quill\n    \/\/ editors support (same tags the API allows).\n    const RICH_ALLOWED = new Set(['P', 'BR', 'STRONG', 'EM', 'U', 'UL', 'OL', 'LI', 'A']);\n\n    function sanitizeRichHtml(html) {\n        if (!html) return '';\n        const doc = new DOMParser().parseFromString(html, 'text\/html');\n        const walk = node => {\n            let out = '';\n            node.childNodes.forEach(child => {\n                if (child.nodeType === Node.TEXT_NODE) {\n                    out += escapeHtml(child.textContent);\n                } else if (child.nodeType === Node.ELEMENT_NODE) {\n                    const tag = child.tagName;\n                    if (tag === 'SCRIPT' || tag === 'STYLE') return; \/\/ drop with content\n                    if (tag === 'BR') { out += '<br>'; return; }\n                    const inner = walk(child);\n                    if (!RICH_ALLOWED.has(tag)) {\n                        out += inner; \/\/ unwrap unknown tags, keep their text\n                    } else if (tag === 'A') {\n                        const href = child.getAttribute('href') || '';\n                        out += \/^(https?:|mailto:)\/i.test(href) ? `<a href=\"${escapeHtml(href)}\">${inner}<\/a>` : inner;\n                    } else {\n                        const t = tag.toLowerCase();\n                        out += `<${t}>${inner}<\/${t}>`;\n                    }\n                }\n            });\n            return out;\n        };\n        return walk(doc.body);\n    }\n\n    \/\/ Quill.find(container) returns the instance created in initQuillForWork \/ DOMContentLoaded\n    function setQuillHtml(editorEl, html) {\n        const quill = editorEl && Quill.find(editorEl);\n        if (!quill) return;\n        if (html) {\n            quill.clipboard.dangerouslyPasteHTML(html); \/\/ fires 'text-change' -> hidden textarea is synced\n        } else {\n            quill.setText('');\n        }\n    }\n\n    function setMonthYear(input, value) {\n        if (!input) return;\n        if (!value) {\n            if (input._flatpickr) input._flatpickr.clear(); else input.value = '';\n            return;\n        }\n        if (input._flatpickr) input._flatpickr.setDate(value, false, 'm\/Y'); else input.value = value;\n    }\n\n    function setToDate(block, value) {\n        const checkbox = block.querySelector('.to-checkbox');\n        const input = block.querySelector('input[name$=\"_to[]\"]');\n        \/\/ checkbox checked = the \"To\" date is enabled; unchecked = current job \/ still studying\n        checkbox.checked = !!value;\n        toggleToInput(checkbox);\n        if (value) setMonthYear(input, value);\n    }\n\n    \/\/ Empties one repeatable block (work \/ education \/ skill \/ language)\n    function clearBlock(block) {\n        block.querySelectorAll('input, textarea, select').forEach(field => {\n            if (field.type === 'checkbox') {\n                field.checked = true;\n                field.disabled = false;\n            } else if (field.tagName === 'SELECT') {\n                field.selectedIndex = 0;\n            } else {\n                if (field._flatpickr) field._flatpickr.clear();\n                field.value = '';\n                field.disabled = false;\n                field.style.backgroundColor = '';\n            }\n        });\n        block.querySelectorAll('.quill-editor').forEach(el => setQuillHtml(el, ''));\n    }\n\n    \/\/ Makes a repeatable section contain exactly `count` empty blocks and returns them.\n    \/\/ Uses the page's own addField() so cloned blocks get their Quill editors and date pickers.\n    function resizeRepeater(containerId, count) {\n        const container = document.getElementById(containerId);\n        count = Math.max(1, count);\n\n        while (container.children.length > 1) container.lastElementChild.remove();\n        clearBlock(container.firstElementChild);\n\n        for (let i = 1; i < count; i++) {\n            addField(container.lastElementChild.querySelector('.add-btn'));\n        }\n        if (container.children.length === 1) {\n            container.querySelector('.remove-btn').style.visibility = 'hidden';\n        }\n        return Array.from(container.children);\n    }\n\n    function formHasData() {\n        const val = id => (document.getElementById(id)?.value || '').trim();\n        return !!(val('firstName') || val('lastName') || val('email') ||\n            document.querySelector('#workExperienceContainer input[name=\"job_titles[]\"]')?.value ||\n            document.querySelector('#skillsContainer input[name=\"skills[]\"]')?.value);\n    }\n\n    \/\/ ---------- fill the form ----------\n    function applyParsedResume(data) {\n        const pi = data.personal_info || {};\n\n        \/\/ Personal info\n        document.getElementById('firstName').value = pi.first_name || '';\n        document.getElementById('lastName').value = pi.last_name || '';\n        document.getElementById('email').value = pi.email || '';\n        document.getElementById('phone').value = pi.phone || '';\n        document.getElementById('linkedin').value = pi.linkedin_url || '';\n        document.getElementById('address').value = pi.address || '';\n\n        \/\/ About me: keep the user's own text if the resume has one, otherwise leave the AI option on\n        const aboutToggle = document.getElementById('aboutMeToggle');\n        aboutToggle.checked = !pi.about_me;\n        aboutToggle.dispatchEvent(new Event('change'));\n        setQuillHtml(document.getElementById('aboutMeEditor'), sanitizeRichHtml(pi.about_me));\n\n        \/\/ Work experience\n        const jobs = data.work_experience || [];\n        resizeRepeater('workExperienceContainer', jobs.length).forEach((block, i) => {\n            const job = jobs[i];\n            if (!job) return;\n            block.querySelector('input[name=\"job_titles[]\"]').value = job.job_title || '';\n            block.querySelector('input[name=\"company_names[]\"]').value = job.company_name || '';\n            setMonthYear(block.querySelector('input[name=\"work_from[]\"]'), job.work_from);\n            setToDate(block, job.work_to);\n            setQuillHtml(block.querySelector('.quill-editor'), sanitizeRichHtml(job.job_description));\n        });\n\n        \/\/ Education\n        const studies = data.education || [];\n        resizeRepeater('studiesContainer', studies.length).forEach((block, i) => {\n            const study = studies[i];\n            if (!study) return;\n            block.querySelector('input[name=\"fields_of_study[]\"]').value = study.field_of_study || '';\n            block.querySelector('input[name=\"universities[]\"]').value = study.university || '';\n            setMonthYear(block.querySelector('input[name=\"studies_from[]\"]'), study.study_from);\n            setToDate(block, study.study_to);\n        });\n\n        \/\/ Skills\n        const skills = data.skills || [];\n        resizeRepeater('skillsContainer', skills.length).forEach((block, i) => {\n            if (skills[i]) block.querySelector('input[name=\"skills[]\"]').value = skills[i];\n        });\n\n        \/\/ Languages\n        const langs = data.languages || [];\n        resizeRepeater('languagesContainer', langs.length).forEach((block, i) => {\n            const lang = langs[i];\n            if (!lang) return;\n            block.querySelector('input[name=\"language_name[]\"]').value = lang.name || '';\n            block.querySelector('select[name=\"languages_proficiency[]\"]').value = String(lang.proficiency || 3);\n        });\n\n        \/\/ Extra info (HTML string, e.g. a bullet list)\n        setQuillHtml(document.getElementById('extraInfoEditor'), sanitizeRichHtml(data.extra_info));\n    }\n\n    \/\/ ---------- wire up the button ----------\n    (function () {\n        const btn = document.getElementById('importResumeBtn');\n        const input = document.getElementById('importResumeInput');\n        const status = document.getElementById('importResumeStatus');\n        if (!btn || !input) return;\n\n        const setStatus = (msg, cls = '') => { status.textContent = msg; status.className = cls; };\n\n        const consentBox = document.getElementById('consent-box');\n        const consentCheckbox = document.getElementById('consentCheckbox');\n        consentCheckbox.addEventListener('change', () => consentBox.classList.remove('needs-consent'));\n\n        btn.addEventListener('click', () => {\n            \/\/ The CV is only sent to the AI after the visitor agreed\n            if (!consentCheckbox.checked) {\n                consentBox.classList.add('needs-consent');\n                consentBox.scrollIntoView({ behavior: 'smooth', block: 'center' });\n                return setStatus(T.consent, 'error');\n            }\n            input.click();\n        });\n\n        input.addEventListener('change', async () => {\n            const file = input.files[0];\n            input.value = ''; \/\/ allows re-selecting the same file later\n            if (!file) return;\n\n            if (file.type !== 'application\/pdf' && !file.name.toLowerCase().endsWith('.pdf')) {\n                return setStatus(T.notPdf, 'error');\n            }\n            if (file.size > IMPORT_MAX_BYTES) {\n                return setStatus(T.tooBig, 'error');\n            }\n            if (formHasData() && !confirm(T.confirmOverwrite)) return;\n\n            btn.disabled = true;\n            setStatus(T.reading);\n\n            try {\n                const body = new FormData();\n                body.append('resume_file', file);\n                body.append('language', IMPORT_LANG);\n                body.append('consent', '1');\n\n                const response = await fetch(PROXY_PARSE_RESUME_URL, {\n                    method: 'POST',\n                    headers: { 'X-WP-Nonce': WpApiSettings.nonce }, \/\/ no Content-Type: the browser sets the multipart boundary\n                    body\n                });\n                const data = await response.json().catch(() => null);\n                if (!response.ok || !data) throw new Error((data && data.message) || T.failed);\n\n                applyParsedResume(data);\n                setStatus(T.done, 'success');\n                document.getElementById('firstName').scrollIntoView({ behavior: 'smooth', block: 'center' });\n            } catch (err) {\n                console.error('Resume import failed:', err);\n                setStatus(err.message || T.failed, 'error');\n            } finally {\n                btn.disabled = false;\n            }\n        });\n    })();\n\n    const WpApiSettings = { nonce: '9b68308f3b' };\n    const PROXY_CREATE_RESUME_URL = '\/wp-json\/ai-api\/v1\/create-resume';\n\n    \/\/ Nonce for the WordPress action that asks the API (with its key) for the download link\n    const resumeViewerNonce = \"f0133d8065\";\n\n    const resumeCreatorAjax = {\n        ajax_url: \"https:\/\/headit.be\/wp-admin\/admin-ajax.php\",\n        nonce: \"095223f292\"\n    };\n\n    \/\/ (Not used: the form talks to the API through WordPress only.)\n    const CREATE_RESUME_API_URL = 'https:\/\/api.headit.be\/en\/create-resume';\n\n    const IMPROVEMENT_MESSAGES = {\n        \"PAGE_COUNT_HIGH\": (data) =>\n            `\ud83d\udcc4 Your resume is currently <strong>${data.page_count}<\/strong> pages long. Try to shorten it to a maximum of 2 pages.`,\n\n        \"WORK_GAP_DETECTED\": (data) => {\n            \/\/ Create the list of gaps\n            const gapsHtml = data.gaps.map(gap => {\n                const days = Math.round(gap.days \/ 30);\n                const jobBefore = gap.job_before || \"Unknown position\";\n                const jobAfter = gap.job_after || \"Unknown position\";\n                return `<li style=\"margin-bottom:4px;\"><strong>${days} months<\/strong> between <strong>${jobBefore}<\/strong> and <strong>${jobAfter}<\/strong><\/li>`;\n            }).join(\"\");\n\n            return `\n            \ud83d\udd73\ufe0f We found <strong>${data.gaps.length} gap(s)<\/strong> in your work experience. Try to explain these in your resume.\n            <details style=\"margin-top: 8px;\">\n                <summary style=\"cursor: pointer; color: #008699; font-weight: 500;\">View details<\/summary>\n                <ul style=\"margin: 5px 0 5px 20px; list-style-type: circle; color: #555; font-size: 0.95em;\">\n                    ${gapsHtml}\n                <\/ul>\n            <\/details>\n        `;\n        },\n\n        \"NO_SKILLS\": (data) =>\n            `\ud83d\udee0\ufe0f You haven't entered any <strong>skills<\/strong> yet. \n            Try to add at least 5 skills so recruiters can get a better picture of your expertise.`,\n\n        \"NO_LANGUAGES\": (data) =>\n            `\ud83d\udde3\ufe0f You haven't added any <strong>languages<\/strong> yet. Language skills are often a big plus for employers.`,\n\n        \"MISSING_EMAIL\": (data) =>\n            `\ud83d\udce7 <strong>No email address found.<\/strong> This is often the primary contact method for recruiters.`,\n\n        \"MISSING_PHONE\": (data) =>\n            `\ud83d\udcf1 <strong>No telephone number found.<\/strong> Recruiters often prefer to call for an initial quick screening.`\n    };\n\n    function translateImprovement(item) {\n        const generator = IMPROVEMENT_MESSAGES[item.code];\n        return generator ? generator(item.metadata || {}) : \"\u26a0\ufe0f A possible improvement was found.\";\n    }\n\n    function toggleToInput(checkbox) {\n        let toInput = checkbox.parentElement.parentElement.querySelector(\".month-year-picker\");\n\n        if (checkbox.checked) {\n            toInput.disabled = false;\n            toInput.style.backgroundColor = '';\n        } else {\n            toInput.disabled = true;\n            toInput.value = ''; \/\/ Clear value when disabled\n            toInput.style.backgroundColor = 'rgba(255, 255, 255, 0)';\n        }\n    }\n\n    \/\/ Add: init toggle handler for About Me\n    function initAboutMeToggle() {\n        const toggle = document.getElementById('aboutMeToggle');\n        const group = document.getElementById('aboutMeGroup');\n        if (!toggle || !group) return;\n        \/\/ initial state\n        group.style.display = toggle.checked ? 'none' : 'block';\n        \/\/ handle change\n        toggle.addEventListener('change', () => {\n            group.style.display = toggle.checked ? 'none' : 'block';\n        });\n    }\n\n    \/\/ Initialize Flatpickr month pickers\n    function initMonthPickers(scope = document) {\n        const opts = {\n            allowInput: true,\n            disableMobile: true, \/\/ always use Flatpickr, even on mobile\n            plugins: [new monthSelectPlugin({\n                shorthand: true,     \/\/ e.g. \"Jan\"\n                dateFormat: \"m\/Y\",   \/\/ outputs like \"09\/2023\"\n                altFormat: \"F Y\"     \/\/ \"September 2023\"\n            })]\n        };\n        scope.querySelectorAll('.month-year-picker').forEach(el => {\n            if (el._flatpickr) el._flatpickr.destroy();\n            flatpickr(el, opts);\n        });\n    }\n\n    \/\/ Define the toolbar options\n    const quillOptions = {\n        theme: 'snow',\n        formats: ['bold', 'italic', 'underline', 'link', 'list'],\n        modules: {\n            toolbar: [\n                ['bold', 'italic', 'underline'],\n                ['link'],\n                [{ 'list': 'bullet' }, { 'list': 'ordered' }]\n            ]\n        }\n    };\n\n    \/\/ Helper function to initialize Quill on work experience fields\n    function initQuillForWork(container) {\n        let quill = new Quill(container, quillOptions);\n        let hiddenInput = container.parentElement.querySelector('textarea[name=\"job_descriptions[]\"]');\n\n        \/\/ Sync the rich text HTML to the hidden textarea whenever the user types\n        quill.on('text-change', function () {\n            let text = quill.getText().trim();\n            \/\/ If empty, pass an empty string so we don't send useless <p><br><\/p> tags\n            hiddenInput.value = text ? quill.root.innerHTML : '';\n        });\n    }\n\n    document.addEventListener('DOMContentLoaded', () => {\n        initMonthPickers();\n        initAboutMeToggle();\n\n        \/\/ Initialize the About Me editor\n        let aboutMeQuill = new Quill('#aboutMeEditor', quillOptions);\n        aboutMeQuill.on('text-change', function () {\n            let text = aboutMeQuill.getText().trim();\n            document.getElementById('aboutMe').value = text ? aboutMeQuill.root.innerHTML : '';\n        });\n\n        \/\/ Initialize the Extra Info editor\n        let extraInfoQuill = new Quill('#extraInfoEditor', quillOptions);\n        extraInfoQuill.on('text-change', function () {\n            let text = extraInfoQuill.getText().trim();\n            document.getElementById('extraInfo').value = text ? extraInfoQuill.root.innerHTML : '';\n        });\n\n        \/\/ Initialize the Work Experience editors\n        document.querySelectorAll('.quill-editor').forEach(container => {\n            initQuillForWork(container);\n        });\n    });\n\n    function addField(button) {\n        let container = button.parentElement.parentElement.parentElement;\n        let removeBtns = container.querySelectorAll(\".remove-btn\");\n        removeBtns.forEach(btn => { btn.style.visibility = \"visible\"; });\n\n        let originalTemplate = button.parentElement.parentElement;\n        let clonedTemplate = originalTemplate.cloneNode(true);\n\n        let quillToolbar = clonedTemplate.querySelector('.ql-toolbar');\n        if (quillToolbar) quillToolbar.remove();\n\n        let quillEditorContainer = clonedTemplate.querySelector('.quill-editor');\n        if (quillEditorContainer) {\n            quillEditorContainer.className = 'quill-editor'; \/\/ Reset classes\n            quillEditorContainer.innerHTML = ''; \/\/ Clear content\n\n            \/\/ Reset size to default in case user changed it by dragging corner\n            quillEditorContainer.style.height = '130px';\n        }\n\n        let inputsAndTextAreas = clonedTemplate.querySelectorAll('input, textarea, select');\n        inputsAndTextAreas.forEach(field => {\n            if (field.type === \"checkbox\") {\n                field.checked = true;\n                field.disabled = false;\n            } else {\n                field.value = '';\n                field.disabled = false;\n            }\n        });\n\n        originalTemplate.insertAdjacentElement(\"afterend\", clonedTemplate);\n\n        initMonthPickers(originalTemplate);\n        initMonthPickers(clonedTemplate);\n\n        if (quillEditorContainer) {\n            initQuillForWork(clonedTemplate.querySelector('.quill-editor'));\n        }\n    }\n\n    function removeField(button) {\n        let container = button.parentElement.parentElement.parentElement;\n        button.parentElement.parentElement.remove();\n        if (container.childElementCount == 1) {\n            let removeBtn = container.querySelector(\".remove-btn\");\n            removeBtn.style.visibility = \"hidden\";\n        }\n    }\n\n    document.getElementById(\"create-resume-form\").addEventListener(\"submit\", async function (event) {\n        event.preventDefault();\n\n        const form = document.getElementById(\"create-resume-form\");\n        const spinner = document.getElementById(\"loading-spinner\");\n        const status = document.getElementById(\"status\");\n        status.textContent = \"\"; \/\/ Clear previous messages\n\n        \/\/ Fade out the form smoothly\n        form.style.display = \"none\";\n        spinner.style.display = \"block\";\n        spinner.style.opacity = \"1\";\n        spinner.scrollIntoView({ behavior: \"smooth\", block: \"center\" });\n\n        \/\/ Build resume data\n        const resumeData = {\n            personal_info: {\n                first_name: document.getElementById('firstName').value,\n                last_name: document.getElementById('lastName').value,\n                email: document.getElementById('email').value,\n                phone: document.getElementById('phone').value,\n                linkedin_url: document.getElementById('linkedin').value.trim(),\n                address: document.getElementById('address').value,\n                extra_info: document.getElementById('extraInfo').value,\n                language: \"en\"\n            },\n            skills: [],\n            work_experience: [],\n            education: [],\n            languages: [],\n            homepage: document.getElementById('homepage').value,\n            \/\/ Required by the API; the checkbox is required, so the form can't be submitted without it\n            consent: document.getElementById('consentCheckbox').checked\n        };\n\n        \/\/ Toggle means AI usage when ON\n        const useAIGeneratedAboutMe = document.getElementById('aboutMeToggle').checked;\n        resumeData.personal_info.about_me_use_ai = useAIGeneratedAboutMe;\n        resumeData.personal_info.about_me = useAIGeneratedAboutMe ? '' : document.getElementById('aboutMe').value;\n\n        \/\/ Skills\n        document.querySelectorAll('#skillsContainer input[name=\"skills[]\"]').forEach(input => {\n            if (input.value) resumeData.skills.push(input.value);\n        });\n\n        \/\/ Work Experience\n        document.querySelectorAll('#workExperienceContainer > div').forEach(workBlock => {\n            const jobTitle = workBlock.querySelector('input[name=\"job_titles[]\"]').value;\n            const companyName = workBlock.querySelector('input[name=\"company_names[]\"]').value;\n            if (jobTitle || companyName) {\n                resumeData.work_experience.push({\n                    job_title: jobTitle,\n                    company_name: companyName,\n                    work_from: workBlock.querySelector('input[name=\"work_from[]\"]').value,\n                    work_to: workBlock.querySelector('input[name=\"work_to[]\"]').value,\n                    job_description: workBlock.querySelector('textarea[name=\"job_descriptions[]\"]').value\n                });\n            }\n        });\n\n        \/\/ Education\n        document.querySelectorAll('#studiesContainer > div').forEach(studyBlock => {\n            const fieldOfStudy = studyBlock.querySelector('input[name=\"fields_of_study[]\"]').value;\n            const university = studyBlock.querySelector('input[name=\"universities[]\"]').value;\n            if (fieldOfStudy || university) {\n                resumeData.education.push({\n                    field_of_study: fieldOfStudy,\n                    university: university,\n                    study_from: studyBlock.querySelector('input[name=\"studies_from[]\"]').value,\n                    study_to: studyBlock.querySelector('input[name=\"studies_to[]\"]').value\n                });\n            }\n        });\n\n        \/\/ Languages\n        document.querySelectorAll('#languagesContainer > div').forEach(langBlock => {\n            const langName = langBlock.querySelector('input[name=\"language_name[]\"]').value;\n            if (langName) {\n                resumeData.languages.push({\n                    name: langName,\n                    proficiency: parseInt(langBlock.querySelector('select[name=\"languages_proficiency[]\"]').value, 10)\n                });\n            }\n        });\n\n        try {\n            const response = await fetch(PROXY_CREATE_RESUME_URL, {\n                method: \"POST\",\n                headers: {\n                    \"Content-Type\": \"application\/json\",\n                    \"X-WP-Nonce\": WpApiSettings.nonce\n                },\n                body: JSON.stringify(resumeData),\n            });\n\n            const data = await response.json();\n\n            if (!data.id) throw new Error(\"Resume creation failed. Check your input and try again.\");\n\n            const improvementsBtn = document.getElementById(\"improvements-btn\");\n            const improvementsModal = document.getElementById(\"improvements-modal\");\n            const improvementsList = document.getElementById(\"improvements-list\");\n\n            if (data.improvements && data.improvements.length > 0) {\n                const listItems = data.improvements\n                    .map(item => `<li style=\"margin-bottom: 8px;\">${translateImprovement(item)}<\/li>`)\n                    .join(\"\");\n\n                improvementsList.innerHTML = `<ul style=\"padding-left: 20px; margin: 0; list-style-type: disc;\">${listItems}<\/ul>`;\n\n                improvementsBtn.style.display = \"inline-block\";\n                improvementsBtn.onclick = (e) => {\n                    e.preventDefault();\n                    improvementsModal.showModal();\n                };\n            } else {\n                improvementsBtn.style.display = \"none\";\n            }\n\n            \/\/ The download link is requested through WordPress, which adds the API key\n            const urlForm = new FormData();\n            urlForm.append(\"action\", \"get_full_resume_url\");\n            urlForm.append(\"security\", resumeViewerNonce);\n            urlForm.append(\"resume_uuid\", data.id);\n            const presignedUrlResponse = await fetch(resumeCreatorAjax.ajax_url, {\n                method: \"POST\",\n                credentials: \"same-origin\",\n                body: urlForm\n            });\n\n            const urlResult = await presignedUrlResponse.json().catch(() => null);\n            const urlData = (urlResult && urlResult.success && urlResult.data) ? urlResult.data : {};\n            if (!urlData.url) throw new Error(\"Could not generate a download link for the resume.\");\n\n            spinner.style.opacity = \"0\";\n            setTimeout(() => {\n                spinner.style.display = \"none\";\n\n                const viewer = document.getElementById(\"resume-viewer\");\n                const container = document.getElementById(\"pdf-container\");\n                container.innerHTML = \"\"; \/\/ Clear old content\n\n                viewer.style.display = \"block\";\n                setTimeout(() => (viewer.style.opacity = \"1\"), 50);\n\n                \/\/ Render the PDF inside our container\n                const url = urlData.url;\n                pdfjsLib.getDocument(url).promise.then(pdf => {\n                    const containerWidth = container.clientWidth;\n\n                    for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {\n                        pdf.getPage(pageNum).then(page => {\n                            const unscaledViewport = page.getViewport({ scale: 1 });\n\n                            \/\/ Match the visible width, but render sharper on high-DPI screens\n                            const devicePixelRatio = window.devicePixelRatio || 1;\n                            const scale = (containerWidth \/ unscaledViewport.width) * devicePixelRatio;\n                            const viewport = page.getViewport({ scale });\n\n                            const canvas = document.createElement(\"canvas\");\n                            const context = canvas.getContext(\"2d\");\n\n                            \/\/ Set actual pixel dimensions\n                            canvas.width = viewport.width;\n                            canvas.height = viewport.height;\n\n                            \/\/ Scale back down visually to fit the container\n                            canvas.style.width = `${viewport.width \/ devicePixelRatio}px`;\n                            canvas.style.height = `${viewport.height \/ devicePixelRatio}px`;\n\n                            const renderContext = { canvasContext: context, viewport };\n                            page.render(renderContext);\n                            container.appendChild(canvas);\n                        });\n                    }\n                });\n            }, 400);\n\n            document.getElementById(\"download-resume-btn\").onclick = async () => {\n                try {\n                    const response = await fetch(urlData.url, { mode: \"cors\" });\n                    const blob = await response.blob();\n\n                    const blobUrl = window.URL.createObjectURL(blob);\n                    const link = document.createElement(\"a\");\n                    link.href = blobUrl;\n                    link.download = data.name || \"cv.pdf\";\n                    document.body.appendChild(link);\n                    link.click();\n                    document.body.removeChild(link);\n\n                    \/\/ Clean up\n                    window.URL.revokeObjectURL(blobUrl);\n                } catch (err) {\n                    alert(\"Error downloading the resume. Please try again.\");\n                    console.error(\"Download error:\", err);\n                }\n            };\n\n            document.getElementById(\"back-to-form-btn\").onclick = () => {\n                const viewer = document.getElementById(\"resume-viewer\");\n                viewer.style.opacity = \"0\";\n                setTimeout(() => {\n                    viewer.style.display = \"none\";\n                    form.style.display = \"block\";\n                    setTimeout(() => (form.style.opacity = \"1\"), 50);\n                    form.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\n                }, 400);\n            };\n\n            document.getElementById(\"match-resume-btn\").onclick = async () => {\n                const matchBtn = document.getElementById(\"match-resume-btn\");\n                const buttonText = matchBtn.querySelector(\".button-text\");\n                const spinner = matchBtn.querySelector(\".loading-spinner\");\n\n                const resumeId = data.id;\n                const resumeName = data.name;\n\n                try {\n                    \/\/ Turn on loading state\n                    matchBtn.disabled = true;\n                    matchBtn.classList.add(\"loading\");\n                    buttonText.style.display = \"none\";\n                    spinner.style.display = \"inline-block\";\n\n                    const formData = new FormData();\n                    formData.append(\"action\", \"fetch_all_matching_scores\");\n                    formData.append(\"security\", resumeCreatorAjax.nonce); \/\/ use the nonce\n                    formData.append(\"resume_id\", resumeId);\n\n                    const response = await fetch(resumeCreatorAjax.ajax_url, {\n                        method: \"POST\",\n                        body: formData,\n                    });\n\n                    const result = await response.json();\n                    if (!result.success) throw new Error(\"Could not match the resume with vacancies.\");\n\n                    const resumeDataCookie = {\n                        id: resumeId,\n                        name: resumeName,\n                    };\n                    document.cookie = `resume_data=${encodeURIComponent(\n                        JSON.stringify(resumeDataCookie)\n                    )}; path=\/; max-age=${24 * 60 * 60}`;\n                    document.cookie = `matching-scores=${encodeURIComponent(\n                        JSON.stringify(result.data)\n                    )}; path=\/; max-age=${24 * 60 * 60}`;\n\n                    \/\/ Redirect to vacatures page\n                    window.location.href = \"\/en\/vacancies\";\n                } catch (error) {\n                    console.error(\"Error matching resume:\", error);\n\n                    \/\/ Turn off loading state on failure\n                    matchBtn.disabled = false;\n                    matchBtn.classList.remove(\"loading\");\n                    buttonText.style.display = \"inline-block\";\n                    spinner.style.display = \"none\";\n                }\n            };\n\n        } catch (error) {\n            spinner.style.display = \"none\";\n            form.style.display = \"block\";\n            setTimeout(() => (form.style.opacity = \"1\"), 100);\n            status.textContent = error.message;\n            document.getElementById(\"status\").scrollIntoView({ behavior: \"smooth\", block: \"center\" });\n        }\n    });\n<\/script>[\/vc_column_text][\/vc_column][\/vc_row]\n","protected":false},"excerpt":{"rendered":"<p>[vc_row type=&#8221;in_container&#8221; full_screen_row_position=&#8221;middle&#8221; column_margin=&#8221;default&#8221; column_direction=&#8221;default&#8221; column_direction_tablet=&#8221;default&#8221; column_direction_phone=&#8221;default&#8221; scene_position=&#8221;center&#8221; text_color=&#8221;dark&#8221; text_align=&#8221;left&#8221; row_border_radius=&#8221;none&#8221; row_border_radius_applies=&#8221;bg&#8221; row_position_desktop=&#8221;default&#8221; row_position_tablet=&#8221;inherit&#8221; row_position_phone=&#8221;inherit&#8221; overflow=&#8221;visible&#8221; overlay_strength=&#8221;0.3&#8243; gradient_direction=&#8221;left_to_right&#8221; shape_divider_position=&#8221;bottom&#8221; bg_image_animation=&#8221;none&#8221;][vc_column column_padding=&#8221;no-extra-padding&#8221; column_padding_tablet=&#8221;inherit&#8221; column_padding_phone=&#8221;inherit&#8221; column_padding_position=&#8221;all&#8221; flex_gap_desktop=&#8221;10px&#8221; column_element_direction_desktop=&#8221;default&#8221; column_element_spacing=&#8221;default&#8221; desktop_text_alignment=&#8221;default&#8221; tablet_text_alignment=&#8221;default&#8221; phone_text_alignment=&#8221;default&#8221;&#8230;<\/p>\n","protected":false},"author":16,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"content-type":"","footnotes":""},"class_list":["post-2567","page","type-page","status-publish"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Create Resume - Headit.be<\/title>\n<meta name=\"description\" content=\"Create your resume here and let Headit create a professional resume for you, automatically supported by AI and tailored to your profile.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/headit.be\/en\/create-resume\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create Resume - Headit.be\" \/>\n<meta property=\"og:description\" content=\"Create your resume here and let Headit create a professional resume for you, automatically supported by AI and tailored to your profile.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/headit.be\/en\/create-resume\/\" \/>\n<meta property=\"og:site_name\" content=\"Headit.be\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-21T13:14:25+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/headit.be\\\/en\\\/create-resume\\\/\",\"url\":\"https:\\\/\\\/headit.be\\\/en\\\/create-resume\\\/\",\"name\":\"Create Resume - Headit.be\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/headit.be\\\/#website\"},\"datePublished\":\"2026-04-21T13:06:01+00:00\",\"dateModified\":\"2026-04-21T13:14:25+00:00\",\"description\":\"Create your resume here and let Headit create a professional resume for you, automatically supported by AI and tailored to your profile.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/headit.be\\\/en\\\/create-resume\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/headit.be\\\/en\\\/create-resume\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/headit.be\\\/en\\\/create-resume\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/headit.be\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create Resume\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/headit.be\\\/#website\",\"url\":\"https:\\\/\\\/headit.be\\\/\",\"name\":\"Headit.be\",\"description\":\"100% gedreven om de juiste mensen met de juiste bedrijven te verbinden\",\"publisher\":{\"@id\":\"https:\\\/\\\/headit.be\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/headit.be\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/headit.be\\\/#organization\",\"name\":\"Headit\",\"url\":\"https:\\\/\\\/headit.be\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/headit.be\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/headit.be\\\/wp-content\\\/uploads\\\/2021\\\/11\\\/HEADIT_logo_colour@2x.png\",\"contentUrl\":\"https:\\\/\\\/headit.be\\\/wp-content\\\/uploads\\\/2021\\\/11\\\/HEADIT_logo_colour@2x.png\",\"width\":412,\"height\":324,\"caption\":\"Headit\"},\"image\":{\"@id\":\"https:\\\/\\\/headit.be\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create Resume - Headit.be","description":"Create your resume here and let Headit create a professional resume for you, automatically supported by AI and tailored to your profile.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/headit.be\/en\/create-resume\/","og_locale":"en_US","og_type":"article","og_title":"Create Resume - Headit.be","og_description":"Create your resume here and let Headit create a professional resume for you, automatically supported by AI and tailored to your profile.","og_url":"https:\/\/headit.be\/en\/create-resume\/","og_site_name":"Headit.be","article_modified_time":"2026-04-21T13:14:25+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/headit.be\/en\/create-resume\/","url":"https:\/\/headit.be\/en\/create-resume\/","name":"Create Resume - Headit.be","isPartOf":{"@id":"https:\/\/headit.be\/#website"},"datePublished":"2026-04-21T13:06:01+00:00","dateModified":"2026-04-21T13:14:25+00:00","description":"Create your resume here and let Headit create a professional resume for you, automatically supported by AI and tailored to your profile.","breadcrumb":{"@id":"https:\/\/headit.be\/en\/create-resume\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/headit.be\/en\/create-resume\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/headit.be\/en\/create-resume\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/headit.be\/en\/"},{"@type":"ListItem","position":2,"name":"Create Resume"}]},{"@type":"WebSite","@id":"https:\/\/headit.be\/#website","url":"https:\/\/headit.be\/","name":"Headit.be","description":"100% gedreven om de juiste mensen met de juiste bedrijven te verbinden","publisher":{"@id":"https:\/\/headit.be\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/headit.be\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/headit.be\/#organization","name":"Headit","url":"https:\/\/headit.be\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/headit.be\/#\/schema\/logo\/image\/","url":"https:\/\/headit.be\/wp-content\/uploads\/2021\/11\/HEADIT_logo_colour@2x.png","contentUrl":"https:\/\/headit.be\/wp-content\/uploads\/2021\/11\/HEADIT_logo_colour@2x.png","width":412,"height":324,"caption":"Headit"},"image":{"@id":"https:\/\/headit.be\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/headit.be\/en\/wp-json\/wp\/v2\/pages\/2567","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/headit.be\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/headit.be\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/headit.be\/en\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/headit.be\/en\/wp-json\/wp\/v2\/comments?post=2567"}],"version-history":[{"count":2,"href":"https:\/\/headit.be\/en\/wp-json\/wp\/v2\/pages\/2567\/revisions"}],"predecessor-version":[{"id":2573,"href":"https:\/\/headit.be\/en\/wp-json\/wp\/v2\/pages\/2567\/revisions\/2573"}],"wp:attachment":[{"href":"https:\/\/headit.be\/en\/wp-json\/wp\/v2\/media?parent=2567"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}