{% extends "layouts/dashboard.html" %}
{% block extra_head %}{% include "rep/partials/quill_head.html" %}{% endblock %}
{% block breadcrumbs %}
<nav class="flex items-center gap-1.5 font-meta text-xs text-ruforum-text-muted" aria-label="Breadcrumb">
  <a href="{% url 'core:dashboard' %}" class="hover:text-ruforum-primary transition-colors">Dashboard</a>
  {% include "components/crumb_sep.html" %}
  <span class="opacity-60">REP</span>
  {% include "components/crumb_sep.html" %}
  <span class="text-ruforum-text">My CV</span>
</nav>
{% endblock %}
{% block content %}
{{ sections_initial|json_script:"cv-sections-initial" }}

<div x-data="{ tab: (window.location.hash === '#preview' ? 'preview' : (window.location.hash === '#visibility' ? 'visibility' : 'edit')),
               loadFrame() { var f = document.getElementById('cv-preview-frame'); if (f && !f.src && f.dataset.src) f.src = f.dataset.src; },
               openTab(t) { this.tab = t; history.replaceState(null, '', t === 'edit' ? '#' : '#' + t); window.scrollTo({ top: 0, behavior: 'smooth' }); if (t === 'preview') this.loadFrame(); } }"
     x-init="if (tab === 'preview') loadFrame()">

  {% include "components/page_header.html" with title="My CV profile" subtitle="Build the profile that recruiters review when you apply for jobs on the RUFORUM network. The headline, summary, and sections below appear in the application detail page that employers see." %}
  <div class="-mt-3 mb-6 flex flex-wrap items-center gap-3">
    <a href="{% url 'rep_career:cv_download_pdf' %}"
       class="font-meta text-[11px] uppercase tracking-[0.10em] text-ruforum-text-muted hover:text-ruforum-primary transition-colors">
      Download PDF →
    </a>
    <a href="{% url 'rep_career:cv_preview' %}" target="_blank" rel="noopener"
       class="font-meta text-[11px] uppercase tracking-[0.10em] text-ruforum-text-muted hover:text-ruforum-primary transition-colors">
      Open in new tab ↗
    </a>
  </div>

  {# UX tip: how recruiters actually read CVs — keeps writers honest about impact. #}
  <aside class="mb-6 flex gap-3 rounded-xl border border-ruforum-border bg-ruforum-surface-warm/60 px-4 py-3 text-[12.5px] leading-relaxed text-ruforum-text">
    <svg class="mt-0.5 h-4 w-4 shrink-0 text-ruforum-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
      <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25"/>
    </svg>
    <div>
      <p><span class="font-semibold">Writing tips ·</span> Lead each bullet with a <em>strong verb</em> (designed, led, increased, secured). Pair it with a <em>measurable outcome</em> (rolled out to 14 universities, raised completion by 23%, mobilised $180k). Keep your summary under 80 words — most recruiters read it in 6 seconds. Use the <span class="font-semibold">Preview</span> tab to see exactly what employers see.</p>
    </div>
  </aside>

  {# ── Tabs ──────────────────────────────────────────────────────── #}
  <div class="tabs" role="tablist" aria-label="CV sections">
    <button type="button" role="tab" id="tab-edit"
            class="tabs__btn"
            :class="{ 'tabs__btn--current': tab === 'edit' }"
            :aria-selected="tab === 'edit' ? 'true' : 'false'"
            @click="openTab('edit')">
      Edit
    </button>
    <button type="button" role="tab" id="tab-preview"
            class="tabs__btn"
            :class="{ 'tabs__btn--current': tab === 'preview' }"
            :aria-selected="tab === 'preview' ? 'true' : 'false'"
            @click="openTab('preview')">
      Preview
    </button>
    <button type="button" role="tab" id="tab-visibility"
            class="tabs__btn"
            :class="{ 'tabs__btn--current': tab === 'visibility' }"
            :aria-selected="tab === 'visibility' ? 'true' : 'false'"
            @click="openTab('visibility')">
      Who sees this?
    </button>
  </div>

  {# ── Edit tab ──────────────────────────────────────────────────── #}
  <div x-show="tab === 'edit'" x-cloak role="tabpanel" aria-labelledby="tab-edit">

  <form method="post" id="rep-cv-form" enctype="multipart/form-data" class="space-y-6">
    {% csrf_token %}
    <input type="hidden" name="cv_sections_json" id="cv-sections-payload" value="" />

    {# Profile details #}
    <div class="rounded-2xl border border-ruforum-border bg-white overflow-hidden">
      <div class="border-b border-ruforum-border px-6 py-3">
        <h2 class="font-display text-base font-semibold text-ruforum-text">Profile details</h2>
        <p class="mt-0.5 font-meta text-xs text-ruforum-text-muted">Headline plus the rich-text summary (formatting below) are your main narrative on applications.</p>
      </div>
      <div class="space-y-5 px-6 py-5">
        {% for field in form %}
        <div>
          <label class="field-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
          {% if field.name == "summary" %}
          <div id="quill-cv-summary"></div>
          <textarea name="{{ field.html_name }}" id="{{ field.id_for_label }}" class="hidden">{{ field.value|default_if_none:""|safe }}</textarea>
          {% else %}
          {{ field }}
          {% endif %}
          {% if field.help_text %}<p class="mt-1 font-meta text-xs text-ruforum-text-muted">{{ field.help_text }}</p>{% endif %}
          {% if field.errors %}<p class="mt-1 text-xs text-red-700">{{ field.errors|join:", " }}</p>{% endif %}
        </div>
        {% endfor %}
      </div>
    </div>

    {# CV sections — Alpine #}
    <div
      id="cv-sections-root"
      class="rounded-2xl border border-ruforum-border bg-white overflow-hidden"
      x-data="cvSectionsEditor()"
    >
      <div class="border-b border-ruforum-border px-6 py-3">
        <h2 class="font-display text-base font-semibold text-ruforum-text">Experience & credentials</h2>
        <p class="mt-0.5 font-meta text-xs text-ruforum-text-muted max-w-prose">
          One block per category. Expand a section to add entries; empty sections are omitted from your saved CV.
        </p>
      </div>

      <div class="divide-y divide-ruforum-border">
        {# Education #}
        <details class="group px-6 py-4" :open="sections.education.length > 0">
          <summary class="flex cursor-pointer list-none items-start justify-between gap-3 py-1 font-meta text-xs font-semibold uppercase tracking-wide text-ruforum-text-muted marker:content-none [&::-webkit-details-marker]:hidden">
            <span class="text-ruforum-text">Education</span>
            <span class="shrink-0 text-[0.65rem] font-normal normal-case tracking-normal text-ruforum-text-muted">Degrees &amp; institutions</span>
          </summary>
          <div class="mt-4 space-y-4">
            <template x-for="(row, idx) in sections.education" :key="'ed' + idx">
              <div class="space-y-3 rounded-lg bg-ruforum-surface/80 p-4">
                <div class="grid gap-3 sm:grid-cols-12 sm:items-end">
                  <div class="sm:col-span-4">
                    <label class="field-label text-[0.7rem]">Degree / qualification</label>
                    <input type="text" x-model="row.degree" class="field-input w-full" placeholder="e.g. MSc Agronomy" />
                  </div>
                  <div class="sm:col-span-5">
                    <label class="field-label text-[0.7rem]">Institution</label>
                    <input type="text" x-model="row.institution" class="field-input w-full" placeholder="University" />
                  </div>
                  <div class="sm:col-span-2">
                    <label class="field-label text-[0.7rem]">Year</label>
                    <input type="text" x-model="row.year" class="field-input w-full" placeholder="2020" />
                  </div>
                  <div class="flex sm:col-span-1 sm:justify-end sm:pb-2">
                    <button type="button" class="text-xs font-medium text-ruforum-text-muted hover:text-red-700" @click="removeEducation(idx)">Remove</button>
                  </div>
                </div>
                <div>
                  <label class="field-label text-[0.7rem]">Details — thesis, honours, relevant modules, projects</label>
                  <textarea x-model="row.details" class="field-input min-h-[6rem] w-full py-2.5" rows="5" placeholder="Go into depth: supervision, dissertation topic, key courses, awards…"></textarea>
                </div>
              </div>
            </template>
            <button type="button" class="text-sm font-medium text-ruforum-primary hover:underline" @click="addEducation()">+ Add education</button>
          </div>
        </details>

        {# Experience #}
        <details class="group px-6 py-4" :open="sections.experience.length > 0">
          <summary class="flex cursor-pointer list-none items-start justify-between gap-3 py-1 font-meta text-xs font-semibold uppercase tracking-wide text-ruforum-text-muted marker:content-none [&::-webkit-details-marker]:hidden">
            <span class="text-ruforum-text">Work experience</span>
            <span class="shrink-0 text-[0.65rem] font-normal normal-case tracking-normal text-ruforum-text-muted">Roles &amp; organisations</span>
          </summary>
          <div class="mt-4 space-y-4">
            <template x-for="(row, idx) in sections.experience" :key="'ex' + idx">
              <div class="space-y-3 rounded-lg bg-ruforum-surface/80 p-4">
                <div class="grid gap-3 sm:grid-cols-12 sm:items-end">
                  <div class="sm:col-span-4">
                    <label class="field-label text-[0.7rem]">Role</label>
                    <input type="text" x-model="row.role" class="field-input w-full" placeholder="Job title" />
                  </div>
                  <div class="sm:col-span-4">
                    <label class="field-label text-[0.7rem]">Organisation</label>
                    <input type="text" x-model="row.org" class="field-input w-full" placeholder="Employer" />
                  </div>
                  <div class="sm:col-span-3">
                    <label class="field-label text-[0.7rem]">Dates</label>
                    <input type="text" x-model="row.years" class="field-input w-full" placeholder="2019–present" />
                  </div>
                  <div class="flex sm:col-span-1 sm:justify-end sm:pb-2">
                    <button type="button" class="text-xs font-medium text-ruforum-text-muted hover:text-red-700" @click="removeExperience(idx)">Remove</button>
                  </div>
                </div>
                <div>
                  <label class="field-label text-[0.7rem]">Role in detail — scope, methods, results, impact</label>
                  <textarea x-model="row.description" class="field-input min-h-[8rem] w-full py-2.5" rows="8" placeholder="Bullet-style or paragraphs: what you owned, who you worked with, metrics, publications, funding, etc."></textarea>
                </div>
              </div>
            </template>
            <button type="button" class="text-sm font-medium text-ruforum-primary hover:underline" @click="addExperience()">+ Add role</button>
          </div>
        </details>

        {# Skills #}
        <details class="group px-6 py-4" :open="sections.skills.length > 0">
          <summary class="flex cursor-pointer list-none items-start justify-between gap-3 py-1 font-meta text-xs font-semibold uppercase tracking-wide text-ruforum-text-muted marker:content-none [&::-webkit-details-marker]:hidden">
            <span class="text-ruforum-text">Skills</span>
            <span class="shrink-0 text-[0.65rem] font-normal normal-case tracking-normal text-ruforum-text-muted">Tools &amp; competencies</span>
          </summary>
          <div class="mt-4 space-y-3">
            <template x-for="(line, idx) in sections.skills" :key="'sk' + idx">
              <div class="flex gap-2 items-start">
                <textarea x-model="sections.skills[idx]" class="field-input min-h-[4.5rem] flex-1 py-2.5" rows="3" placeholder="Skill or competency — add context (tools, years of use, certification level)"></textarea>
                <button type="button" class="shrink-0 px-2 pt-2 text-xs font-medium text-ruforum-text-muted hover:text-red-700" @click="removeSkill(idx)">Remove</button>
              </div>
            </template>
            <button type="button" class="text-sm font-medium text-ruforum-primary hover:underline" @click="addSkill()">+ Add skill</button>
          </div>
        </details>

        {# Certifications #}
        <details class="group px-6 py-4" :open="sections.certifications.length > 0">
          <summary class="flex cursor-pointer list-none items-start justify-between gap-3 py-1 font-meta text-xs font-semibold uppercase tracking-wide text-ruforum-text-muted marker:content-none [&::-webkit-details-marker]:hidden">
            <span class="text-ruforum-text">Certifications</span>
            <span class="shrink-0 text-[0.65rem] font-normal normal-case tracking-normal text-ruforum-text-muted">Professional credentials</span>
          </summary>
          <div class="mt-4 space-y-4">
            <template x-for="(row, idx) in sections.certifications" :key="'ce' + idx">
              <div class="space-y-3 rounded-lg bg-ruforum-surface/80 p-4">
                <div class="flex items-start justify-between gap-3">
                  <p class="font-meta text-[0.65rem] font-semibold uppercase tracking-wide text-ruforum-text-muted">Credential <span x-text="idx + 1"></span></p>
                  <button type="button" class="shrink-0 text-xs font-medium text-ruforum-text-muted hover:text-red-700" @click="removeCert(idx)">Remove</button>
                </div>
                <div>
                  <label class="field-label text-[0.7rem]">Title — full name as on the certificate</label>
                  <textarea x-model="row.name" class="field-input min-h-[4.5rem] w-full py-2.5" rows="3" placeholder="e.g. Professional Certificate in Data Analysis for Development (full programme title)"></textarea>
                </div>
                <div class="grid gap-3 sm:grid-cols-12 sm:items-end">
                  <div class="sm:col-span-3">
                    <label class="field-label text-[0.7rem]">Year obtained</label>
                    <input type="text" x-model="row.year" class="field-input w-full" placeholder="2022" />
                  </div>
                </div>
                <div>
                  <label class="field-label text-[0.7rem]">Details — issuing body, credential ID, expiry, competencies covered</label>
                  <textarea x-model="row.details" class="field-input min-h-[6rem] w-full py-2.5" rows="5" placeholder="Organisation, verification link, contact hours, skills demonstrated…"></textarea>
                </div>
              </div>
            </template>
            <button type="button" class="text-sm font-medium text-ruforum-primary hover:underline" @click="addCert()">+ Add certification</button>
          </div>
        </details>

        {# Publications #}
        <details class="group px-6 py-4" :open="sections.publications.length > 0">
          <summary class="flex cursor-pointer list-none items-start justify-between gap-3 py-1 font-meta text-xs font-semibold uppercase tracking-wide text-ruforum-text-muted marker:content-none [&::-webkit-details-marker]:hidden">
            <span class="text-ruforum-text">Publications</span>
            <span class="shrink-0 text-[0.65rem] font-normal normal-case tracking-normal text-ruforum-text-muted">Papers &amp; reports</span>
          </summary>
          <div class="mt-4 space-y-4">
            <template x-for="(row, idx) in sections.publications" :key="'pub' + idx">
              <div class="space-y-3 rounded-lg bg-ruforum-surface/80 p-4">
                <div class="flex items-start justify-between gap-3">
                  <p class="font-meta text-[0.65rem] font-semibold uppercase tracking-wide text-ruforum-text-muted">Publication <span x-text="idx + 1"></span></p>
                  <button type="button" class="shrink-0 text-xs font-medium text-ruforum-text-muted hover:text-red-700" @click="removePub(idx)">Remove</button>
                </div>
                <div>
                  <label class="field-label text-[0.7rem]">Full title</label>
                  <textarea x-model="row.title" class="field-input min-h-[4.5rem] w-full py-2.5" rows="3" placeholder="Article, report, or chapter title (as published)"></textarea>
                </div>
                <div>
                  <label class="field-label text-[0.7rem]">Venue — journal, proceedings, publisher, DOI</label>
                  <textarea x-model="row.venue" class="field-input min-h-[3.5rem] w-full py-2.5" rows="2" placeholder="Journal name, volume/issue, publisher, URL or DOI"></textarea>
                </div>
                <div class="grid gap-3 sm:grid-cols-12 sm:items-end">
                  <div class="sm:col-span-3">
                    <label class="field-label text-[0.7rem]">Year</label>
                    <input type="text" x-model="row.year" class="field-input w-full" placeholder="2024" />
                  </div>
                </div>
                <div>
                  <label class="field-label text-[0.7rem]">Notes — abstract, your role, citations, open access</label>
                  <textarea x-model="row.notes" class="field-input min-h-[5rem] w-full py-2.5" rows="4" placeholder="Co-authors, your contribution, impact factor, policy uptake…"></textarea>
                </div>
              </div>
            </template>
            <button type="button" class="text-sm font-medium text-ruforum-primary hover:underline" @click="addPub()">+ Add publication</button>
          </div>
        </details>

        {# Languages #}
        <details class="group px-6 py-4" :open="sections.languages.length > 0">
          <summary class="flex cursor-pointer list-none items-start justify-between gap-3 py-1 font-meta text-xs font-semibold uppercase tracking-wide text-ruforum-text-muted marker:content-none [&::-webkit-details-marker]:hidden">
            <span class="text-ruforum-text">Languages</span>
            <span class="shrink-0 text-[0.65rem] font-normal normal-case tracking-normal text-ruforum-text-muted">Proficiency optional in label</span>
          </summary>
          <div class="mt-4 space-y-3">
            <template x-for="(line, idx) in sections.languages" :key="'lg' + idx">
              <div class="flex gap-2 items-start">
                <textarea x-model="sections.languages[idx]" class="field-input min-h-[3.5rem] flex-1 py-2.5" rows="2" placeholder="Language and proficiency (e.g. French — professional working, CEFR C1)"></textarea>
                <button type="button" class="shrink-0 px-2 pt-2 text-xs font-medium text-ruforum-text-muted hover:text-red-700" @click="removeLanguage(idx)">Remove</button>
              </div>
            </template>
            <button type="button" class="text-sm font-medium text-ruforum-primary hover:underline" @click="addLanguage()">+ Add language</button>
          </div>
        </details>
      </div>
    </div>

    <div class="save-bar flex flex-wrap items-center justify-between gap-3">
      <div>
        <p class="font-display text-[15px] font-semibold leading-tight">Ready to save?</p>
        <p class="save-bar__count mt-0.5">Visible on every job application you submit</p>
      </div>
      <div class="flex shrink-0 items-center gap-2">
        <a href="{% url 'rep_career:job_board' %}" class="font-meta text-[11px] uppercase tracking-[0.10em] text-white/65 hover:text-white transition-colors">← Back to jobs</a>
        <button type="button" class="btn-secondary" @click="openTab('preview')"
                style="background: rgba(255,250,242,0.10); color: #fffaf2; border-color: rgba(255,250,242,0.18);">
          <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/></svg>
          Preview as recruiter
        </button>
        <button type="submit" class="btn-primary">
          <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
          Save profile
        </button>
      </div>
    </div>
  </form>

  </div>{# /Edit tab #}

  {# ── Preview tab ──────────────────────────────────────────────── #}
  <div x-show="tab === 'preview'" x-cloak role="tabpanel" aria-labelledby="tab-preview">
    <div class="rounded-2xl border border-ruforum-border bg-white overflow-hidden">
      <div class="flex flex-wrap items-center justify-between gap-3 border-b border-ruforum-border bg-ruforum-surface-warm px-5 py-3">
        <p class="font-meta text-[11px] uppercase tracking-[0.10em] text-ruforum-text-muted">
          Live render — same template that becomes a PDF for recruiters
        </p>
        <div class="flex items-center gap-3">
          <a href="{% url 'rep_career:cv_preview' %}" target="_blank" rel="noopener"
             class="font-meta text-[11px] uppercase tracking-[0.10em] text-ruforum-text-muted hover:text-ruforum-primary transition-colors">Open in new tab ↗</a>
          <a href="{% url 'rep_career:cv_download_pdf' %}"
             class="font-meta text-[11px] uppercase tracking-[0.10em] text-ruforum-primary hover:underline">Download PDF →</a>
        </div>
      </div>
      <iframe id="cv-preview-frame"
              data-src="{% url 'rep_career:cv_preview' %}"
              class="h-[min(80vh,55rem)] w-full border-0 bg-white"
              title="CV preview"></iframe>
      <p class="border-t border-ruforum-border bg-ruforum-surface-warm/60 px-5 py-3 font-meta text-[11px] text-ruforum-text-muted">
        Save your changes on the Edit tab to refresh this preview.
      </p>
    </div>
  </div>

  {# ── Visibility tab ───────────────────────────────────────────── #}
  <div x-show="tab === 'visibility'" x-cloak role="tabpanel" aria-labelledby="tab-visibility"
       class="grid grid-cols-1 gap-5 lg:grid-cols-3">

    <div class="lg:col-span-2 space-y-5">
      <section class="rounded-2xl border border-ruforum-border bg-white px-6 py-5">
        <p class="ed-eyebrow">When you apply for a job</p>
        <h2 class="mt-1 font-display text-xl font-semibold text-ruforum-text">Recruiters see your CV alongside your application</h2>
        <p class="mt-2 max-w-[65ch] text-sm leading-relaxed text-ruforum-text-muted">
          The headline, summary, and every section you fill in below are displayed on the
          <em>application detail page</em> the employer reviews. If you also upload a PDF or Word document,
          recruiters can preview it inline and download it. Updates you make later flow through automatically — the
          recruiter sees a banner if you've saved changes since applying.
        </p>
        <ol class="mt-5 space-y-3 border-t border-ruforum-border pt-4 text-sm text-ruforum-text">
          <li class="flex gap-3">
            <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-ruforum-primary/10 font-meta text-[11px] font-bold text-ruforum-primary tabular-nums">1</span>
            <span>You apply for a job from the <a href="{% url 'rep_career:job_board' %}" class="text-ruforum-primary hover:underline">Job board</a>.</span>
          </li>
          <li class="flex gap-3">
            <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-ruforum-primary/10 font-meta text-[11px] font-bold text-ruforum-primary tabular-nums">2</span>
            <span>The employer opens the application — your headline, summary, sections, and any uploaded CV file are shown side-by-side with your cover letter.</span>
          </li>
          <li class="flex gap-3">
            <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-ruforum-primary/10 font-meta text-[11px] font-bold text-ruforum-primary tabular-nums">3</span>
            <span>You can <a href="{% url 'rep_career:my_applications' %}" class="text-ruforum-primary hover:underline">track each application's status</a> — Applied / Shortlisted / Hired — under "My applications".</span>
          </li>
        </ol>
      </section>

      <section class="rounded-2xl border border-ruforum-border bg-white px-6 py-5">
        <p class="ed-eyebrow">Public profile (optional)</p>
        <h2 class="mt-1 font-display text-xl font-semibold text-ruforum-text">Outside of applications</h2>
        <p class="mt-2 max-w-[65ch] text-sm leading-relaxed text-ruforum-text-muted">
          When you tick <strong class="font-semibold text-ruforum-text">Is public</strong> on the Edit tab, your CV is also shown on your network profile so peers and mentors can discover your background. Untick it to keep the CV private — only employers reviewing your applications will see it.
        </p>
      </section>
    </div>

    <aside class="space-y-5">
      <section class="rounded-2xl border border-dashed border-ruforum-border bg-ruforum-surface-warm/40 px-5 py-5">
        <p class="font-meta text-[10px] uppercase tracking-[0.18em] text-ruforum-text-muted">Your applications</p>
        <p class="mt-2 text-sm leading-relaxed text-ruforum-text-muted">
          Track jobs you've applied to, see their status, and view the CV snapshot stored at submission time.
        </p>
        <a href="{% url 'rep_career:my_applications' %}" class="btn-primary mt-4 inline-flex">My applications</a>
      </section>
      <section class="rounded-2xl border border-dashed border-ruforum-border bg-ruforum-surface-warm/40 px-5 py-5">
        <p class="font-meta text-[10px] uppercase tracking-[0.18em] text-ruforum-text-muted">Export</p>
        <p class="mt-2 text-sm leading-relaxed text-ruforum-text-muted">
          Download a brand-styled PDF you can attach to applications outside RUFORUM.
        </p>
        <a href="{% url 'rep_career:cv_download_pdf' %}" class="btn-secondary mt-4 inline-flex">Download CV as PDF</a>
      </section>
    </aside>
  </div>

</div>
{% endblock %}
{% block extra_js %}
<script src="/static/js/vendor/quill.min.js"></script>
<script>
function cvSectionsEditor() {
  var el = document.getElementById('cv-sections-initial');
  var initial = {};
  if (el && el.textContent.trim()) {
    try { initial = JSON.parse(el.textContent); } catch (e) { initial = {}; }
  }
  var types = ['education', 'experience', 'skills', 'certifications', 'publications', 'languages'];
  var sections = {};
  types.forEach(function (t) {
    var v = initial[t];
    if (!Array.isArray(v)) {
      sections[t] = [];
      return;
    }
    sections[t] = JSON.parse(JSON.stringify(v));
  });
  sections.education.forEach(function (r) {
    if (r.details === undefined) r.details = '';
  });
  sections.experience.forEach(function (r) {
    if (r.description === undefined) r.description = '';
  });
  sections.certifications.forEach(function (r) {
    if (r.details === undefined) r.details = '';
  });
  sections.publications.forEach(function (r) {
    if (r.notes === undefined) r.notes = '';
  });
  return {
    sections: sections,
    addEducation: function () {
      this.sections.education.push({ degree: '', institution: '', year: '', details: '' });
    },
    removeEducation: function (i) { this.sections.education.splice(i, 1); },
    addExperience: function () {
      this.sections.experience.push({ role: '', org: '', years: '', description: '' });
    },
    removeExperience: function (i) { this.sections.experience.splice(i, 1); },
    addSkill: function () { this.sections.skills.push(''); },
    removeSkill: function (i) { this.sections.skills.splice(i, 1); },
    addCert: function () {
      this.sections.certifications.push({ name: '', year: '', details: '' });
    },
    removeCert: function (i) { this.sections.certifications.splice(i, 1); },
    addPub: function () {
      this.sections.publications.push({ title: '', venue: '', year: '', notes: '' });
    },
    removePub: function (i) { this.sections.publications.splice(i, 1); },
    addLanguage: function () { this.sections.languages.push(''); },
    removeLanguage: function (i) { this.sections.languages.splice(i, 1); },
  };
}

(function() {
  var toolbarCompact = [['bold','italic'],[{'list':'ordered'},{'list':'bullet'}],['clean']];
  var quill = new Quill('#quill-cv-summary', {
    theme: 'snow',
    placeholder: 'Full professional narrative: research themes, leadership, regions, sectors, and what you want next.',
    modules: { toolbar: toolbarCompact }
  });
  var field = document.getElementById('{{ form.summary.id_for_label }}');
  if (field && field.value) quill.root.innerHTML = field.value;
  var form = document.getElementById('rep-cv-form');
  if (form) {
    form.addEventListener('submit', function () {
      if (field) field.value = quill.root.innerHTML;
      var root = document.getElementById('cv-sections-root');
      var payload = document.getElementById('cv-sections-payload');
      if (root && payload && window.Alpine) {
        try {
          var data = Alpine.$data(root);
          if (data && data.sections) payload.value = JSON.stringify(data.sections);
        } catch (e) {}
      }
    });
  }
})();
</script>
{% endblock %}