{"id":149909,"date":"2026-03-25T21:12:02","date_gmt":"2026-03-25T19:12:02","guid":{"rendered":"https:\/\/www.mysep.gr\/?p=149909"},"modified":"2026-03-27T22:45:00","modified_gmt":"2026-03-27T20:45:00","slug":"%ce%b4%ce%b7%ce%bc%ce%b9%ce%bf%cf%8d%cf%81%ce%b3%ce%b7%cf%83%ce%b5-%cf%84%ce%bf-%ce%b2%ce%b9%ce%bf%ce%b3%cf%81%ce%b1%cf%86%ce%b9%ce%ba%cf%8c-%cf%83%ce%bf%cf%85","status":"publish","type":"post","link":"https:\/\/www.mysep.gr\/?p=149909","title":{"rendered":"mysep CV"},"content":{"rendered":"<p><!--more--><\/p>\n<p style=\"padding-left: 40px;\"><a href=\"https:\/\/www.mysep.gr\/?p=149935\" target=\"_blank\" rel=\"noopener\">\u03a0\u03ce\u03c2 \u03bd\u03b1 \u03c6\u03c4\u03b9\u03ac\u03be\u03b5\u03b9\u03c2 \u03ad\u03bd\u03b1 \u03c3\u03c9\u03c3\u03c4\u03cc \u03b2\u03b9\u03bf\u03b3\u03c1\u03b1\u03c6\u03b9\u03ba\u03cc \u2013 \u039f \u03c0\u03bb\u03ae\u03c1\u03b7\u03c2 \u03bf\u03b4\u03b7\u03b3\u03cc\u03c2 \u03b3\u03b9\u03b1 \u03bd\u03ad\u03bf\u03c5\u03c2<\/a><\/p>\n<p style=\"padding-left: 40px;\"><a href=\"https:\/\/www.mysep.gr\/?p=149937\" target=\"_blank\" rel=\"noopener\">\u039f\u03b4\u03b7\u03b3\u03cc\u03c2 \u03c3\u03c5\u03bc\u03c0\u03bb\u03ae\u03c1\u03c9\u03c3\u03b7\u03c2 \u03c4\u03bf\u03c5 \u03b5\u03c1\u03b3\u03b1\u03bb\u03b5\u03af\u03bf\u03c5 mysep\u00a0 CV<\/a><\/p>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"><\/script>\r\n\r\n<div id=\"mysep-cv-builder\">\r\n  <div class=\"cv-shell\">\r\n    <div class=\"cv-topbar\">\r\n      <div>\r\n        <h2>\u0394\u03b7\u03bc\u03b9\u03bf\u03cd\u03c1\u03b3\u03b7\u03c3\u03b5 \u03c4\u03bf \u03b2\u03b9\u03bf\u03b3\u03c1\u03b1\u03c6\u03b9\u03ba\u03cc \u03c3\u03bf\u03c5<\/h2>\r\n        <p>\u03a3\u03c5\u03bc\u03c0\u03bb\u03ae\u03c1\u03c9\u03c3\u03b5 \u03c4\u03b1 \u03c3\u03c4\u03bf\u03b9\u03c7\u03b5\u03af\u03b1 \u03c3\u03bf\u03c5, \u03b5\u03c0\u03af\u03bb\u03b5\u03be\u03b5 \u03b5\u03bc\u03c6\u03ac\u03bd\u03b9\u03c3\u03b7 \u03ba\u03b1\u03b9 \u03ba\u03b1\u03c4\u03ad\u03b2\u03b1\u03c3\u03ad \u03c4\u03bf \u03c3\u03b5 PDF.<\/p>\r\n      <\/div>\r\n      <div class=\"cv-progress-wrap\">\r\n        <div class=\"cv-progress-label\">\u0392\u03ae\u03bc\u03b1 <span id=\"cvCurrentStep\">1<\/span> \/ <span id=\"cvTotalSteps\">10<\/span><\/div>\r\n        <div class=\"cv-progress\"><span id=\"cvProgressBar\"><\/span><\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"cv-card\">\r\n      <form id=\"cvForm\" novalidate>\r\n        <section class=\"cv-step active\" data-step=\"1\">\r\n          <h3>1. \u0392\u03b1\u03c3\u03b9\u03ba\u03ac \u03c3\u03c4\u03bf\u03b9\u03c7\u03b5\u03af\u03b1<\/h3>\r\n          <div class=\"cv-grid cv-grid-2\">\r\n            <div class=\"cv-field\">\r\n              <label>\u039f\u03bd\u03bf\u03bc\u03b1\u03c4\u03b5\u03c0\u03ce\u03bd\u03c5\u03bc\u03bf *<\/label>\r\n              <input type=\"text\" name=\"fullName\" required>\r\n            <\/div>\r\n            <div class=\"cv-field\">\r\n              <label>\u03a4\u03af\u03c4\u03bb\u03bf\u03c2 \u03b2\u03b9\u03bf\u03b3\u03c1\u03b1\u03c6\u03b9\u03ba\u03bf\u03cd<\/label>\r\n              <input type=\"text\" name=\"headline\" placeholder=\"\u03c0.\u03c7. \u0391\u03c0\u03cc\u03c6\u03bf\u03b9\u03c4\u03bf\u03c2 \u03a0\u03bb\u03b7\u03c1\u03bf\u03c6\u03bf\u03c1\u03b9\u03ba\u03ae\u03c2\">\r\n            <\/div>\r\n            <div class=\"cv-field\">\r\n              <label>\u03a0\u03cc\u03bb\u03b7 \/ \u03a0\u03b5\u03c1\u03b9\u03bf\u03c7\u03ae *<\/label>\r\n              <input type=\"text\" name=\"city\" required>\r\n            <\/div>\r\n            <div class=\"cv-field\">\r\n              <label>\u03a4\u03b7\u03bb\u03ad\u03c6\u03c9\u03bd\u03bf *<\/label>\r\n              <input type=\"text\" name=\"phone\" required>\r\n            <\/div>\r\n            <div class=\"cv-field\">\r\n              <label>Email *<\/label>\r\n              <input type=\"email\" name=\"email\" required>\r\n            <\/div>\r\n            <div class=\"cv-field\">\r\n              <label>\u0397\u03bc\u03b5\u03c1\u03bf\u03bc\u03b7\u03bd\u03af\u03b1 \u03b3\u03ad\u03bd\u03bd\u03b7\u03c3\u03b7\u03c2<\/label>\r\n              <input type=\"text\" name=\"birthDate\" placeholder=\"\u03c0.\u03c7. 30\/05\/2002\">\r\n            <\/div>\r\n            <div class=\"cv-field\">\r\n              <label>LinkedIn<\/label>\r\n              <input type=\"url\" name=\"linkedin\">\r\n            <\/div>\r\n            <div class=\"cv-field\">\r\n              <label>Website \/ Portfolio<\/label>\r\n              <input type=\"url\" name=\"website\">\r\n            <\/div>\r\n            <div class=\"cv-field\">\r\n              <label>GitHub<\/label>\r\n              <input type=\"url\" name=\"github\">\r\n            <\/div>\r\n          <\/div>\r\n        <\/section>\r\n\r\n        <section class=\"cv-step\" data-step=\"2\">\r\n          <h3>2. \u03a0\u03c1\u03bf\u03c3\u03c9\u03c0\u03b9\u03ba\u03cc \u03c0\u03c1\u03bf\u03c6\u03af\u03bb<\/h3>\r\n          <div class=\"cv-inline-actions\">\r\n            <button type=\"button\" class=\"cv-secondary small\" id=\"fillProfileBeginner\">\u03a0\u03c1\u03cc\u03c4\u03b1\u03c3\u03b7 \u03b3\u03b9\u03b1 \u03bd\u03ad\u03bf\u03c5\u03c2 \u03c7\u03c9\u03c1\u03af\u03c2 \u03b5\u03bc\u03c0\u03b5\u03b9\u03c1\u03af\u03b1<\/button>\r\n            <button type=\"button\" class=\"cv-secondary small\" id=\"fillProfileExperienced\">\u03a0\u03c1\u03cc\u03c4\u03b1\u03c3\u03b7 \u03b3\u03b9\u03b1 \u03c7\u03c1\u03ae\u03c3\u03c4\u03b5\u03c2 \u03bc\u03b5 \u03b5\u03bc\u03c0\u03b5\u03b9\u03c1\u03af\u03b1<\/button>\r\n          <\/div>\r\n          <div class=\"cv-field\">\r\n            <label>\u03a3\u03cd\u03bd\u03c4\u03bf\u03bc\u03bf \u03c0\u03c1\u03bf\u03c3\u03c9\u03c0\u03b9\u03ba\u03cc \u03c0\u03c1\u03bf\u03c6\u03af\u03bb *<\/label>\r\n            <textarea name=\"profile\" rows=\"8\" required><\/textarea>\r\n          <\/div>\r\n        <\/section>\r\n\r\n        <section class=\"cv-step\" data-step=\"3\">\r\n          <h3>3. \u0395\u03ba\u03c0\u03b1\u03af\u03b4\u03b5\u03c5\u03c3\u03b7<\/h3>\r\n          <div id=\"educationList\"><\/div>\r\n          <button type=\"button\" class=\"cv-secondary\" id=\"addEducationBtn\">+ \u03a0\u03c1\u03bf\u03c3\u03b8\u03ae\u03ba\u03b7 \u03c3\u03c0\u03bf\u03c5\u03b4\u03ce\u03bd<\/button>\r\n        <\/section>\r\n\r\n        <section class=\"cv-step\" data-step=\"4\">\r\n          <h3>4. \u0395\u03bc\u03c0\u03b5\u03b9\u03c1\u03af\u03b1 \/ Projects<\/h3>\r\n          <div class=\"cv-field\">\r\n            <label>\u0388\u03c7\u03b5\u03b9\u03c2 \u03b5\u03c0\u03b1\u03b3\u03b3\u03b5\u03bb\u03bc\u03b1\u03c4\u03b9\u03ba\u03ae \u03b5\u03bc\u03c0\u03b5\u03b9\u03c1\u03af\u03b1;<\/label>\r\n            <div class=\"cv-radio-row\">\r\n              <label><input type=\"radio\" name=\"hasExperience\" value=\"yes\" checked> \u039d\u03b1\u03b9<\/label>\r\n              <label><input type=\"radio\" name=\"hasExperience\" value=\"no\"> \u038c\u03c7\u03b9<\/label>\r\n            <\/div>\r\n          <\/div>\r\n          <div id=\"experienceTitleHint\" class=\"cv-hint\">\u03a3\u03c5\u03bc\u03c0\u03bb\u03ae\u03c1\u03c9\u03c3\u03b5 \u03c4\u03b7\u03bd \u03b5\u03c0\u03b1\u03b3\u03b3\u03b5\u03bb\u03bc\u03b1\u03c4\u03b9\u03ba\u03ae \u03b5\u03bc\u03c0\u03b5\u03b9\u03c1\u03af\u03b1 \u03c3\u03bf\u03c5.<\/div>\r\n          <div id=\"experienceList\"><\/div>\r\n          <button type=\"button\" class=\"cv-secondary\" id=\"addExperienceBtn\">+ \u03a0\u03c1\u03bf\u03c3\u03b8\u03ae\u03ba\u03b7 \u03b5\u03b3\u03b3\u03c1\u03b1\u03c6\u03ae\u03c2<\/button>\r\n        <\/section>\r\n\r\n        <section class=\"cv-step\" data-step=\"5\">\r\n          <h3>5. \u0394\u03b5\u03be\u03b9\u03cc\u03c4\u03b7\u03c4\u03b5\u03c2<\/h3>\r\n          <div id=\"skillsList\"><\/div>\r\n          <button type=\"button\" class=\"cv-secondary\" id=\"addSkillBtn\">+ \u03a0\u03c1\u03bf\u03c3\u03b8\u03ae\u03ba\u03b7 \u03b4\u03b5\u03be\u03b9\u03cc\u03c4\u03b7\u03c4\u03b1\u03c2<\/button>\r\n        <\/section>\r\n\r\n        <section class=\"cv-step\" data-step=\"6\">\r\n          <h3>6. \u039e\u03ad\u03bd\u03b5\u03c2 \u03b3\u03bb\u03ce\u03c3\u03c3\u03b5\u03c2<\/h3>\r\n          <div id=\"languagesList\"><\/div>\r\n          <button type=\"button\" class=\"cv-secondary\" id=\"addLanguageBtn\">+ \u03a0\u03c1\u03bf\u03c3\u03b8\u03ae\u03ba\u03b7 \u03b3\u03bb\u03ce\u03c3\u03c3\u03b1\u03c2<\/button>\r\n        <\/section>\r\n\r\n        <section class=\"cv-step\" data-step=\"7\">\r\n          <h3>7. \u0393\u03bd\u03ce\u03c3\u03b5\u03b9\u03c2 \u0397\/\u03a5<\/h3>\r\n          <div id=\"computerSkillsList\"><\/div>\r\n          <button type=\"button\" class=\"cv-secondary\" id=\"addComputerSkillBtn\">+ \u03a0\u03c1\u03bf\u03c3\u03b8\u03ae\u03ba\u03b7 \u03b3\u03bd\u03ce\u03c3\u03b7\u03c2 \u0397\/\u03a5<\/button>\r\n        <\/section>\r\n\r\n        <section class=\"cv-step\" data-step=\"8\">\r\n          <h3>8. \u03a0\u03b9\u03c3\u03c4\u03bf\u03c0\u03bf\u03b9\u03ae\u03c3\u03b5\u03b9\u03c2 \/ \u03a3\u03b5\u03bc\u03b9\u03bd\u03ac\u03c1\u03b9\u03b1<\/h3>\r\n          <div id=\"certificationsList\"><\/div>\r\n          <button type=\"button\" class=\"cv-secondary\" id=\"addCertificationBtn\">+ \u03a0\u03c1\u03bf\u03c3\u03b8\u03ae\u03ba\u03b7 \u03c0\u03b9\u03c3\u03c4\u03bf\u03c0\u03bf\u03af\u03b7\u03c3\u03b7\u03c2<\/button>\r\n        <\/section>\r\n\r\n        <section class=\"cv-step\" data-step=\"9\">\r\n          <h3>9. \u03a0\u03c1\u03cc\u03c3\u03b8\u03b5\u03c4\u03b1 \u03c0\u03c1\u03bf\u03c3\u03cc\u03bd\u03c4\u03b1<\/h3>\r\n          <div id=\"extrasList\"><\/div>\r\n          <button type=\"button\" class=\"cv-secondary\" id=\"addExtraBtn\">+ \u03a0\u03c1\u03bf\u03c3\u03b8\u03ae\u03ba\u03b7 \u03c0\u03c1\u03bf\u03c3\u03cc\u03bd\u03c4\u03bf\u03c2<\/button>\r\n        <\/section>\r\n\r\n        <section class=\"cv-step\" data-step=\"10\">\r\n          <h3>10. \u0394\u03b5\u03c2 \u03c0\u03ce\u03c2 \u03c6\u03b1\u03af\u03bd\u03b5\u03c4\u03b1\u03b9 \u03c4\u03bf \u03b2\u03b9\u03bf\u03b3\u03c1\u03b1\u03c6\u03b9\u03ba\u03cc \u03c3\u03bf\u03c5<\/h3>\r\n\r\n          <div class=\"template-list\">\r\n            <button type=\"button\" class=\"template-line selected\" data-template-btn=\"classic\">\u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1 1 Classic<\/button>\r\n            <button type=\"button\" class=\"template-line\" data-template-btn=\"modern\">\u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1 2 Modern<\/button>\r\n            <button type=\"button\" class=\"template-line\" data-template-btn=\"compact\">\u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1 3 Compact<\/button>\r\n          <\/div>\r\n\r\n          <div class=\"template-actions\">\r\n            <button type=\"button\" class=\"cv-secondary\" id=\"downloadPdfBtn\">\u039b\u03ae\u03c8\u03b7 \u03c3\u03b5 PDF<\/button>\r\n            <button type=\"button\" class=\"cv-secondary\" id=\"clearDraftBtn\">\u039a\u03b1\u03b8\u03b1\u03c1\u03b9\u03c3\u03bc\u03cc\u03c2 \u03b1\u03c0\u03bf\u03b8\u03b7\u03ba\u03b5\u03c5\u03bc\u03ad\u03bd\u03c9\u03bd \u03c3\u03c4\u03bf\u03b9\u03c7\u03b5\u03af\u03c9\u03bd<\/button>\r\n          <\/div>\r\n\r\n          <div class=\"single-preview-wrap\">\r\n            <div id=\"singlePreview\"><\/div>\r\n          <\/div>\r\n        <\/section>\r\n\r\n        <div class=\"cv-nav\">\r\n          <button type=\"button\" id=\"prevBtn\" class=\"cv-secondary\">\u03a0\u03c1\u03bf\u03b7\u03b3\u03bf\u03cd\u03bc\u03b5\u03bd\u03bf<\/button>\r\n          <button type=\"button\" id=\"nextBtn\" class=\"cv-primary\">\u0395\u03c0\u03cc\u03bc\u03b5\u03bd\u03bf<\/button>\r\n        <\/div>\r\n      <\/form>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div id=\"exportArea\" style=\"position:fixed; left:-10000px; top:0; width:794px; background:#fff; opacity:0; pointer-events:none; z-index:-1;\"><\/div>\r\n<\/div>\r\n\r\n<style>\r\n#mysep-cv-builder * { box-sizing:border-box; }\r\n#mysep-cv-builder{\r\n  --blue:#1f4f8d;\r\n  --blue2:#2a5fa7;\r\n  --light:#f5f9ff;\r\n  --border:#b9cde7;\r\n  --text:#1d2a38;\r\n  --muted:#667788;\r\n  --danger:#b3261e;\r\n  font-family:Arial, Helvetica, sans-serif;\r\n  color:var(--text);\r\n}\r\n#mysep-cv-builder .cv-shell{max-width:1180px;margin:30px auto;}\r\n#mysep-cv-builder .cv-topbar{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:20px;}\r\n#mysep-cv-builder .cv-topbar h2{margin:0 0 8px;color:var(--blue);font-size:32px;}\r\n#mysep-cv-builder .cv-topbar p{margin:0;color:var(--muted);font-size:15px;}\r\n#mysep-cv-builder .cv-progress-wrap{min-width:260px;background:#fff;border:2px solid var(--border);border-radius:14px;padding:14px;}\r\n#mysep-cv-builder .cv-progress-label{font-size:14px;color:var(--blue);margin-bottom:8px;font-weight:700;}\r\n#mysep-cv-builder .cv-progress{height:10px;background:#e9f1fb;border-radius:999px;overflow:hidden;}\r\n#mysep-cv-builder .cv-progress span{display:block;height:100%;width:10%;background:linear-gradient(90deg,var(--blue),var(--blue2));}\r\n#mysep-cv-builder .cv-card{background:#fff;border:3px solid var(--blue);border-radius:18px;padding:24px;box-shadow:0 10px 30px rgba(31,79,141,0.07);}\r\n#mysep-cv-builder .cv-step{display:none;}\r\n#mysep-cv-builder .cv-step.active{display:block;}\r\n#mysep-cv-builder .cv-step h3{margin:0 0 18px;color:var(--blue);font-size:24px;}\r\n#mysep-cv-builder .cv-grid{display:grid;gap:16px;}\r\n#mysep-cv-builder .cv-grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}\r\n#mysep-cv-builder .cv-field{margin-bottom:14px;}\r\n#mysep-cv-builder .cv-field label{display:block;font-weight:700;color:var(--blue);margin-bottom:7px;font-size:14px;}\r\n#mysep-cv-builder input[type=\"text\"],\r\n#mysep-cv-builder input[type=\"email\"],\r\n#mysep-cv-builder input[type=\"url\"],\r\n#mysep-cv-builder textarea,\r\n#mysep-cv-builder select{\r\n  width:100%;border:1px solid #c9d9ed;border-radius:12px;padding:12px 14px;font-size:15px;color:var(--text);background:#fff;\r\n}\r\n#mysep-cv-builder textarea{resize:vertical;min-height:150px;}\r\n#mysep-cv-builder input:focus,\r\n#mysep-cv-builder textarea:focus,\r\n#mysep-cv-builder select:focus{\r\n  outline:none;border-color:var(--blue2);box-shadow:0 0 0 3px rgba(45,109,193,0.12);\r\n}\r\n#mysep-cv-builder .cv-inline-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px;}\r\n#mysep-cv-builder .cv-radio-row{display:flex;gap:24px;flex-wrap:wrap;padding:8px 0 4px;}\r\n#mysep-cv-builder .cv-radio-row label{font-weight:400;color:var(--text);margin:0;}\r\n#mysep-cv-builder .cv-hint{color:var(--muted);font-size:14px;margin-bottom:16px;}\r\n#mysep-cv-builder .repeat-group{border:2px solid var(--border);border-radius:16px;background:var(--light);padding:16px;margin-bottom:16px;}\r\n#mysep-cv-builder .repeat-group-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}\r\n#mysep-cv-builder .repeat-group-title{font-weight:700;color:var(--blue);}\r\n#mysep-cv-builder .remove-row{border:none;background:#fff;color:var(--danger);border-radius:10px;padding:8px 12px;cursor:pointer;font-weight:700;}\r\n#mysep-cv-builder .cv-nav{display:flex;justify-content:space-between;gap:12px;margin-top:24px;}\r\n#mysep-cv-builder .cv-primary,\r\n#mysep-cv-builder .cv-secondary{\r\n  border:none;border-radius:12px;cursor:pointer;padding:12px 18px;font-size:15px;font-weight:700;\r\n}\r\n#mysep-cv-builder .cv-primary{background:var(--blue);color:#fff;}\r\n#mysep-cv-builder .cv-secondary{background:#e9f1fb;color:var(--blue);}\r\n#mysep-cv-builder .cv-secondary.small{padding:10px 14px;font-size:14px;}\r\n\r\n#mysep-cv-builder .template-list{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;}\r\n#mysep-cv-builder .template-line{\r\n  border:2px solid var(--border);\r\n  background:#fff;\r\n  color:var(--blue);\r\n  border-radius:12px;\r\n  padding:12px 16px;\r\n  font-size:15px;\r\n  font-weight:700;\r\n  cursor:pointer;\r\n}\r\n#mysep-cv-builder .template-line.selected{\r\n  border-color:var(--blue);\r\n  background:#eef5fd;\r\n  box-shadow:0 0 0 3px rgba(31,79,141,.08);\r\n}\r\n#mysep-cv-builder .template-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;}\r\n#mysep-cv-builder .single-preview-wrap{\r\n  border:2px solid var(--border);\r\n  border-radius:16px;\r\n  background:#f9fbfe;\r\n  padding:14px;\r\n  overflow:auto;\r\n}\r\n#mysep-cv-builder #singlePreview{min-width:760px;}\r\n#mysep-cv-builder *, #mysep-cv-builder *::before, #mysep-cv-builder *::after{box-sizing:border-box;}\r\n#mysep-cv-builder .error-field{border-color:var(--danger)!important;box-shadow:0 0 0 3px rgba(179,38,30,.08)!important;}\r\n\r\n.cv-document{\r\n  display:block;\r\n}\r\n.cv-page{\r\n  width:794px;\r\n  height:1123px;\r\n  background:#fff;\r\n  padding:18px;\r\n  margin:0 0 18px 0;\r\n  color:#24384c;\r\n  font-family:Arial, Helvetica, sans-serif;\r\n  page-break-after:always;\r\n  break-after:page;\r\n  box-sizing:border-box;\r\n  overflow:hidden;\r\n}\r\n.cv-page:last-child{page-break-after:auto;break-after:auto;}\r\n.cv-page-frame{\r\n  border:5px solid #1f4f8d;\r\n  padding:8px;\r\n  height:100%;\r\n  width:100%;\r\n  box-sizing:border-box;\r\n  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);\r\n  overflow:hidden;\r\n}\r\n.cv-page-inner{\r\n  border:3px solid #2e5f9a;\r\n  height:100%;\r\n  width:100%;\r\n  padding:6px 16px 18px 16px;\r\n  position:relative;\r\n  display:flex;\r\n  flex-direction:column;\r\n  box-sizing:border-box;\r\n  overflow:hidden;\r\n}\r\n.cv-page-header{\r\n  flex:0 0 auto;\r\n}\r\n.cv-page-body{\r\n  flex:1 1 auto;\r\n  min-height:0;\r\n  overflow:hidden;\r\n  padding-top:0;\r\n}\r\n.cv-page-body.compact-top{\r\n  padding-top:4px;\r\n}\r\n.cv-title-main{\r\n  text-align:center;\r\n  font-size:29px;\r\n  font-weight:700;\r\n  color:#21579c;\r\n  letter-spacing:.4px;\r\n  margin:2px 0 6px;\r\n  text-transform:uppercase;\r\n}\r\n.cv-of-word{\r\n  text-align:center;\r\n  font-size:17px;\r\n  color:#4a6788;\r\n  margin-bottom:6px;\r\n  text-transform:none;\r\n}\r\n.cv-sub-main{\r\n  text-align:center;\r\n  font-size:24px;\r\n  font-weight:700;\r\n  color:#21579c;\r\n  margin-bottom:12px;\r\n  line-height:1.2;\r\n}\r\n.cv-sub-main.upper{\r\n  text-transform:uppercase;\r\n}\r\n.cv-header-standard{\r\n  display:flex;\r\n  justify-content:flex-start;\r\n  align-items:flex-start;\r\n  gap:0;\r\n  padding:2px 0 8px;\r\n  border-bottom:3px solid #2b5c97;\r\n  margin-bottom:10px;\r\n}\r\n.cv-header-left{\r\n  flex:1 1 auto;\r\n  min-width:0;\r\n}\r\n.cv-headline{\r\n  margin-top:0;\r\n  font-size:16px;\r\n  color:#4e6a89;\r\n  font-weight:700;\r\n  line-height:1.45;\r\n}\r\n.cv-contact{\r\n  margin-top:8px;\r\n  font-size:13px;\r\n  color:#4f6983;\r\n  line-height:1.55;\r\n}\r\n.cv-link-line a{\r\n  color:#21579c;\r\n  text-decoration:none;\r\n  word-break:break-all;\r\n}\r\n.cv-continuation{\r\n  display:flex;\r\n  justify-content:space-between;\r\n  align-items:center;\r\n  border-bottom:2px solid #c2d5ea;\r\n  padding:0 0 8px;\r\n  margin-bottom:10px;\r\n}\r\n.cv-continuation-name{\r\n  font-size:15px;\r\n  font-weight:700;\r\n  color:#21579c;\r\n  letter-spacing:.2px;\r\n}\r\n.cv-continuation-label{\r\n  font-size:11px;\r\n  color:#6b829d;\r\n  text-transform:uppercase;\r\n  letter-spacing:.6px;\r\n}\r\n.cv-classic-row{\r\n  display:grid;\r\n  grid-template-columns:190px 1fr;\r\n  border:1px solid #cfd8e3;\r\n  border-top:none;\r\n}\r\n.cv-classic-row.first{\r\n  border-top:1px solid #cfd8e3;\r\n}\r\n.cv-classic-label{\r\n  padding:12px 14px;\r\n  font-weight:700;\r\n  color:#21579c;\r\n  font-size:15px;\r\n  border-right:1px solid #cfd8e3;\r\n}\r\n.cv-classic-label.empty{\r\n  color:transparent;\r\n}\r\n.cv-classic-content{\r\n  padding:12px 14px;\r\n  font-size:13px;\r\n  color:#2d3f51;\r\n  line-height:1.6;\r\n}\r\n.cv-classic-content p{margin:0 0 7px 0;}\r\n.cv-classic-item-title{\r\n  font-weight:700;\r\n  color:#24384c;\r\n  font-size:14px;\r\n}\r\n.cv-classic-item-sub{\r\n  color:#566f89;\r\n  margin-top:2px;\r\n}\r\n.cv-dot-line{\r\n  position:relative;\r\n  padding-left:16px;\r\n  margin:0 0 7px 0;\r\n  line-height:1.55;\r\n}\r\n.cv-dot-line:before{\r\n  content:\"\u00b7\";\r\n  position:absolute;\r\n  left:0;\r\n  top:0;\r\n  font-size:20px;\r\n  line-height:1;\r\n  color:#21579c;\r\n}\r\n.cv-section-block{\r\n  margin-bottom:12px;\r\n}\r\n.cv-section-title{\r\n  color:#21579c;\r\n  font-size:15px;\r\n  font-weight:700;\r\n  border-bottom:2px solid #d3e0ee;\r\n  padding-bottom:6px;\r\n  margin-bottom:8px;\r\n}\r\n.cv-item{\r\n  margin-bottom:10px;\r\n}\r\n.cv-item-title{\r\n  font-size:14px;\r\n  font-weight:700;\r\n  color:#24384c;\r\n  line-height:1.4;\r\n}\r\n.cv-item-sub{\r\n  font-size:13px;\r\n  color:#5a738d;\r\n  margin-top:2px;\r\n  line-height:1.5;\r\n}\r\n.cv-item-desc{\r\n  font-size:13px;\r\n  color:#2f4458;\r\n  line-height:1.62;\r\n  margin-top:5px;\r\n  white-space:pre-line;\r\n}\r\n.cv-two-col{\r\n  display:grid;\r\n  grid-template-columns:minmax(0,34%) minmax(0,66%);\r\n  gap:18px;\r\n  width:100%;\r\n}\r\n.cv-pill-wrap{\r\n  display:flex;\r\n  gap:10px;\r\n  flex-wrap:wrap;\r\n}\r\n.cv-pill{\r\n  display:inline-block;\r\n  padding:10px 14px;\r\n  border-radius:999px;\r\n  background:#edf3fa;\r\n  border:1px solid #ccdaea;\r\n  font-size:13px;\r\n  color:#334a60;\r\n  line-height:1.45;\r\n}\r\n.cv-simple-lines{\r\n  margin:0;\r\n}\r\n.cv-simple-lines .cv-dot-line:last-child{margin-bottom:0;}\r\n.cv-spacer-4{height:4px;}\r\n.cv-spacer-8{height:8px;}\r\n#printArea{\r\n  position:fixed;\r\n  left:-99999px;\r\n  top:0;\r\n  width:794px;\r\n  background:#fff;\r\n}\r\n\r\n\r\n#exportArea.pdf-export-mode{\r\n  width:794px !important;\r\n  margin:0 !important;\r\n  padding:0 !important;\r\n  overflow:hidden !important;\r\n  background:#fff !important;\r\n}\r\n#exportArea.pdf-export-mode .cv-document{\r\n  display:block !important;\r\n  width:794px !important;\r\n  margin:0 !important;\r\n  padding:0 !important;\r\n}\r\n#exportArea.pdf-export-mode .cv-page{\r\n  width:794px !important;\r\n  height:1122px !important;\r\n  margin:0 !important;\r\n  padding:18px !important;\r\n  box-sizing:border-box !important;\r\n  overflow:hidden !important;\r\n  page-break-after:auto !important;\r\n  break-after:auto !important;\r\n}\r\n#exportArea.pdf-export-mode .cv-page-frame,\r\n#exportArea.pdf-export-mode .cv-page-inner,\r\n#exportArea.pdf-export-mode .cv-page-body{\r\n  overflow:hidden !important;\r\n}\r\n\r\n@media (max-width:1024px){\r\n  #mysep-cv-builder .cv-grid-2{grid-template-columns:1fr;}\r\n  #mysep-cv-builder .cv-topbar{flex-direction:column;}\r\n  #mysep-cv-builder .template-list{flex-direction:column;}\r\n}\r\n\r\n@media print{\r\n  html, body{\r\n    margin:0 !important;\r\n    padding:0 !important;\r\n    background:#fff !important;\r\n  }\r\n  .cv-document{\r\n    display:block !important;\r\n  }\r\n  .cv-page{\r\n    margin:0 !important;\r\n    padding:0 !important;\r\n    width:794px !important;\r\n    height:1123px !important;\r\n    page-break-after:always !important;\r\n    break-after:page !important;\r\n  }\r\n  .cv-page:last-child{\r\n    page-break-after:auto !important;\r\n    break-after:auto !important;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function(){\r\n  const STORAGE_KEY = \"mysep_cv_builder_v4\";\r\n  let currentStep = 1;\r\n  let selectedTemplate = \"classic\";\r\n\r\n  const steps = Array.from(document.querySelectorAll(\"#mysep-cv-builder .cv-step\"));\r\n  const totalSteps = steps.length;\r\n  const form = document.getElementById(\"cvForm\");\r\n\r\n  const educationList = document.getElementById(\"educationList\");\r\n  const experienceList = document.getElementById(\"experienceList\");\r\n  const skillsList = document.getElementById(\"skillsList\");\r\n  const languagesList = document.getElementById(\"languagesList\");\r\n  const computerSkillsList = document.getElementById(\"computerSkillsList\");\r\n  const certificationsList = document.getElementById(\"certificationsList\");\r\n  const extrasList = document.getElementById(\"extrasList\");\r\n\r\n  function clean(v){ return (v || \"\").trim(); }\r\n  function escapeHtml(str){\r\n    return (str || \"\").replace(\/[&<>\"']\/g, function(m){\r\n      return ({ \"&\":\"&amp;\", \"<\":\"&lt;\", \">\":\"&gt;\", '\"':\"&quot;\", \"'\":\"&#39;\" })[m];\r\n    });\r\n  }\r\n  function isValidUrl(value){\r\n    if(!value) return true;\r\n    try { new URL(value); return true; } catch(e){ return false; }\r\n  }\r\n\r\n  function stepUpdate(){\r\n    steps.forEach(step => step.classList.remove(\"active\"));\r\n    document.querySelector(`#mysep-cv-builder .cv-step[data-step=\"${currentStep}\"]`).classList.add(\"active\");\r\n    document.getElementById(\"cvCurrentStep\").textContent = currentStep;\r\n    document.getElementById(\"cvTotalSteps\").textContent = totalSteps;\r\n    document.getElementById(\"cvProgressBar\").style.width = ((currentStep \/ totalSteps) * 100) + \"%\";\r\n\r\n    const prevBtn = document.getElementById(\"prevBtn\");\r\n    const nextBtn = document.getElementById(\"nextBtn\");\r\n\r\n    prevBtn.style.visibility = currentStep === 1 ? \"hidden\" : \"visible\";\r\n\r\n    if(currentStep === totalSteps){\r\n      nextBtn.style.display = \"none\";\r\n      renderSelectedPreview();\r\n    } else {\r\n      nextBtn.style.display = \"inline-block\";\r\n    }\r\n    saveDraft();\r\n  }\r\n\r\n  function validateStep(stepNumber){\r\n    let valid = true;\r\n    const step = document.querySelector(`#mysep-cv-builder .cv-step[data-step=\"${stepNumber}\"]`);\r\n    if(!step) return true;\r\n\r\n    const requiredFields = step.querySelectorAll(\"[required]\");\r\n\r\n    requiredFields.forEach(field => {\r\n      field.classList.remove(\"error-field\");\r\n      const value = (field.value || \"\").trim();\r\n\r\n      if(value === \"\"){\r\n        field.classList.add(\"error-field\");\r\n        valid = false;\r\n        return;\r\n      }\r\n\r\n      if(field.type === \"email\"){\r\n        const emailPattern = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\r\n        if(!emailPattern.test(value)){\r\n          field.classList.add(\"error-field\");\r\n          valid = false;\r\n        }\r\n      }\r\n    });\r\n\r\n    if(stepNumber === 1){\r\n      const phoneField = form.querySelector('[name=\"phone\"]');\r\n      const emailField = form.querySelector('[name=\"email\"]');\r\n\r\n      [\"linkedin\",\"website\",\"github\"].forEach(name => {\r\n        const f = form.querySelector(`[name=\"${name}\"]`);\r\n        if(!f) return;\r\n        f.classList.remove(\"error-field\");\r\n        const v = clean(f.value);\r\n        if(v && !isValidUrl(v)){\r\n          f.classList.add(\"error-field\");\r\n          valid = false;\r\n        }\r\n      });\r\n\r\n      if(phoneField){\r\n        phoneField.classList.remove(\"error-field\");\r\n        const cleanPhone = clean(phoneField.value).replace(\/[^\\d+]\/g, \"\");\r\n        if(cleanPhone.length < 8){\r\n          phoneField.classList.add(\"error-field\");\r\n          valid = false;\r\n        }\r\n      }\r\n\r\n      if(emailField){\r\n        emailField.classList.remove(\"error-field\");\r\n        const emailValue = clean(emailField.value);\r\n        const emailPattern = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\r\n        if(!emailPattern.test(emailValue)){\r\n          emailField.classList.add(\"error-field\");\r\n          valid = false;\r\n        }\r\n      }\r\n    }\r\n\r\n    if(stepNumber === 2){\r\n      const profileField = form.querySelector('[name=\"profile\"]');\r\n      if(profileField){\r\n        profileField.classList.remove(\"error-field\");\r\n        if(clean(profileField.value).length < 20){\r\n          profileField.classList.add(\"error-field\");\r\n          valid = false;\r\n        }\r\n      }\r\n    }\r\n\r\n    if(stepNumber === 3 && educationList.children.length === 0){\r\n      addEducationRow();\r\n      valid = false;\r\n    }\r\n\r\n    return valid;\r\n  }\r\n\r\n  function levelOptions(values, selectedValue = \"\"){\r\n    return values.map(v => `<option value=\"${escapeHtml(v)}\" ${v === selectedValue ? \"selected\" : \"\"}>${escapeHtml(v || \"\u0395\u03c0\u03af\u03bb\u03b5\u03be\u03b5\")}<\/option>`).join(\"\");\r\n  }\r\n\r\n  function addEducationRow(data = {}){\r\n    educationList.insertAdjacentHTML(\"beforeend\", `\r\n      <div class=\"repeat-group\">\r\n        <div class=\"repeat-group-header\">\r\n          <div class=\"repeat-group-title\">\u03a3\u03c0\u03bf\u03c5\u03b4\u03ad\u03c2<\/div>\r\n          <button type=\"button\" class=\"remove-row\">\u0394\u03b9\u03b1\u03b3\u03c1\u03b1\u03c6\u03ae<\/button>\r\n        <\/div>\r\n        <div class=\"cv-grid cv-grid-2\">\r\n          <div class=\"cv-field\">\r\n            <label>\u03a4\u03af\u03c4\u03bb\u03bf\u03c2 \u03c3\u03c0\u03bf\u03c5\u03b4\u03ce\u03bd *<\/label>\r\n            <input type=\"text\" name=\"edu_title\" required value=\"${escapeHtml(data.title || \"\")}\">\r\n          <\/div>\r\n          <div class=\"cv-field\">\r\n            <label>\u038a\u03b4\u03c1\u03c5\u03bc\u03b1 \/ \u03a3\u03c7\u03bf\u03bb\u03ae \/ \u03a3\u03c7\u03bf\u03bb\u03b5\u03af\u03bf *<\/label>\r\n            <input type=\"text\" name=\"edu_school\" required value=\"${escapeHtml(data.school || \"\")}\">\r\n          <\/div>\r\n          <div class=\"cv-field\">\r\n            <label>\u0388\u03c4\u03bf\u03c2 \u03ad\u03bd\u03b1\u03c1\u03be\u03b7\u03c2<\/label>\r\n            <input type=\"text\" name=\"edu_start\" value=\"${escapeHtml(data.start || \"\")}\">\r\n          <\/div>\r\n          <div class=\"cv-field\">\r\n            <label>\u0388\u03c4\u03bf\u03c2 \u03bf\u03bb\u03bf\u03ba\u03bb\u03ae\u03c1\u03c9\u03c3\u03b7\u03c2<\/label>\r\n            <input type=\"text\" name=\"edu_end\" value=\"${escapeHtml(data.end || \"\")}\">\r\n          <\/div>\r\n          <div class=\"cv-field\">\r\n            <label>\u0392\u03b1\u03b8\u03bc\u03cc\u03c2<\/label>\r\n            <input type=\"text\" name=\"edu_grade\" value=\"${escapeHtml(data.grade || \"\")}\">\r\n          <\/div>\r\n          <div class=\"cv-field\">\r\n            <label>\u03a3\u03b5 \u03b5\u03be\u03ad\u03bb\u03b9\u03be\u03b7<\/label>\r\n            <select name=\"edu_current\">\r\n              <option value=\"no\" ${data.current === \"yes\" ? \"\" : \"selected\"}>\u038c\u03c7\u03b9<\/option>\r\n              <option value=\"yes\" ${data.current === \"yes\" ? \"selected\" : \"\"}>\u039d\u03b1\u03b9<\/option>\r\n            <\/select>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"cv-field\">\r\n          <label>\u03a0\u03b5\u03c1\u03b9\u03b3\u03c1\u03b1\u03c6\u03ae \/ \u03c3\u03b7\u03bc\u03b5\u03b9\u03ce\u03c3\u03b5\u03b9\u03c2<\/label>\r\n          <textarea name=\"edu_desc\" rows=\"3\">${escapeHtml(data.desc || \"\")}<\/textarea>\r\n        <\/div>\r\n      <\/div>\r\n    `);\r\n  }\r\n\r\n  function getHasExperience(){\r\n    return form.querySelector('input[name=\"hasExperience\"]:checked').value;\r\n  }\r\n\r\n  function addExperienceRow(data = {}){\r\n    const hasExp = getHasExperience() === \"yes\";\r\n    experienceList.insertAdjacentHTML(\"beforeend\", `\r\n      <div class=\"repeat-group\">\r\n        <div class=\"repeat-group-header\">\r\n          <div class=\"repeat-group-title\">${hasExp ? \"\u0395\u03bc\u03c0\u03b5\u03b9\u03c1\u03af\u03b1\" : \"Project \/ \u0394\u03c1\u03b1\u03c3\u03c4\u03b7\u03c1\u03b9\u03cc\u03c4\u03b7\u03c4\u03b1\"}<\/div>\r\n          <button type=\"button\" class=\"remove-row\">\u0394\u03b9\u03b1\u03b3\u03c1\u03b1\u03c6\u03ae<\/button>\r\n        <\/div>\r\n        <div class=\"cv-grid cv-grid-2\">\r\n          <div class=\"cv-field\">\r\n            <label>${hasExp ? \"\u0398\u03ad\u03c3\u03b7 \/ \u03a1\u03cc\u03bb\u03bf\u03c2\" : \"\u03a4\u03af\u03c4\u03bb\u03bf\u03c2 \/ \u03a1\u03cc\u03bb\u03bf\u03c2\"}<\/label>\r\n            <input type=\"text\" name=\"exp_role\" value=\"${escapeHtml(data.role || \"\")}\">\r\n          <\/div>\r\n          <div class=\"cv-field\">\r\n            <label>${hasExp ? \"\u0395\u03c4\u03b1\u03b9\u03c1\u03b5\u03af\u03b1 \/ \u039f\u03c1\u03b3\u03b1\u03bd\u03b9\u03c3\u03bc\u03cc\u03c2\" : \"\u03a6\u03bf\u03c1\u03ad\u03b1\u03c2 \/ \u03a0\u03bb\u03b1\u03af\u03c3\u03b9\u03bf\"}<\/label>\r\n            <input type=\"text\" name=\"exp_org\" value=\"${escapeHtml(data.org || \"\")}\">\r\n          <\/div>\r\n          <div class=\"cv-field\">\r\n            <label>\u0391\u03c0\u03cc<\/label>\r\n            <input type=\"text\" name=\"exp_start\" value=\"${escapeHtml(data.start || \"\")}\">\r\n          <\/div>\r\n          <div class=\"cv-field\">\r\n            <label>\u0388\u03c9\u03c2<\/label>\r\n            <input type=\"text\" name=\"exp_end\" value=\"${escapeHtml(data.end || \"\")}\">\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"cv-field\">\r\n          <label>\u03a0\u03b5\u03c1\u03b9\u03b3\u03c1\u03b1\u03c6\u03ae<\/label>\r\n          <textarea name=\"exp_desc\" rows=\"4\">${escapeHtml(data.desc || \"\")}<\/textarea>\r\n        <\/div>\r\n      <\/div>\r\n    `);\r\n  }\r\n\r\n  function addSkillRow(data = {}){\r\n    skillsList.insertAdjacentHTML(\"beforeend\", `\r\n      <div class=\"repeat-group\">\r\n        <div class=\"repeat-group-header\">\r\n          <div class=\"repeat-group-title\">\u0394\u03b5\u03be\u03b9\u03cc\u03c4\u03b7\u03c4\u03b1<\/div>\r\n          <button type=\"button\" class=\"remove-row\">\u0394\u03b9\u03b1\u03b3\u03c1\u03b1\u03c6\u03ae<\/button>\r\n        <\/div>\r\n        <div class=\"cv-grid cv-grid-2\">\r\n          <div class=\"cv-field\">\r\n            <label>\u038c\u03bd\u03bf\u03bc\u03b1 \u03b4\u03b5\u03be\u03b9\u03cc\u03c4\u03b7\u03c4\u03b1\u03c2<\/label>\r\n            <input type=\"text\" name=\"skill_name\" value=\"${escapeHtml(data.name || \"\")}\">\r\n          <\/div>\r\n          <div class=\"cv-field\">\r\n            <label>\u0395\u03c0\u03af\u03c0\u03b5\u03b4\u03bf<\/label>\r\n            <select name=\"skill_level\">\r\n              ${levelOptions([\"\",\"\u0392\u03b1\u03c3\u03b9\u03ba\u03cc\",\"\u039a\u03b1\u03bb\u03cc\",\"\u03a0\u03bf\u03bb\u03cd \u03ba\u03b1\u03bb\u03cc\",\"\u0386\u03c1\u03b9\u03c3\u03c4\u03bf\"], data.level)}\r\n            <\/select>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    `);\r\n  }\r\n\r\n  function addLanguageRow(data = {}){\r\n    languagesList.insertAdjacentHTML(\"beforeend\", `\r\n      <div class=\"repeat-group\">\r\n        <div class=\"repeat-group-header\">\r\n          <div class=\"repeat-group-title\">\u0393\u03bb\u03ce\u03c3\u03c3\u03b1<\/div>\r\n          <button type=\"button\" class=\"remove-row\">\u0394\u03b9\u03b1\u03b3\u03c1\u03b1\u03c6\u03ae<\/button>\r\n        <\/div>\r\n        <div class=\"cv-grid cv-grid-2\">\r\n          <div class=\"cv-field\">\r\n            <label>\u0393\u03bb\u03ce\u03c3\u03c3\u03b1<\/label>\r\n            <input type=\"text\" name=\"lang_name\" value=\"${escapeHtml(data.name || \"\")}\">\r\n          <\/div>\r\n          <div class=\"cv-field\">\r\n            <label>\u0395\u03c0\u03af\u03c0\u03b5\u03b4\u03bf<\/label>\r\n            <select name=\"lang_level\">\r\n              ${levelOptions([\"\",\"\u0392\u03b1\u03c3\u03b9\u03ba\u03ae \u03b3\u03bd\u03ce\u03c3\u03b7\",\"\u039a\u03b1\u03bb\u03ae \u03b3\u03bd\u03ce\u03c3\u03b7\",\"\u03a0\u03bf\u03bb\u03cd \u03ba\u03b1\u03bb\u03ae \u03b3\u03bd\u03ce\u03c3\u03b7\",\"\u0386\u03c1\u03b9\u03c3\u03c4\u03b7 \u03b3\u03bd\u03ce\u03c3\u03b7\",\"\u039c\u03b7\u03c4\u03c1\u03b9\u03ba\u03ae \u03b3\u03bb\u03ce\u03c3\u03c3\u03b1\"], data.level)}\r\n            <\/select>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"cv-field\">\r\n          <label>\u03a0\u03b9\u03c3\u03c4\u03bf\u03c0\u03bf\u03af\u03b7\u03c3\u03b7<\/label>\r\n          <input type=\"text\" name=\"lang_cert\" value=\"${escapeHtml(data.cert || \"\")}\">\r\n        <\/div>\r\n      <\/div>\r\n    `);\r\n  }\r\n\r\n  function addComputerSkillRow(data = {}){\r\n    computerSkillsList.insertAdjacentHTML(\"beforeend\", `\r\n      <div class=\"repeat-group\">\r\n        <div class=\"repeat-group-header\">\r\n          <div class=\"repeat-group-title\">\u0393\u03bd\u03ce\u03c3\u03b7 \u0397\/\u03a5<\/div>\r\n          <button type=\"button\" class=\"remove-row\">\u0394\u03b9\u03b1\u03b3\u03c1\u03b1\u03c6\u03ae<\/button>\r\n        <\/div>\r\n        <div class=\"cv-grid cv-grid-2\">\r\n          <div class=\"cv-field\">\r\n            <label>\u0395\u03c1\u03b3\u03b1\u03bb\u03b5\u03af\u03bf \/ \u03a0\u03c1\u03cc\u03b3\u03c1\u03b1\u03bc\u03bc\u03b1<\/label>\r\n            <input type=\"text\" name=\"comp_name\" value=\"${escapeHtml(data.name || \"\")}\">\r\n          <\/div>\r\n          <div class=\"cv-field\">\r\n            <label>\u0395\u03c0\u03af\u03c0\u03b5\u03b4\u03bf<\/label>\r\n            <select name=\"comp_level\">\r\n              ${levelOptions([\"\",\"\u0392\u03b1\u03c3\u03b9\u03ba\u03cc\",\"\u039a\u03b1\u03bb\u03cc\",\"\u03a0\u03bf\u03bb\u03cd \u03ba\u03b1\u03bb\u03cc\",\"\u0386\u03c1\u03b9\u03c3\u03c4\u03bf\"], data.level)}\r\n            <\/select>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"cv-field\">\r\n          <label>\u03a0\u03b9\u03c3\u03c4\u03bf\u03c0\u03bf\u03af\u03b7\u03c3\u03b7<\/label>\r\n          <input type=\"text\" name=\"comp_cert\" value=\"${escapeHtml(data.cert || \"\")}\">\r\n        <\/div>\r\n      <\/div>\r\n    `);\r\n  }\r\n\r\n  function addCertificationRow(data = {}){\r\n    certificationsList.insertAdjacentHTML(\"beforeend\", `\r\n      <div class=\"repeat-group\">\r\n        <div class=\"repeat-group-header\">\r\n          <div class=\"repeat-group-title\">\u03a0\u03b9\u03c3\u03c4\u03bf\u03c0\u03bf\u03af\u03b7\u03c3\u03b7 \/ \u03a3\u03b5\u03bc\u03b9\u03bd\u03ac\u03c1\u03b9\u03bf<\/div>\r\n          <button type=\"button\" class=\"remove-row\">\u0394\u03b9\u03b1\u03b3\u03c1\u03b1\u03c6\u03ae<\/button>\r\n        <\/div>\r\n        <div class=\"cv-grid cv-grid-2\">\r\n          <div class=\"cv-field\">\r\n            <label>\u03a4\u03af\u03c4\u03bb\u03bf\u03c2<\/label>\r\n            <input type=\"text\" name=\"cert_title\" value=\"${escapeHtml(data.title || \"\")}\">\r\n          <\/div>\r\n          <div class=\"cv-field\">\r\n            <label>\u03a6\u03bf\u03c1\u03ad\u03b1\u03c2<\/label>\r\n            <input type=\"text\" name=\"cert_org\" value=\"${escapeHtml(data.org || \"\")}\">\r\n          <\/div>\r\n          <div class=\"cv-field\">\r\n            <label>\u0388\u03c4\u03bf\u03c2<\/label>\r\n            <input type=\"text\" name=\"cert_year\" value=\"${escapeHtml(data.year || \"\")}\">\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"cv-field\">\r\n          <label>\u03a0\u03b5\u03c1\u03b9\u03b3\u03c1\u03b1\u03c6\u03ae<\/label>\r\n          <textarea name=\"cert_desc\" rows=\"3\">${escapeHtml(data.desc || \"\")}<\/textarea>\r\n        <\/div>\r\n      <\/div>\r\n    `);\r\n  }\r\n\r\n  function addExtraRow(data = {}){\r\n    extrasList.insertAdjacentHTML(\"beforeend\", `\r\n      <div class=\"repeat-group\">\r\n        <div class=\"repeat-group-header\">\r\n          <div class=\"repeat-group-title\">\u03a0\u03c1\u03cc\u03c3\u03b8\u03b5\u03c4\u03bf \u03c0\u03c1\u03bf\u03c3\u03cc\u03bd<\/div>\r\n          <button type=\"button\" class=\"remove-row\">\u0394\u03b9\u03b1\u03b3\u03c1\u03b1\u03c6\u03ae<\/button>\r\n        <\/div>\r\n        <div class=\"cv-field\">\r\n          <label>\u03a3\u03cd\u03bd\u03c4\u03bf\u03bc\u03b7 \u03b5\u03b3\u03b3\u03c1\u03b1\u03c6\u03ae<\/label>\r\n          <input type=\"text\" name=\"extra_text\" value=\"${escapeHtml(data.text || \"\")}\">\r\n        <\/div>\r\n      <\/div>\r\n    `);\r\n  }\r\n\r\n  function collectRows(container, mapper){\r\n    return Array.from(container.querySelectorAll(\".repeat-group\")).map(group => mapper(group)).filter(Boolean);\r\n  }\r\n\r\n  function collectEducation(){\r\n    return collectRows(educationList, group => {\r\n      const title = clean(group.querySelector('[name=\"edu_title\"]').value);\r\n      const school = clean(group.querySelector('[name=\"edu_school\"]').value);\r\n      const start = clean(group.querySelector('[name=\"edu_start\"]').value);\r\n      const end = clean(group.querySelector('[name=\"edu_end\"]').value);\r\n      const grade = clean(group.querySelector('[name=\"edu_grade\"]').value);\r\n      const current = clean(group.querySelector('[name=\"edu_current\"]').value);\r\n      const desc = clean(group.querySelector('[name=\"edu_desc\"]').value);\r\n      if(!title && !school && !start && !end && !grade && !desc) return null;\r\n      return {title, school, start, end, grade, current, desc};\r\n    });\r\n  }\r\n\r\n  function collectExperience(){\r\n    return collectRows(experienceList, group => {\r\n      const role = clean(group.querySelector('[name=\"exp_role\"]').value);\r\n      const org = clean(group.querySelector('[name=\"exp_org\"]').value);\r\n      const start = clean(group.querySelector('[name=\"exp_start\"]').value);\r\n      const end = clean(group.querySelector('[name=\"exp_end\"]').value);\r\n      const desc = clean(group.querySelector('[name=\"exp_desc\"]').value);\r\n      if(!role && !org && !start && !end && !desc) return null;\r\n      return {role, org, start, end, desc};\r\n    });\r\n  }\r\n\r\n  function collectSkills(){\r\n    return collectRows(skillsList, group => {\r\n      const name = clean(group.querySelector('[name=\"skill_name\"]').value);\r\n      const level = clean(group.querySelector('[name=\"skill_level\"]').value);\r\n      if(!name && !level) return null;\r\n      return {name, level};\r\n    });\r\n  }\r\n\r\n  function collectLanguages(){\r\n    return collectRows(languagesList, group => {\r\n      const name = clean(group.querySelector('[name=\"lang_name\"]').value);\r\n      const level = clean(group.querySelector('[name=\"lang_level\"]').value);\r\n      const cert = clean(group.querySelector('[name=\"lang_cert\"]').value);\r\n      if(!name && !level && !cert) return null;\r\n      return {name, level, cert};\r\n    });\r\n  }\r\n\r\n  function collectComputerSkills(){\r\n    return collectRows(computerSkillsList, group => {\r\n      const name = clean(group.querySelector('[name=\"comp_name\"]').value);\r\n      const level = clean(group.querySelector('[name=\"comp_level\"]').value);\r\n      const cert = clean(group.querySelector('[name=\"comp_cert\"]').value);\r\n      if(!name && !level && !cert) return null;\r\n      return {name, level, cert};\r\n    });\r\n  }\r\n\r\n  function collectCertifications(){\r\n    return collectRows(certificationsList, group => {\r\n      const title = clean(group.querySelector('[name=\"cert_title\"]').value);\r\n      const org = clean(group.querySelector('[name=\"cert_org\"]').value);\r\n      const year = clean(group.querySelector('[name=\"cert_year\"]').value);\r\n      const desc = clean(group.querySelector('[name=\"cert_desc\"]').value);\r\n      if(!title && !org && !year && !desc) return null;\r\n      return {title, org, year, desc};\r\n    });\r\n  }\r\n\r\n  function collectExtras(){\r\n    return collectRows(extrasList, group => {\r\n      const text = clean(group.querySelector('[name=\"extra_text\"]').value);\r\n      if(!text) return null;\r\n      return {text};\r\n    });\r\n  }\r\n\r\n  function getData(){\r\n    return {\r\n      fullName: clean(form.fullName.value),\r\n      headline: clean(form.headline.value),\r\n      city: clean(form.city.value),\r\n      phone: clean(form.phone.value),\r\n      email: clean(form.email.value),\r\n      birthDate: clean(form.birthDate.value),\r\n      linkedin: clean(form.linkedin.value),\r\n      website: clean(form.website.value),\r\n      github: clean(form.github.value),\r\n      profile: clean(form.profile.value),\r\n      hasExperience: getHasExperience(),\r\n      education: collectEducation(),\r\n      experience: collectExperience(),\r\n      skills: collectSkills(),\r\n      languages: collectLanguages(),\r\n      computerSkills: collectComputerSkills(),\r\n      certifications: collectCertifications(),\r\n      extras: collectExtras()\r\n    };\r\n  }\r\n\r\n  function normalizeSpace(v){\r\n    return (v || \"\").replace(\/\\s+\/g, \" \").trim();\r\n  }\r\n\r\n  function toUpperGreek(value){\r\n    return normalizeSpace(value).toLocaleUpperCase(\"el-GR\");\r\n  }\r\n\r\n  function detectLikelyGender(fullName){\r\n    const first = normalizeSpace(fullName).split(\" \")[0].toLocaleUpperCase(\"el-GR\");\r\n    if(!first) return \"male\";\r\n    const femaleExceptions = [\"\u0391\u0393\u0391\u03a0\u0397\",\"\u0391\u039d\u039d\u0391\",\"\u0392\u0391\u03a3\u03a9\",\"\u0394\u0395\u03a3\u03a0\u039f\u0399\u039d\u0391\",\"\u0395\u039b\u0395\u039d\u0397\",\"\u0395\u0399\u03a1\u0397\u039d\u0397\",\"\u0395\u03a5\u0391\",\"\u0396\u03a9\u0397\",\"\u0398\u0391\u039b\u0395\u0399\u0391\",\"\u039a\u0391\u039b\u039b\u0399\u039f\u03a0\u0397\",\"\u039a\u0391\u03a4\u0395\u03a1\u0399\u039d\u0391\",\"\u039a\u03a5\u03a1\u0399\u0391\u039a\u0397\",\"\u039c\u0391\u03a1\u0399\u0391\",\"\u039c\u03a5\u03a1\u03a3\u0399\u039d\u0397\",\"\u03a0\u0391\u039d\u0391\u0393\u0399\u03a9\u03a4\u0391\",\"\u03a3\u039f\u03a6\u0399\u0391\",\"\u03a7\u03a1\u0399\u03a3\u03a4\u0399\u039d\u0391\"];\r\n    if(femaleExceptions.includes(first) || \/[\u0391\u0397\u03a9\u0399]$\/.test(first)) return \"female\";\r\n    return \"male\";\r\n  }\r\n\r\n  function toGenitiveToken(token, gender){\r\n    const t = toUpperGreek(token);\r\n    if(!t) return \"\";\r\n    const specific = {\r\n      \"\u039d\u0399\u039a\u039f\u039b\u0391\u039f\u03a3\":\"\u039d\u0399\u039a\u039f\u039b\u0391\u039f\u03a5\",\r\n      \"\u0399\u03a9\u0391\u039d\u039d\u0397\u03a3\":\"\u0399\u03a9\u0391\u039d\u039d\u039f\u03a5\",\r\n      \"\u0399\u03a9\u0391\u039d\u039d\u0397\u03a3\u0397\u03a3\":\"\u0399\u03a9\u0391\u039d\u039d\u039f\u03a5\",\r\n      \"\u0393\u0395\u03a9\u03a1\u0393\u0399\u039f\u03a3\":\"\u0393\u0395\u03a9\u03a1\u0393\u0399\u039f\u03a5\",\r\n      \"\u03a0\u0391\u039d\u0391\u0393\u0399\u03a9\u03a4\u0397\u03a3\":\"\u03a0\u0391\u039d\u0391\u0393\u0399\u03a9\u03a4\u0397\",\r\n      \"\u0394\u0397\u039c\u0397\u03a4\u03a1\u0397\u03a3\":\"\u0394\u0397\u039c\u0397\u03a4\u03a1\u0397\",\r\n      \"\u03a7\u03a1\u0397\u03a3\u03a4\u039f\u03a3\":\"\u03a7\u03a1\u0397\u03a3\u03a4\u039f\u03a5\",\r\n      \"\u039a\u03a9\u039d\u03a3\u03a4\u0391\u039d\u03a4\u0399\u039d\u039f\u03a3\":\"\u039a\u03a9\u039d\u03a3\u03a4\u0391\u039d\u03a4\u0399\u039d\u039f\u03a5\",\r\n      \"\u0395\u03a5\u0391\u0393\u0393\u0395\u039b\u039f\u03a3\":\"\u0395\u03a5\u0391\u0393\u0393\u0395\u039b\u039f\u03a5\",\r\n      \"\u0391\u039d\u0394\u03a1\u0395\u0391\u03a3\":\"\u0391\u039d\u0394\u03a1\u0395\u0391\",\r\n      \"\u039c\u03a5\u03a1\u03a3\u0399\u039d\u0397\":\"\u039c\u03a5\u03a1\u03a3\u0399\u039d\u0397\u03a3\",\r\n      \"\u039c\u0391\u03a1\u0399\u0391\":\"\u039c\u0391\u03a1\u0399\u0391\u03a3\",\r\n      \"\u0395\u039b\u0395\u039d\u0397\":\"\u0395\u039b\u0395\u039d\u0397\u03a3\",\r\n      \"\u039a\u0391\u03a4\u0395\u03a1\u0399\u039d\u0391\":\"\u039a\u0391\u03a4\u0395\u03a1\u0399\u039d\u0391\u03a3\",\r\n      \"\u03a3\u039f\u03a6\u0399\u0391\":\"\u03a3\u039f\u03a6\u0399\u0391\u03a3\"\r\n    };\r\n    if(specific[t]) return specific[t];\r\n\r\n    if(gender === \"female\"){\r\n      if(\/\u0391$\/.test(t)) return t + \"\u03a3\";\r\n      if(\/\u0397$\/.test(t)) return t + \"\u03a3\";\r\n      if(\/\u039f\u03a3$\/.test(t)) return t.replace(\/\u039f\u03a3$\/, \"\u039f\u03a5\");\r\n      return t;\r\n    }\r\n\r\n    if(\/\u039f\u03a3$\/.test(t)) return t.replace(\/\u039f\u03a3$\/, \"\u039f\u03a5\");\r\n    if(\/\u0391\u03a3$\/.test(t)) return t.replace(\/\u0391\u03a3$\/, \"\u0391\");\r\n    if(\/\u0397\u03a3$\/.test(t)) return \/(\u039d\u039d|\u03a4|\u039a|\u0393|\u03a7|\u03a3\u03a4|\u03a1\u0393|\u039c\u03a0|\u03a0\u03a0|\u039b\u039b|\u039c\u039c)\u0397\u03a3$\/.test(t) ? t.replace(\/\u0397\u03a3$\/, \"\u039f\u03a5\") : t.replace(\/\u0397\u03a3$\/, \"\u0397\");\r\n    if(\/\u0395\u03a3$\/.test(t)) return t.replace(\/\u0395\u03a3$\/, \"\u0397\");\r\n    return t;\r\n  }\r\n\r\n  function buildDisplayIdentity(fullName){\r\n    const normalized = normalizeSpace(fullName);\r\n    const gender = detectLikelyGender(normalized);\r\n    const article = gender === \"female\" ? \"\u03c4\u03b7\u03c2\" : \"\u03c4\u03bf\u03c5\";\r\n    const genitiveFullName = normalized\r\n      .split(\" \")\r\n      .filter(Boolean)\r\n      .map(token => toGenitiveToken(token, gender))\r\n      .join(\" \");\r\n    return {\r\n      gender,\r\n      article,\r\n      displayName: toUpperGreek(genitiveFullName || normalized)\r\n    };\r\n  }\r\n\r\n  function renderPhoto(data){\r\n    return \"\";\r\n  }\r\n\r\n  function renderContactLines(data){\r\n    const rows = [];\r\n    if(data.city) rows.push(escapeHtml(data.city));\r\n    if(data.phone) rows.push(escapeHtml(data.phone));\r\n    if(data.email) rows.push(escapeHtml(data.email));\r\n    if(data.birthDate) rows.push(\"\u0397\u03bc\/\u03bd\u03af\u03b1 \u03b3\u03ad\u03bd\u03bd\u03b7\u03c3\u03b7\u03c2: \" + escapeHtml(data.birthDate));\r\n    return rows.join(\" | \");\r\n  }\r\n\r\n  function renderLinkLine(data){\r\n    const links = [];\r\n    if(data.linkedin) links.push(`<a href=\"${escapeHtml(data.linkedin)}\" target=\"_blank\">LinkedIn<\/a>`);\r\n    if(data.website) links.push(`<a href=\"${escapeHtml(data.website)}\" target=\"_blank\">Website<\/a>`);\r\n    if(data.github) links.push(`<a href=\"${escapeHtml(data.github)}\" target=\"_blank\">GitHub<\/a>`);\r\n    return links.length ? `<div class=\"cv-contact cv-link-line\">${links.join(\" | \")}<\/div>` : \"\";\r\n  }\r\n\r\n  function renderCenteredTitle(data, uppercaseName){\r\n    const identity = buildDisplayIdentity(data.fullName);\r\n    return `\r\n      <div class=\"cv-title-main\">\u0392\u0399\u039f\u0393\u03a1\u0391\u03a6\u0399\u039a\u039f \u03a3\u0397\u039c\u0395\u0399\u03a9\u039c\u0391<\/div>\r\n      <div class=\"cv-of-word\">${identity.article}<\/div>\r\n      <div class=\"cv-sub-main ${uppercaseName ? \"upper\" : \"\"}\">${escapeHtml(identity.displayName)}<\/div>\r\n    `;\r\n  }\r\n\r\n  function renderMainHeader(data, templateType){\r\n    return `\r\n      <div class=\"cv-page-header\">\r\n        ${renderCenteredTitle(data, true)}\r\n        <div class=\"cv-header-standard\">\r\n          <div class=\"cv-header-left\">\r\n            ${data.headline ? `<div class=\"cv-headline\">${escapeHtml(data.headline)}<\/div>` : \"\"}\r\n            ${(templateType !== \"classic\" && renderContactLines(data)) ? `<div class=\"cv-contact\">${renderContactLines(data)}<\/div>` : \"\"}\r\n            ${(templateType !== \"classic\") ? renderLinkLine(data) : \"\"}\r\n          <\/div>\r\n          ${renderPhoto(data)}\r\n        <\/div>\r\n      <\/div>\r\n    `;\r\n  }\r\n\r\n  function renderContinuationHeader(data){\r\n    const identity = buildDisplayIdentity(data.fullName);\r\n    return `\r\n      <div class=\"cv-page-header\">\r\n        <div class=\"cv-continuation\">\r\n          <div class=\"cv-continuation-name\">${escapeHtml(identity.displayName)}<\/div>\r\n          <div class=\"cv-continuation-label\">\u03a3\u03c5\u03bd\u03ad\u03c7\u03b5\u03b9\u03b1 \u03b2\u03b9\u03bf\u03b3\u03c1\u03b1\u03c6\u03b9\u03ba\u03bf\u03cd<\/div>\r\n        <\/div>\r\n      <\/div>\r\n    `;\r\n  }\r\n\r\n  function classicRow(label, contentHtml, isFirst, emptyLabel){\r\n    return `\r\n      <div class=\"cv-classic-row ${isFirst ? \"first\" : \"\"}\">\r\n        <div class=\"cv-classic-label ${emptyLabel ? \"empty\" : \"\"}\">${emptyLabel ? \"&nbsp;\" : escapeHtml(label)}<\/div>\r\n        <div class=\"cv-classic-content\">${contentHtml}<\/div>\r\n      <\/div>\r\n    `;\r\n  }\r\n\r\n  function lineWithDot(text){\r\n    return `<div class=\"cv-dot-line\">${text}<\/div>`;\r\n  }\r\n\r\n  function buildClassicBlocks(data){\r\n    const blocks = [];\r\n    const personalLines = [];\r\n    if(data.city) personalLines.push(`<p><strong>\u039c\u03cc\u03bd\u03b9\u03bc\u03b7 \u03ba\u03b1\u03c4\u03bf\u03b9\u03ba\u03af\u03b1:<\/strong> ${escapeHtml(data.city)}<\/p>`);\r\n    if(data.phone) personalLines.push(`<p><strong>\u03ba\u03b9\u03bd.:<\/strong> ${escapeHtml(data.phone)}<\/p>`);\r\n    if(data.email) personalLines.push(`<p><strong>E-mail :<\/strong> ${escapeHtml(data.email)}<\/p>`);\r\n    if(data.birthDate) personalLines.push(`<p><strong>\u0397\u03bc\u03b5\u03c1\u03bf\u03bc\u03b7\u03bd\u03af\u03b1 \u0393\u03ad\u03bd\u03bd\u03b7\u03c3\u03b7\u03c2:<\/strong> ${escapeHtml(data.birthDate)}<\/p>`);\r\n    if(data.linkedin) personalLines.push(`<p><strong>LinkedIn:<\/strong> ${escapeHtml(data.linkedin)}<\/p>`);\r\n    if(data.website) personalLines.push(`<p><strong>Website:<\/strong> ${escapeHtml(data.website)}<\/p>`);\r\n    if(data.github) personalLines.push(`<p><strong>GitHub:<\/strong> ${escapeHtml(data.github)}<\/p>`);\r\n    if(personalLines.length){\r\n      blocks.push(classicRow(\"\u0391\u03c4\u03bf\u03bc\u03b9\u03ba\u03ac \u03a3\u03c4\u03bf\u03b9\u03c7\u03b5\u03af\u03b1:\", personalLines.join(\"\"), true, false));\r\n    }\r\n\r\n    if(data.profile){\r\n      const profileHtml = escapeHtml(data.profile).split(\"\\n\").filter(Boolean).map(p => `<p>${p}<\/p>`).join(\"\") || `<p>${escapeHtml(data.profile)}<\/p>`;\r\n      blocks.push(classicRow(\"\u03a0\u03c1\u03bf\u03c3\u03c9\u03c0\u03b9\u03ba\u03cc \u03a0\u03c1\u03bf\u03c6\u03af\u03bb:\", profileHtml, !blocks.length, false));\r\n    }\r\n\r\n    if(data.education.length){\r\n      data.education.forEach((item, index) => {\r\n        const dates = [item.start, item.current === \"yes\" ? \"\u03c3\u03b5 \u03b5\u03be\u03ad\u03bb\u03b9\u03be\u03b7\" : item.end].filter(Boolean).join(\" - \");\r\n        const meta = [escapeHtml(item.school), dates ? escapeHtml(dates) : \"\", item.grade ? `\u0392\u03b1\u03b8\u03bc\u03cc\u03c2: ${escapeHtml(item.grade)}` : \"\"].filter(Boolean).join(\" | \");\r\n        let html = lineWithDot(`<div class=\"cv-classic-item-title\">${escapeHtml(item.title)}<\/div>${meta ? `<div class=\"cv-classic-item-sub\">${meta}<\/div>` : \"\"}${item.desc ? `<div class=\"cv-item-desc\">${escapeHtml(item.desc)}<\/div>` : \"\"}`);\r\n        blocks.push(classicRow(\"\u0395\u03ba\u03c0\u03b1\u03af\u03b4\u03b5\u03c5\u03c3\u03b7:\", html, !blocks.length, index !== 0));\r\n      });\r\n    }\r\n\r\n    if(data.experience.length){\r\n      data.experience.forEach((item, index) => {\r\n        const dates = [item.start, item.end].filter(Boolean).join(\" - \");\r\n        const meta = [item.org, dates].filter(Boolean).map(escapeHtml).join(\" | \");\r\n        const html = lineWithDot(`<div class=\"cv-classic-item-title\">${escapeHtml(item.role)}<\/div>${meta ? `<div class=\"cv-classic-item-sub\">${meta}<\/div>` : \"\"}${item.desc ? `<div class=\"cv-item-desc\">${escapeHtml(item.desc)}<\/div>` : \"\"}`);\r\n        blocks.push(classicRow(data.hasExperience === \"yes\" ? \"\u0395\u03c0\u03b1\u03b3\u03b3\u03b5\u03bb\u03bc\u03b1\u03c4\u03b9\u03ba\u03ae \u0395\u03bc\u03c0\u03b5\u03b9\u03c1\u03af\u03b1:\" : \"Projects \/ \u0394\u03c1\u03b1\u03c3\u03c4\u03b7\u03c1\u03b9\u03cc\u03c4\u03b7\u03c4\u03b5\u03c2:\", html, !blocks.length, index !== 0));\r\n      });\r\n    }\r\n\r\n    const simpleClassic = (items, label, formatter) => {\r\n      items.forEach((item, index) => {\r\n        blocks.push(classicRow(label, lineWithDot(formatter(item)), !blocks.length, index !== 0));\r\n      });\r\n    };\r\n\r\n    simpleClassic(data.languages, \"\u039e\u03ad\u03bd\u03b5\u03c2 \u0393\u03bb\u03ce\u03c3\u03c3\u03b5\u03c2:\", item => `${escapeHtml(item.name)}${item.level ? ` \u2013 ${escapeHtml(item.level)}` : \"\"}${item.cert ? ` | ${escapeHtml(item.cert)}` : \"\"}`);\r\n    simpleClassic(data.computerSkills, \"\u0393\u03bd\u03ce\u03c3\u03b5\u03b9\u03c2 \u0397\/\u03a5:\", item => `${escapeHtml(item.name)}${item.level ? ` \u2013 ${escapeHtml(item.level)}` : \"\"}${item.cert ? ` | ${escapeHtml(item.cert)}` : \"\"}`);\r\n    simpleClassic(data.skills, \"\u0394\u03b5\u03be\u03b9\u03cc\u03c4\u03b7\u03c4\u03b5\u03c2:\", item => `${escapeHtml(item.name)}${item.level ? ` \u2013 ${escapeHtml(item.level)}` : \"\"}`);\r\n    simpleClassic(data.certifications, \"\u03a0\u03b9\u03c3\u03c4\u03bf\u03c0\u03bf\u03b9\u03ae\u03c3\u03b5\u03b9\u03c2 \/ \u03a3\u03b5\u03bc\u03b9\u03bd\u03ac\u03c1\u03b9\u03b1:\", item => `<div class=\"cv-classic-item-title\">${escapeHtml(item.title)}<\/div>${[item.org, item.year].filter(Boolean).map(escapeHtml).join(\" | \") ? `<div class=\"cv-classic-item-sub\">${[item.org, item.year].filter(Boolean).map(escapeHtml).join(\" | \")}<\/div>` : \"\"}${item.desc ? `<div class=\"cv-item-desc\">${escapeHtml(item.desc)}<\/div>` : \"\"}`);\r\n    simpleClassic(data.extras, \"\u03a0\u03c1\u03cc\u03c3\u03b8\u03b5\u03c4\u03b1 \u03a0\u03c1\u03bf\u03c3\u03cc\u03bd\u03c4\u03b1:\", item => `${escapeHtml(item.text)}`);\r\n\r\n    return blocks;\r\n  }\r\n\r\n  function sectionBlock(title, bodyHtml){\r\n    return `\r\n      <div class=\"cv-section-block\">\r\n        <div class=\"cv-section-title\">${escapeHtml(title)}<\/div>\r\n        ${bodyHtml}\r\n      <\/div>\r\n    `;\r\n  }\r\n\r\n  function buildModernColumns(data){\r\n    const leftBlocks = [];\r\n    const rightBlocks = [];\r\n\r\n    if(data.profile){\r\n      leftBlocks.push(sectionBlock(\"\u03a0\u03c1\u03bf\u03c3\u03c9\u03c0\u03b9\u03ba\u03cc \u03a0\u03c1\u03bf\u03c6\u03af\u03bb\", `<div class=\"cv-item-desc\">${escapeHtml(data.profile)}<\/div>`));\r\n    }\r\n\r\n    if(data.languages.length){\r\n      leftBlocks.push(sectionBlock(\"\u039e\u03ad\u03bd\u03b5\u03c2 \u0393\u03bb\u03ce\u03c3\u03c3\u03b5\u03c2\", `\r\n        <div class=\"cv-simple-lines\">${data.languages.map(item => lineWithDot(`${escapeHtml(item.name)}${item.level ? ` \u2013 ${escapeHtml(item.level)}` : \"\"}${item.cert ? ` | ${escapeHtml(item.cert)}` : \"\"}`)).join(\"\")}<\/div>\r\n      `));\r\n    }\r\n\r\n    if(data.computerSkills.length){\r\n      leftBlocks.push(sectionBlock(\"\u0393\u03bd\u03ce\u03c3\u03b5\u03b9\u03c2 \u0397\/\u03a5\", `\r\n        <div class=\"cv-simple-lines\">${data.computerSkills.map(item => lineWithDot(`${escapeHtml(item.name)}${item.level ? ` \u2013 ${escapeHtml(item.level)}` : \"\"}${item.cert ? ` | ${escapeHtml(item.cert)}` : \"\"}`)).join(\"\")}<\/div>\r\n      `));\r\n    }\r\n\r\n    if(data.extras.length){\r\n      leftBlocks.push(sectionBlock(\"\u03a0\u03c1\u03cc\u03c3\u03b8\u03b5\u03c4\u03b1 \u03a0\u03c1\u03bf\u03c3\u03cc\u03bd\u03c4\u03b1\", `\r\n        <div class=\"cv-simple-lines\">${data.extras.map(item => lineWithDot(escapeHtml(item.text))).join(\"\")}<\/div>\r\n      `));\r\n    }\r\n\r\n    if(data.skills.length){\r\n      leftBlocks.push(sectionBlock(\"\u0394\u03b5\u03be\u03b9\u03cc\u03c4\u03b7\u03c4\u03b5\u03c2\", `\r\n        <div class=\"cv-pill-wrap\">${data.skills.map(item => `<span class=\"cv-pill\">${escapeHtml(item.name)}${item.level ? ` \u2013 ${escapeHtml(item.level)}` : \"\"}<\/span>`).join(\"\")}<\/div>\r\n      `));\r\n    }\r\n\r\n    if(data.experience.length){\r\n      rightBlocks.push(sectionBlock(data.hasExperience === \"yes\" ? \"\u0395\u03c0\u03b1\u03b3\u03b3\u03b5\u03bb\u03bc\u03b1\u03c4\u03b9\u03ba\u03ae \u0395\u03bc\u03c0\u03b5\u03b9\u03c1\u03af\u03b1\" : \"Projects \/ \u0394\u03c1\u03b1\u03c3\u03c4\u03b7\u03c1\u03b9\u03cc\u03c4\u03b7\u03c4\u03b5\u03c2\", `\r\n        ${data.experience.map(item => {\r\n          const dates = [item.start, item.end].filter(Boolean).join(\" - \");\r\n          return `<div class=\"cv-item\">\r\n            <div class=\"cv-item-title\">${escapeHtml(item.role)}<\/div>\r\n            <div class=\"cv-item-sub\">${[item.org, dates].filter(Boolean).map(escapeHtml).join(\" | \")}<\/div>\r\n            ${item.desc ? `<div class=\"cv-item-desc\">${escapeHtml(item.desc)}<\/div>` : \"\"}\r\n          <\/div>`;\r\n        }).join(\"\")}\r\n      `));\r\n    }\r\n\r\n    if(data.education.length){\r\n      rightBlocks.push(sectionBlock(\"\u0395\u03ba\u03c0\u03b1\u03af\u03b4\u03b5\u03c5\u03c3\u03b7\", `\r\n        ${data.education.map(item => {\r\n          const dates = [item.start, item.current === \"yes\" ? \"\u03c3\u03b5 \u03b5\u03be\u03ad\u03bb\u03b9\u03be\u03b7\" : item.end].filter(Boolean).join(\" - \");\r\n          return `<div class=\"cv-item\">\r\n            <div class=\"cv-item-title\">${escapeHtml(item.title)}<\/div>\r\n            <div class=\"cv-item-sub\">${[item.school, dates, item.grade ? \"\u0392\u03b1\u03b8\u03bc\u03cc\u03c2: \" + item.grade : \"\"].filter(Boolean).map(escapeHtml).join(\" | \")}<\/div>\r\n            ${item.desc ? `<div class=\"cv-item-desc\">${escapeHtml(item.desc)}<\/div>` : \"\"}\r\n          <\/div>`;\r\n        }).join(\"\")}\r\n      `));\r\n    }\r\n\r\n    if(data.certifications.length){\r\n      rightBlocks.push(sectionBlock(\"\u03a0\u03b9\u03c3\u03c4\u03bf\u03c0\u03bf\u03b9\u03ae\u03c3\u03b5\u03b9\u03c2 \/ \u03a3\u03b5\u03bc\u03b9\u03bd\u03ac\u03c1\u03b9\u03b1\", `\r\n        ${data.certifications.map(item => `<div class=\"cv-item\">\r\n          <div class=\"cv-item-title\">${escapeHtml(item.title)}<\/div>\r\n          <div class=\"cv-item-sub\">${[item.org, item.year].filter(Boolean).map(escapeHtml).join(\" | \")}<\/div>\r\n          ${item.desc ? `<div class=\"cv-item-desc\">${escapeHtml(item.desc)}<\/div>` : \"\"}\r\n        <\/div>`).join(\"\")}\r\n      `));\r\n    }\r\n\r\n    if(!leftBlocks.length) leftBlocks.push(`<div class=\"cv-spacer-4\"><\/div>`);\r\n    if(!rightBlocks.length) rightBlocks.push(`<div class=\"cv-spacer-4\"><\/div>`);\r\n\r\n    return {leftBlocks, rightBlocks};\r\n  }\r\n\r\n  function buildCompactBlocks(data){\r\n    const blocks = [];\r\n    if(data.profile){\r\n      blocks.push(sectionBlock(\"\u03a0\u03c1\u03bf\u03c3\u03c9\u03c0\u03b9\u03ba\u03cc \u03a0\u03c1\u03bf\u03c6\u03af\u03bb\", `<div class=\"cv-item-desc\">${escapeHtml(data.profile)}<\/div>`));\r\n    }\r\n\r\n    if(data.experience.length){\r\n      blocks.push(sectionBlock(data.hasExperience === \"yes\" ? \"\u0395\u03c0\u03b1\u03b3\u03b3\u03b5\u03bb\u03bc\u03b1\u03c4\u03b9\u03ba\u03ae \u0395\u03bc\u03c0\u03b5\u03b9\u03c1\u03af\u03b1\" : \"Projects \/ \u0394\u03c1\u03b1\u03c3\u03c4\u03b7\u03c1\u03b9\u03cc\u03c4\u03b7\u03c4\u03b5\u03c2\", `\r\n        ${data.experience.map(item => {\r\n          const dates = [item.start, item.end].filter(Boolean).join(\" - \");\r\n          return `<div class=\"cv-item\">\r\n            <div class=\"cv-item-title\">${escapeHtml(item.role)}<\/div>\r\n            <div class=\"cv-item-sub\">${[item.org, dates].filter(Boolean).map(escapeHtml).join(\" | \")}<\/div>\r\n            ${item.desc ? `<div class=\"cv-item-desc\">${escapeHtml(item.desc)}<\/div>` : \"\"}\r\n          <\/div>`;\r\n        }).join(\"\")}\r\n      `));\r\n    }\r\n\r\n    if(data.education.length){\r\n      blocks.push(sectionBlock(\"\u0395\u03ba\u03c0\u03b1\u03af\u03b4\u03b5\u03c5\u03c3\u03b7\", `\r\n        ${data.education.map(item => {\r\n          const dates = [item.start, item.current === \"yes\" ? \"\u03c3\u03b5 \u03b5\u03be\u03ad\u03bb\u03b9\u03be\u03b7\" : item.end].filter(Boolean).join(\" - \");\r\n          return `<div class=\"cv-item\">\r\n            <div class=\"cv-item-title\">${escapeHtml(item.title)}<\/div>\r\n            <div class=\"cv-item-sub\">${[item.school, dates, item.grade ? \"\u0392\u03b1\u03b8\u03bc\u03cc\u03c2: \" + item.grade : \"\"].filter(Boolean).map(escapeHtml).join(\" | \")}<\/div>\r\n            ${item.desc ? `<div class=\"cv-item-desc\">${escapeHtml(item.desc)}<\/div>` : \"\"}\r\n          <\/div>`;\r\n        }).join(\"\")}\r\n      `));\r\n    }\r\n\r\n    if(data.languages.length){\r\n      blocks.push(sectionBlock(\"\u039e\u03ad\u03bd\u03b5\u03c2 \u0393\u03bb\u03ce\u03c3\u03c3\u03b5\u03c2\", `\r\n        ${data.languages.map(item => `<div class=\"cv-item\">\r\n          <div class=\"cv-item-title\">${escapeHtml(item.name)}<\/div>\r\n          <div class=\"cv-item-sub\">${[item.level, item.cert].filter(Boolean).map(escapeHtml).join(\" | \")}<\/div>\r\n        <\/div>`).join(\"\")}\r\n      `));\r\n    }\r\n\r\n    if(data.computerSkills.length){\r\n      blocks.push(sectionBlock(\"\u0393\u03bd\u03ce\u03c3\u03b5\u03b9\u03c2 \u0397\/\u03a5\", `\r\n        ${data.computerSkills.map(item => `<div class=\"cv-item\">\r\n          <div class=\"cv-item-title\">${escapeHtml(item.name)}<\/div>\r\n          <div class=\"cv-item-sub\">${[item.level, item.cert].filter(Boolean).map(escapeHtml).join(\" | \")}<\/div>\r\n        <\/div>`).join(\"\")}\r\n      `));\r\n    }\r\n\r\n    if(data.certifications.length){\r\n      blocks.push(sectionBlock(\"\u03a0\u03b9\u03c3\u03c4\u03bf\u03c0\u03bf\u03b9\u03ae\u03c3\u03b5\u03b9\u03c2 \/ \u03a3\u03b5\u03bc\u03b9\u03bd\u03ac\u03c1\u03b9\u03b1\", `\r\n        ${data.certifications.map(item => `<div class=\"cv-item\">\r\n          <div class=\"cv-item-title\">${escapeHtml(item.title)}<\/div>\r\n          <div class=\"cv-item-sub\">${[item.org, item.year].filter(Boolean).map(escapeHtml).join(\" | \")}<\/div>\r\n          ${item.desc ? `<div class=\"cv-item-desc\">${escapeHtml(item.desc)}<\/div>` : \"\"}\r\n        <\/div>`).join(\"\")}\r\n      `));\r\n    }\r\n\r\n    if(data.extras.length){\r\n      blocks.push(sectionBlock(\"\u03a0\u03c1\u03cc\u03c3\u03b8\u03b5\u03c4\u03b1 \u03a0\u03c1\u03bf\u03c3\u03cc\u03bd\u03c4\u03b1\", `<div class=\"cv-simple-lines\">${data.extras.map(item => lineWithDot(escapeHtml(item.text))).join(\"\")}<\/div>`));\r\n    }\r\n\r\n    if(data.skills.length){\r\n      blocks.push(sectionBlock(\"\u0394\u03b5\u03be\u03b9\u03cc\u03c4\u03b7\u03c4\u03b5\u03c2\", `\r\n        ${data.skills.map(item => `<div class=\"cv-item\">\r\n          <div class=\"cv-item-title\">${escapeHtml(item.name)}<\/div>\r\n          ${item.level ? `<div class=\"cv-item-sub\">${escapeHtml(item.level)}<\/div>` : \"\"}\r\n        <\/div>`).join(\"\")}\r\n      `));\r\n    }\r\n\r\n    return blocks;\r\n  }\r\n\r\n  function createPageMarkup(templateType, headerHtml, bodyHtml, extraBodyClass){\r\n    return `\r\n      <div class=\"cv-page cv-template-${templateType}\">\r\n        <div class=\"cv-page-frame\">\r\n          <div class=\"cv-page-inner\">\r\n            ${headerHtml}\r\n            <div class=\"cv-page-body ${extraBodyClass || \"\"}\">\r\n              ${bodyHtml}\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    `;\r\n  }\r\n\r\n  function createMeasurePage(templateType, headerHtml, extraBodyClass){\r\n    const exportArea = document.getElementById(\"exportArea\");\r\n    const wrapper = document.createElement(\"div\");\r\n    wrapper.innerHTML = createPageMarkup(templateType, headerHtml, \"\", extraBodyClass);\r\n    exportArea.appendChild(wrapper.firstElementChild);\r\n    return exportArea.lastElementChild;\r\n  }\r\n\r\n  function paginateSingleColumn(templateType, data, blocks, firstBodyClass){\r\n    const exportArea = document.getElementById(\"exportArea\");\r\n    exportArea.innerHTML = \"\";\r\n\r\n    const pages = [];\r\n    let first = true;\r\n    let measurePage = createMeasurePage(templateType, renderMainHeader(data, templateType), firstBodyClass || \"\");\r\n    let body = measurePage.querySelector(\".cv-page-body\");\r\n    let currentBlocks = [];\r\n\r\n    blocks.forEach(blockHtml => {\r\n      const holder = document.createElement(\"div\");\r\n      holder.innerHTML = blockHtml;\r\n      const block = holder.firstElementChild || holder;\r\n      body.appendChild(block);\r\n\r\n      if(body.scrollHeight > body.clientHeight + 1){\r\n        block.remove();\r\n        pages.push(createPageMarkup(templateType, first ? renderMainHeader(data, templateType) : renderContinuationHeader(data), currentBlocks.join(\"\"), first ? (firstBodyClass || \"\") : \"compact-top\"));\r\n        exportArea.innerHTML = \"\";\r\n        first = false;\r\n        measurePage = createMeasurePage(templateType, renderContinuationHeader(data), \"compact-top\");\r\n        body = measurePage.querySelector(\".cv-page-body\");\r\n        currentBlocks = [];\r\n        body.appendChild(block);\r\n      }\r\n\r\n      currentBlocks.push(blockHtml);\r\n    });\r\n\r\n    pages.push(createPageMarkup(templateType, first ? renderMainHeader(data, templateType) : renderContinuationHeader(data), currentBlocks.join(\"\"), first ? (firstBodyClass || \"\") : \"compact-top\"));\r\n    exportArea.innerHTML = \"\";\r\n    return `<div class=\"cv-document\">${pages.join(\"\")}<\/div>`;\r\n  }\r\n\r\n  function paginateTwoColumn(data){\r\n    const exportArea = document.getElementById(\"exportArea\");\r\n    exportArea.innerHTML = \"\";\r\n    const columns = buildModernColumns(data);\r\n\r\n    const pages = [];\r\n    let first = true;\r\n    let leftIndex = 0;\r\n    let rightIndex = 0;\r\n\r\n    while(leftIndex < columns.leftBlocks.length || rightIndex < columns.rightBlocks.length){\r\n      const headerHtml = first ? renderMainHeader(data, \"modern\") : renderContinuationHeader(data);\r\n      const page = createMeasurePage(\"modern\", headerHtml, first ? \"\" : \"compact-top\");\r\n      const body = page.querySelector(\".cv-page-body\");\r\n      body.innerHTML = `<div class=\"cv-two-col\"><div class=\"col-left\"><\/div><div class=\"col-right\"><\/div><\/div>`;\r\n      const leftCol = body.querySelector(\".col-left\");\r\n      const rightCol = body.querySelector(\".col-right\");\r\n\r\n      let pageLeft = [];\r\n      let pageRight = [];\r\n\r\n      while(leftIndex < columns.leftBlocks.length){\r\n        const holder = document.createElement(\"div\");\r\n        holder.innerHTML = columns.leftBlocks[leftIndex];\r\n        const block = holder.firstElementChild || holder;\r\n        leftCol.appendChild(block);\r\n        if(body.scrollHeight > body.clientHeight + 1){\r\n          block.remove();\r\n          break;\r\n        }\r\n        pageLeft.push(columns.leftBlocks[leftIndex]);\r\n        leftIndex++;\r\n      }\r\n\r\n      while(rightIndex < columns.rightBlocks.length){\r\n        const holder = document.createElement(\"div\");\r\n        holder.innerHTML = columns.rightBlocks[rightIndex];\r\n        const block = holder.firstElementChild || holder;\r\n        rightCol.appendChild(block);\r\n        if(body.scrollHeight > body.clientHeight + 1){\r\n          block.remove();\r\n          break;\r\n        }\r\n        pageRight.push(columns.rightBlocks[rightIndex]);\r\n        rightIndex++;\r\n      }\r\n\r\n      if(!pageLeft.length && leftIndex < columns.leftBlocks.length){\r\n        pageLeft.push(columns.leftBlocks[leftIndex]);\r\n        leftIndex++;\r\n      }\r\n      if(!pageRight.length && rightIndex < columns.rightBlocks.length){\r\n        pageRight.push(columns.rightBlocks[rightIndex]);\r\n        rightIndex++;\r\n      }\r\n\r\n      pages.push(createPageMarkup(\"modern\", headerHtml, `<div class=\"cv-two-col\"><div>${pageLeft.join(\"\")}<\/div><div>${pageRight.join(\"\")}<\/div><\/div>`, first ? \"\" : \"compact-top\"));\r\n      exportArea.innerHTML = \"\";\r\n      first = false;\r\n    }\r\n\r\n    if(!pages.length){\r\n      pages.push(createPageMarkup(\"modern\", renderMainHeader(data, \"modern\"), `<div class=\"cv-two-col\"><div><\/div><div><\/div><\/div>`, \"\"));\r\n    }\r\n\r\n    return `<div class=\"cv-document\">${pages.join(\"\")}<\/div>`;\r\n  }\r\n\r\n  function renderClassic(data){\r\n    return paginateSingleColumn(\"classic\", data, buildClassicBlocks(data), \"\");\r\n  }\r\n\r\n  function renderModern(data){\r\n    return paginateTwoColumn(data);\r\n  }\r\n\r\n  function renderCompact(data){\r\n    return paginateSingleColumn(\"compact\", data, buildCompactBlocks(data), \"\");\r\n  }\r\n\r\n\r\n  function buildDocument(templateType, data){\r\n    if(templateType === \"modern\") return renderModern(data);\r\n    if(templateType === \"compact\") return renderCompact(data);\r\n    return renderClassic(data);\r\n  }\r\n\r\n  function renderSelectedPreview(){\r\n    document.getElementById(\"singlePreview\").innerHTML = buildDocument(selectedTemplate, getData());\r\n    saveDraft();\r\n  }\r\n\r\n  function selectTemplate(template){\r\n    selectedTemplate = template;\r\n    document.querySelectorAll(\".template-line\").forEach(btn => {\r\n      btn.classList.toggle(\"selected\", btn.dataset.templateBtn === template);\r\n    });\r\n    renderSelectedPreview();\r\n  }\r\n\r\n  function saveDraft(){\r\n    const draft = getData();\r\n    draft.selectedTemplate = selectedTemplate;\r\n    localStorage.setItem(STORAGE_KEY, JSON.stringify(draft));\r\n  }\r\n\r\n  function loadDraft(){\r\n    const raw = localStorage.getItem(STORAGE_KEY);\r\n    if(!raw) return;\r\n    try{\r\n      const data = JSON.parse(raw);\r\n\r\n      [\"fullName\",\"headline\",\"city\",\"phone\",\"email\",\"birthDate\",\"linkedin\",\"website\",\"github\",\"profile\"].forEach(key => {\r\n        if(form[key] && data[key] !== undefined) form[key].value = data[key] || \"\";\r\n      });\r\n\r\n\r\n      if(data.hasExperience){\r\n        const radio = form.querySelector(`input[name=\"hasExperience\"][value=\"${data.hasExperience}\"]`);\r\n        if(radio) radio.checked = true;\r\n      }\r\n\r\n      educationList.innerHTML = \"\";\r\n      experienceList.innerHTML = \"\";\r\n      skillsList.innerHTML = \"\";\r\n      languagesList.innerHTML = \"\";\r\n      computerSkillsList.innerHTML = \"\";\r\n      certificationsList.innerHTML = \"\";\r\n      extrasList.innerHTML = \"\";\r\n\r\n      (data.education || []).forEach(addEducationRow);\r\n      (data.experience || []).forEach(addExperienceRow);\r\n      (data.skills || []).forEach(addSkillRow);\r\n      (data.languages || []).forEach(addLanguageRow);\r\n      (data.computerSkills || []).forEach(addComputerSkillRow);\r\n      (data.certifications || []).forEach(addCertificationRow);\r\n      (data.extras || []).forEach(addExtraRow);\r\n\r\n      if(!educationList.children.length) addEducationRow();\r\n      if(!experienceList.children.length) addExperienceRow();\r\n      if(!skillsList.children.length) addSkillRow();\r\n      if(!languagesList.children.length) addLanguageRow();\r\n      if(!computerSkillsList.children.length) addComputerSkillRow();\r\n      if(!certificationsList.children.length) addCertificationRow();\r\n      if(!extrasList.children.length) addExtraRow();\r\n\r\n      selectedTemplate = data.selectedTemplate || \"classic\";\r\n      selectTemplate(selectedTemplate);\r\n      updateExperienceMode();\r\n    } catch(e){}\r\n  }\r\n\r\n  function updateExperienceMode(){\r\n    const hasExp = getHasExperience() === \"yes\";\r\n    document.getElementById(\"experienceTitleHint\").textContent = hasExp\r\n      ? \"\u03a3\u03c5\u03bc\u03c0\u03bb\u03ae\u03c1\u03c9\u03c3\u03b5 \u03c4\u03b7\u03bd \u03b5\u03c0\u03b1\u03b3\u03b3\u03b5\u03bb\u03bc\u03b1\u03c4\u03b9\u03ba\u03ae \u03b5\u03bc\u03c0\u03b5\u03b9\u03c1\u03af\u03b1 \u03c3\u03bf\u03c5.\"\r\n      : \"\u03a3\u03c5\u03bc\u03c0\u03bb\u03ae\u03c1\u03c9\u03c3\u03b5 \u03c0\u03c1\u03b1\u03ba\u03c4\u03b9\u03ba\u03ae, projects, \u03b5\u03b8\u03b5\u03bb\u03bf\u03bd\u03c4\u03b9\u03c3\u03bc\u03cc \u03ae \u03ac\u03bb\u03bb\u03b5\u03c2 \u03b4\u03c1\u03b1\u03c3\u03c4\u03b7\u03c1\u03b9\u03cc\u03c4\u03b7\u03c4\u03b5\u03c2.\";\r\n\r\n    const btn = document.getElementById(\"addExperienceBtn\");\r\n    btn.textContent = hasExp ? \"+ \u03a0\u03c1\u03bf\u03c3\u03b8\u03ae\u03ba\u03b7 \u03b5\u03bc\u03c0\u03b5\u03b9\u03c1\u03af\u03b1\u03c2\" : \"+ \u03a0\u03c1\u03bf\u03c3\u03b8\u03ae\u03ba\u03b7 project \/ \u03b4\u03c1\u03b1\u03c3\u03c4\u03b7\u03c1\u03b9\u03cc\u03c4\u03b7\u03c4\u03b1\u03c2\";\r\n\r\n    const current = collectExperience();\r\n    experienceList.innerHTML = \"\";\r\n    if(current.length){\r\n      current.forEach(addExperienceRow);\r\n    } else {\r\n      addExperienceRow();\r\n    }\r\n    saveDraft();\r\n  }\r\n\r\n  function downloadFile(url, filename){\r\n    const a = document.createElement(\"a\");\r\n    a.href = url;\r\n    a.download = filename;\r\n    document.body.appendChild(a);\r\n    a.click();\r\n    setTimeout(() => {\r\n      URL.revokeObjectURL(url);\r\n      a.remove();\r\n    }, 400);\r\n  }\r\nasync function exportPdf(){\r\n  const exportArea = document.getElementById(\"exportArea\");\r\n  const previousStyle = exportArea.getAttribute(\"style\") || \"\";\r\n  const previousClass = exportArea.className || \"\";\r\n\r\n  exportArea.innerHTML = buildDocument(selectedTemplate, getData());\r\n  exportArea.classList.add(\"pdf-export-mode\");\r\n  exportArea.style.position = \"fixed\";\r\n  exportArea.style.left = \"-10000px\";\r\n  exportArea.style.top = \"0\";\r\n  exportArea.style.width = \"794px\";\r\n  exportArea.style.background = \"#fff\";\r\n  exportArea.style.opacity = \"1\";\r\n  exportArea.style.pointerEvents = \"none\";\r\n  exportArea.style.zIndex = \"-1\";\r\n  exportArea.style.padding = \"0\";\r\n  exportArea.style.margin = \"0\";\r\n  exportArea.style.overflow = \"hidden\";\r\n\r\n  const doc = exportArea.querySelector(\".cv-document\");\r\n  const pages = doc ? Array.from(doc.querySelectorAll(\".cv-page\")) : [];\r\n\r\n  if(!pages.length){\r\n    exportArea.innerHTML = \"\";\r\n    exportArea.className = previousClass;\r\n    exportArea.setAttribute(\"style\", previousStyle);\r\n    alert(\"\u0394\u03b5\u03bd \u03b2\u03c1\u03ad\u03b8\u03b7\u03ba\u03b5 \u03c0\u03b5\u03c1\u03b9\u03b5\u03c7\u03cc\u03bc\u03b5\u03bd\u03bf \u03b3\u03b9\u03b1 \u03b5\u03be\u03b1\u03b3\u03c9\u03b3\u03ae \u03c3\u03b5 PDF.\");\r\n    return;\r\n  }\r\n\r\n  try{\r\n    if(typeof html2canvas === \"undefined\"){\r\n      throw new Error(\"html2canvas \u03b4\u03b5\u03bd \u03ad\u03c7\u03b5\u03b9 \u03c6\u03bf\u03c1\u03c4\u03c9\u03b8\u03b5\u03af.\");\r\n    }\r\n\r\n    const JsPdfCtor =\r\n      (window.jspdf && window.jspdf.jsPDF)\r\n      || window.jsPDF\r\n      || null;\r\n\r\n    if(!JsPdfCtor){\r\n      throw new Error(\"jsPDF \u03b4\u03b5\u03bd \u03ad\u03c7\u03b5\u03b9 \u03c6\u03bf\u03c1\u03c4\u03c9\u03b8\u03b5\u03af \u03c3\u03c9\u03c3\u03c4\u03ac.\");\r\n    }\r\n\r\n    if(document.fonts && document.fonts.ready){\r\n      await document.fonts.ready;\r\n    }\r\n\r\n    const pdf = new JsPdfCtor({\r\n      orientation: \"portrait\",\r\n      unit: \"mm\",\r\n      format: \"a4\",\r\n      compress: true\r\n    });\r\n\r\n    const pageWidth = pdf.internal.pageSize.getWidth();\r\n    const pageHeight = pdf.internal.pageSize.getHeight();\r\n    const margin = 5; \/\/ 0,5 \u03b5\u03ba.\r\n    const printableWidth = pageWidth - (margin * 2);\r\n    const printableHeight = pageHeight - (margin * 2);\r\n\r\n    for(let i = 0; i < pages.length; i++){\r\n      const pageEl = pages[i];\r\n\r\n      const canvas = await html2canvas(pageEl, {\r\n        scale: 2,\r\n        useCORS: true,\r\n        backgroundColor: \"#ffffff\",\r\n        logging: false,\r\n        scrollX: 0,\r\n        scrollY: 0,\r\n        windowWidth: 794,\r\n        windowHeight: 1122\r\n      });\r\n\r\n      const imgData = canvas.toDataURL(\"image\/jpeg\", 0.98);\r\n\r\n      if(i > 0){\r\n        pdf.addPage();\r\n      }\r\n\r\n      pdf.addImage(\r\n        imgData,\r\n        \"JPEG\",\r\n        margin,\r\n        margin,\r\n        printableWidth,\r\n        printableHeight,\r\n        undefined,\r\n        \"FAST\"\r\n      );\r\n    }\r\n\r\n    pdf.save(`mysep-biografiko-${selectedTemplate}.pdf`);\r\n\r\n  } catch(err){\r\n    console.error(\"PDF export error:\", err);\r\n\r\n    if(String(err && err.message || \"\").includes(\"jsPDF\")){\r\n      alert(\"\u0397 \u03bb\u03ae\u03c8\u03b7 \u03c3\u03b5 PDF \u03b1\u03c0\u03ad\u03c4\u03c5\u03c7\u03b5 \u03b3\u03b9\u03b1\u03c4\u03af \u03b4\u03b5\u03bd \u03ad\u03c7\u03b5\u03b9 \u03c6\u03bf\u03c1\u03c4\u03c9\u03b8\u03b5\u03af \u03c3\u03c9\u03c3\u03c4\u03ac \u03b7 \u03b2\u03b9\u03b2\u03bb\u03b9\u03bf\u03b8\u03ae\u03ba\u03b7 jsPDF \u03c3\u03c4\u03b7 \u03c3\u03b5\u03bb\u03af\u03b4\u03b1.\");\r\n    } else if(String(err && err.message || \"\").includes(\"html2canvas\")){\r\n      alert(\"\u0397 \u03bb\u03ae\u03c8\u03b7 \u03c3\u03b5 PDF \u03b1\u03c0\u03ad\u03c4\u03c5\u03c7\u03b5 \u03b3\u03b9\u03b1\u03c4\u03af \u03b4\u03b5\u03bd \u03ad\u03c7\u03b5\u03b9 \u03c6\u03bf\u03c1\u03c4\u03c9\u03b8\u03b5\u03af \u03c3\u03c9\u03c3\u03c4\u03ac \u03b7 \u03b2\u03b9\u03b2\u03bb\u03b9\u03bf\u03b8\u03ae\u03ba\u03b7 html2canvas \u03c3\u03c4\u03b7 \u03c3\u03b5\u03bb\u03af\u03b4\u03b1.\");\r\n    } else {\r\n      alert(\"\u0397 \u03bb\u03ae\u03c8\u03b7 \u03c3\u03b5 PDF \u03b1\u03c0\u03ad\u03c4\u03c5\u03c7\u03b5. \u0394\u03b5\u03c2 \u03c4\u03bf console \u03c4\u03bf\u03c5 browser.\");\r\n    }\r\n  } finally {\r\n    exportArea.innerHTML = \"\";\r\n    exportArea.className = previousClass;\r\n    exportArea.setAttribute(\"style\", previousStyle);\r\n  }\r\n}\r\n  document.getElementById(\"addEducationBtn\").addEventListener(\"click\", () => addEducationRow());\r\n  document.getElementById(\"addExperienceBtn\").addEventListener(\"click\", () => addExperienceRow());\r\n  document.getElementById(\"addSkillBtn\").addEventListener(\"click\", () => addSkillRow());\r\n  document.getElementById(\"addLanguageBtn\").addEventListener(\"click\", () => addLanguageRow());\r\n  document.getElementById(\"addComputerSkillBtn\").addEventListener(\"click\", () => addComputerSkillRow());\r\n  document.getElementById(\"addCertificationBtn\").addEventListener(\"click\", () => addCertificationRow());\r\n  document.getElementById(\"addExtraBtn\").addEventListener(\"click\", () => addExtraRow());\r\n\r\n  document.querySelectorAll('input[name=\"hasExperience\"]').forEach(r => {\r\n    r.addEventListener(\"change\", updateExperienceMode);\r\n  });\r\n\r\n  document.getElementById(\"fillProfileBeginner\").addEventListener(\"click\", function(){\r\n    form.profile.value = \"\u0391\u03c0\u03cc\u03c6\u03bf\u03b9\u03c4\u03bf\u03c2\/\u03b7 \u03bc\u03b5 \u03b5\u03bd\u03b4\u03b9\u03b1\u03c6\u03ad\u03c1\u03bf\u03bd \u03b3\u03b9\u03b1 \u03b5\u03c0\u03b1\u03b3\u03b3\u03b5\u03bb\u03bc\u03b1\u03c4\u03b9\u03ba\u03ae \u03b5\u03be\u03ad\u03bb\u03b9\u03be\u03b7 \u03ba\u03b1\u03b9 \u03b4\u03b9\u03ac\u03b8\u03b5\u03c3\u03b7 \u03b3\u03b9\u03b1 \u03bc\u03ac\u03b8\u03b7\u03c3\u03b7, \u03c5\u03c0\u03b5\u03c5\u03b8\u03c5\u03bd\u03cc\u03c4\u03b7\u03c4\u03b1 \u03ba\u03b1\u03b9 \u03bf\u03bc\u03b1\u03b4\u03b9\u03ba\u03ae \u03c3\u03c5\u03bd\u03b5\u03c1\u03b3\u03b1\u03c3\u03af\u03b1. \u039c\u03ad\u03c3\u03b1 \u03b1\u03c0\u03cc \u03c4\u03b9\u03c2 \u03c3\u03c0\u03bf\u03c5\u03b4\u03ad\u03c2, \u03c4\u03b7 \u03c3\u03c5\u03bc\u03bc\u03b5\u03c4\u03bf\u03c7\u03ae \u03c3\u03b5 \u03b4\u03c1\u03b1\u03c3\u03c4\u03b7\u03c1\u03b9\u03cc\u03c4\u03b7\u03c4\u03b5\u03c2 \u03ba\u03b1\u03b9 \u03c4\u03b7\u03bd \u03b1\u03bd\u03ac\u03c0\u03c4\u03c5\u03be\u03b7 \u03b4\u03b5\u03be\u03b9\u03bf\u03c4\u03ae\u03c4\u03c9\u03bd, \u03b5\u03c0\u03b9\u03b4\u03b9\u03ce\u03ba\u03c9 \u03bd\u03b1 \u03b1\u03be\u03b9\u03bf\u03c0\u03bf\u03b9\u03ae\u03c3\u03c9 \u03c4\u03b9\u03c2 \u03b3\u03bd\u03ce\u03c3\u03b5\u03b9\u03c2 \u03bc\u03bf\u03c5 \u03c3\u03b5 \u03ad\u03bd\u03b1 \u03bf\u03c1\u03b3\u03b1\u03bd\u03c9\u03bc\u03ad\u03bd\u03bf \u03b5\u03c1\u03b3\u03b1\u03c3\u03b9\u03b1\u03ba\u03cc \u03c0\u03b5\u03c1\u03b9\u03b2\u03ac\u03bb\u03bb\u03bf\u03bd.\";\r\n    saveDraft();\r\n  });\r\n\r\n  document.getElementById(\"fillProfileExperienced\").addEventListener(\"click\", function(){\r\n    form.profile.value = \"\u0395\u03c0\u03b1\u03b3\u03b3\u03b5\u03bb\u03bc\u03b1\u03c4\u03af\u03b1\u03c2 \u03bc\u03b5 \u03b5\u03bc\u03c0\u03b5\u03b9\u03c1\u03af\u03b1 \u03c3\u03c4\u03bf \u03b1\u03bd\u03c4\u03b9\u03ba\u03b5\u03af\u03bc\u03b5\u03bd\u03cc \u03c4\u03bf\u03c5\/\u03c4\u03b7\u03c2, \u03bf\u03c1\u03b3\u03b1\u03bd\u03c9\u03c4\u03b9\u03ba\u03ae \u03b9\u03ba\u03b1\u03bd\u03cc\u03c4\u03b7\u03c4\u03b1, \u03c3\u03c5\u03bd\u03ad\u03c0\u03b5\u03b9\u03b1 \u03ba\u03b1\u03b9 \u03c0\u03c1\u03bf\u03c3\u03b1\u03c1\u03bc\u03bf\u03c3\u03c4\u03b9\u03ba\u03cc\u03c4\u03b7\u03c4\u03b1 \u03c3\u03b5 \u03b4\u03b9\u03b1\u03c6\u03bf\u03c1\u03b5\u03c4\u03b9\u03ba\u03ac \u03b5\u03c1\u03b3\u03b1\u03c3\u03b9\u03b1\u03ba\u03ac \u03c0\u03b5\u03c1\u03b9\u03b2\u03ac\u03bb\u03bb\u03bf\u03bd\u03c4\u03b1. \u0394\u03b9\u03b1\u03b8\u03ad\u03c4\u03c9 \u03b4\u03b9\u03ac\u03b8\u03b5\u03c3\u03b7 \u03b3\u03b9\u03b1 \u03c3\u03c5\u03bd\u03b5\u03c7\u03ae \u03b2\u03b5\u03bb\u03c4\u03af\u03c9\u03c3\u03b7, \u03c5\u03c0\u03b5\u03c5\u03b8\u03c5\u03bd\u03cc\u03c4\u03b7\u03c4\u03b1 \u03ba\u03b1\u03b9 \u03b1\u03c0\u03bf\u03c4\u03b5\u03bb\u03b5\u03c3\u03bc\u03b1\u03c4\u03b9\u03ba\u03ae \u03c3\u03c5\u03bd\u03b5\u03c1\u03b3\u03b1\u03c3\u03af\u03b1 \u03bc\u03b5 \u03c3\u03c4\u03cc\u03c7\u03bf \u03c4\u03b7\u03bd \u03c0\u03bf\u03b9\u03bf\u03c4\u03b9\u03ba\u03ae \u03c5\u03c0\u03bf\u03c3\u03c4\u03ae\u03c1\u03b9\u03be\u03b7 \u03c4\u03c9\u03bd \u03b1\u03bd\u03b1\u03b3\u03ba\u03ce\u03bd \u03c4\u03b7\u03c2 \u03b8\u03ad\u03c3\u03b7\u03c2.\";\r\n    saveDraft();\r\n  });\r\n\r\n  document.querySelectorAll(\"[data-template-btn]\").forEach(btn => {\r\n    btn.addEventListener(\"click\", function(){\r\n      selectTemplate(this.dataset.templateBtn);\r\n    });\r\n  });\r\n\r\n  document.getElementById(\"downloadPdfBtn\").addEventListener(\"click\", exportPdf);\r\n\r\n  document.getElementById(\"clearDraftBtn\").addEventListener(\"click\", function(){\r\n    if(confirm(\"\u0398\u03ad\u03bb\u03b5\u03b9\u03c2 \u03c3\u03af\u03b3\u03bf\u03c5\u03c1\u03b1 \u03bd\u03b1 \u03b4\u03b9\u03b1\u03b3\u03c1\u03ac\u03c8\u03b5\u03b9\u03c2 \u03c4\u03b1 \u03b1\u03c0\u03bf\u03b8\u03b7\u03ba\u03b5\u03c5\u03bc\u03ad\u03bd\u03b1 \u03c3\u03c4\u03bf\u03b9\u03c7\u03b5\u03af\u03b1 \u03b1\u03c0\u03cc \u03b1\u03c5\u03c4\u03cc\u03bd \u03c4\u03bf\u03bd browser;\")){\r\n      localStorage.removeItem(STORAGE_KEY);\r\n      location.reload();\r\n    }\r\n  });\r\n\r\n  form.addEventListener(\"click\", function(e){\r\n    if(e.target.classList.contains(\"remove-row\")){\r\n      const group = e.target.closest(\".repeat-group\");\r\n      const parent = group.parentElement;\r\n      group.remove();\r\n\r\n      if(parent.children.length === 0){\r\n        if(parent.id === \"educationList\") addEducationRow();\r\n        if(parent.id === \"experienceList\") addExperienceRow();\r\n        if(parent.id === \"skillsList\") addSkillRow();\r\n        if(parent.id === \"languagesList\") addLanguageRow();\r\n        if(parent.id === \"computerSkillsList\") addComputerSkillRow();\r\n        if(parent.id === \"certificationsList\") addCertificationRow();\r\n        if(parent.id === \"extrasList\") addExtraRow();\r\n      }\r\n      saveDraft();\r\n    }\r\n  });\r\n\r\n  form.addEventListener(\"input\", function(){\r\n    saveDraft();\r\n    if(currentStep === 10) renderSelectedPreview();\r\n  });\r\n\r\n  form.addEventListener(\"change\", function(){\r\n    saveDraft();\r\n    if(currentStep === 10) renderSelectedPreview();\r\n  });\r\n\r\n  document.getElementById(\"prevBtn\").addEventListener(\"click\", function(){\r\n    if(currentStep > 1){\r\n      currentStep--;\r\n      stepUpdate();\r\n    }\r\n  });\r\n\r\n  document.getElementById(\"nextBtn\").addEventListener(\"click\", function(){\r\n    if(!validateStep(currentStep)){\r\n      alert(\"\u03a3\u03c5\u03bc\u03c0\u03bb\u03ae\u03c1\u03c9\u03c3\u03b5 \u03c3\u03c9\u03c3\u03c4\u03ac \u03c4\u03b1 \u03b1\u03c0\u03b1\u03c1\u03b1\u03af\u03c4\u03b7\u03c4\u03b1 \u03c3\u03c4\u03bf\u03b9\u03c7\u03b5\u03af\u03b1 \u03c0\u03c1\u03b9\u03bd \u03c0\u03c1\u03bf\u03c7\u03c9\u03c1\u03ae\u03c3\u03b5\u03b9\u03c2.\");\r\n      return;\r\n    }\r\n    if(currentStep < totalSteps){\r\n      currentStep++;\r\n      stepUpdate();\r\n    }\r\n  });\r\n\r\n  if(!educationList.children.length) addEducationRow();\r\n  if(!experienceList.children.length) addExperienceRow();\r\n  if(!skillsList.children.length) addSkillRow();\r\n  if(!languagesList.children.length) addLanguageRow();\r\n  if(!computerSkillsList.children.length) addComputerSkillRow();\r\n  if(!certificationsList.children.length) addCertificationRow();\r\n  if(!extrasList.children.length) addExtraRow();\r\n\r\n  loadDraft();\r\n  stepUpdate();\r\n})();\r\n<\/script>\r\n\n<p>&nbsp;<\/p>\n<p style=\"padding-left: 40px;\">\ud83d\udc49 \u00ab\u0395\u03c0\u03cc\u03bc\u03b5\u03bd\u03bf \u03b2\u03ae\u03bc\u03b1: <a href=\"https:\/\/www.mysep.gr\/?p=149984\" target=\"_blank\" rel=\"noopener\">\u03a0\u03c1\u03bf\u03b5\u03c4\u03bf\u03b9\u03bc\u03ac\u03c3\u03bf\u03c5 \u03b3\u03b9\u03b1 \u03c4\u03b7 \u03c3\u03c5\u03bd\u03ad\u03bd\u03c4\u03b5\u03c5\u03be<\/a>\u03b7\u00bb<\/p>\n<p><span style=\"color: #ffffff;\">.<\/span><\/p>\n<p><span style=\"color: #ffffff;\">.<\/span><\/p>\n<p><span style=\"color: #ffffff;\">.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":149941,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[108],"tags":[],"class_list":["post-149909","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-108"],"acf":[],"jetpack_featured_media_url":"https:\/\/www.mysep.gr\/wp-content\/uploads\/2026\/03\/cv-.png","_links":{"self":[{"href":"https:\/\/www.mysep.gr\/index.php?rest_route=\/wp\/v2\/posts\/149909","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mysep.gr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mysep.gr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mysep.gr\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mysep.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=149909"}],"version-history":[{"count":12,"href":"https:\/\/www.mysep.gr\/index.php?rest_route=\/wp\/v2\/posts\/149909\/revisions"}],"predecessor-version":[{"id":150000,"href":"https:\/\/www.mysep.gr\/index.php?rest_route=\/wp\/v2\/posts\/149909\/revisions\/150000"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mysep.gr\/index.php?rest_route=\/wp\/v2\/media\/149941"}],"wp:attachment":[{"href":"https:\/\/www.mysep.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=149909"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mysep.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=149909"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mysep.gr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=149909"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}