<div class="container mx-auto px-4">
  <h1 class="text-4xl font-extrabold mb-8 text-base-content">Curriculum Vitae</h1>

  <!-- Jump to section -->
  <p class="mb-2 text-base-content font-medium">Click a section below to jump to it:</p>
  <nav class="flex flex-wrap gap-2 mb-6">
    <% if (theme.cv_sections && theme.cv_sections.education !== false) { %>
      <a href="#education" class="btn btn-outline btn-secondary">Education</a>
    <% } %>
    <% if (theme.cv_sections && theme.cv_sections.experience !== false) { %>
      <a href="#experience" class="btn btn-outline btn-secondary">Experience</a>
    <% } %>
    <% if (theme.cv_sections && theme.cv_sections.skills !== false) { %>
      <a href="#skills" class="btn btn-outline btn-secondary">Skills</a>
    <% } %>
    <% if (theme.cv_sections && theme.cv_sections.awards !== false) { %>
      <a href="#awards" class="btn btn-outline btn-secondary">Awards</a>
    <% } %>
    <% if (theme.cv_sections && theme.cv_sections.languages !== false) { %>
      <a href="#languages" class="btn btn-outline btn-secondary">Languages</a>
    <% } %>
    <% if (theme.cv_sections && theme.cv_sections.teaching !== false) { %>
      <a href="#teaching" class="btn btn-outline btn-secondary">Teaching</a>
    <% } %>




  </nav>

  <!-- Download CV -->
  <div class="text-right mb-8 flex justify-end items-center space-x-2">
    <% if (theme.cv && theme.cv.download_link) { %>
      <a href="<%= theme.cv.download_link %>" 
         class="btn btn-primary glass-button inline-flex items-center space-x-2 px-4 py-2"
         target="_blank" rel="noopener noreferrer" 
         title="Download PDF" 
         download>
        <i class="fa-solid fa-file-arrow-down"></i>
        <span>Download PDF</span>
      </a>
    <% } else { %>
      <button onclick="alert('Sorry, CV PDF is currently unavailable')" 
              class="btn btn-primary glass-button inline-flex items-center space-x-2 px-4 py-2" 
              title="Download PDF" 
              type="button">
        <i class="fa-solid fa-file-arrow-down"></i>
        <span>Download PDF</span>
      </button>
    <% } %>
  </div>
  

  <!-- Education -->
  <% if (theme.cv_sections && theme.cv_sections.education !== false) { %>
  <section class="mb-8" id="education">
    <h2 class="text-2xl font-bold mb-4 text-base-content">Education</h2>
    <div class="grid gap-6">
      <% site.data.cv.education.forEach(function(edu) { %>
        <div class="card glass rounded-box shadow-lg bg-base-100 text-base-content hover:shadow-xl transition-all duration-300">
          <div class="card-body">
            <h2 class="card-title text-xl font-bold flex flex-wrap gap-2 items-start">
            <%= edu.degree %>
            <% if (edu.period) { %>
              <div class="badge badge-primary badge-sm lg:badge-md whitespace-nowrap"><%= edu.period %></div>
            <% } %>
            </h2>

            <div class="text-base-content opacity-80">
              <p class="font-medium"><%= edu.institution %></p>
              <% if (edu.description) { %>
                <p class="mt-2 opacity-90"><%= edu.description %></p>
              <% } %>
            </div>
          </div>
        </div>
      <% }); %>
    </div>
  </section>
  <% } %>

  <!-- Professional Experience -->
  <% if (theme.cv_sections && theme.cv_sections.experience !== false) { %>
  <section class="mb-8" id="experience">
    <h2 class="text-2xl font-bold mb-4 text-base-content">Professional Experience</h2>
    <div class="grid gap-6">
      <% site.data.cv.experience.forEach(function(exp) { %>
        <div class="card glass rounded-box shadow-lg bg-base-100 text-base-content hover:shadow-xl transition-all duration-300">
          <div class="card-body">
            <h2 class="card-title text-xl font-bold">
              <%= exp.position %>
              <% if (exp.period) { %>
                <div class="badge badge-primary badge-sm lg:badge-md whitespace-nowrap"><%= exp.period %></div>
              <% } %>
            </h2>
            <div class="text-base-content opacity-80">
              <p class="font-medium"><%= exp.institution %></p>
              <p class="mt-2 opacity-90"><%= exp.description %></p>
              <% if (exp.responsibilities) { %>
                <ul class="list-disc list-inside mt-3 opacity-90">
                  <% exp.responsibilities.forEach(function(resp) { %>
                    <li><%= resp %></li>
                  <% }); %>
                </ul>
              <% } %>
            </div>
          </div>
        </div>
      <% }); %>
    </div>
  </section>
  <% } %>

  <!-- Skills -->
  <% if (theme.cv_sections && theme.cv_sections.skills !== false) { %>
  <section class="mb-8" id="skills">
    <h2 class="text-2xl font-bold mb-4 text-base-content">Skills</h2>
    <div class="grid gap-6">
      <% for (const [category, skills] of Object.entries(site.data.cv.skills)) { %>
        <div class="card glass rounded-box shadow-lg bg-base-100 text-base-content hover:shadow-xl transition-all duration-300">
          <div class="card-body">
            <h2 class="card-title text-xl font-bold mb-4"><%= category %></h2>
            <div class="flex flex-wrap gap-3">
              <% skills.forEach(function(skill) { %>
                <span class="badge badge-primary cursor-default">
                  <%= skill %>
                </span>
                
                
                
              <% }); %>
            </div>
          </div>
        </div>
      <% } %>
    </div>
  </section>
  <% } %>

  <!-- Awards & Honors -->
  <% if (theme.cv_sections && theme.cv_sections.awards !== false) { %>
  <section class="mb-8" id="awards">
    <h2 class="text-2xl font-bold mb-4 text-base-content">Awards & Honors</h2>
    <div class="grid gap-6">
      <% site.data.cv.awards.forEach(function(award) { %>
        <div class="card glass rounded-box shadow-lg bg-base-100 text-base-content hover:shadow-xl transition-all duration-300">
          <div class="card-body">
            <h2 class="card-title text-xl font-bold flex flex-wrap gap-2 items-start">
              <%= award.title %>
              <% if (award.date) { %>
                <div class="badge badge-primary badge-sm lg:badge-md whitespace-nowrap"><%= award.date %></div>
              <% } %>
            </h2>
            <div class="text-base-content opacity-80">
              <p class="font-medium"><%= award.issuer %></p>
              <% if (award.description) { %>
                <p class="mt-2 opacity-90"><%= award.description %></p>
              <% } %>
            </div>
          </div>
        </div>
      <% }); %>
    </div>
  </section>
  <% } %>

  <!-- Languages -->
  <% if (theme.cv_sections && theme.cv_sections.languages !== false) { %>
  <section class="mb-8" id="languages">
  <h2 class="text-2xl font-bold mb-4 text-base-content">Languages</h2>
  <div class="card glass rounded-box shadow-lg bg-base-100 text-base-content hover:shadow-xl transition-all duration-300 p-6">
    <div class="flex flex-wrap gap-3">
      <% site.data.cv.languages.forEach(function(lang) { %>
        <div class="px-4 py-4 bg-base-200 rounded-md shadow-sm text-sm flex items-center gap-2 whitespace-nowrap">
          <span class="font-semibold"><%= lang.name %></span>
          <span class="text-xs opacity-70">(<%= lang.level %>)</span>
        </div>
      <% }); %>
    </div>
  </div>
</section>
<% } %>

  <!-- Teaching -->
  <% if (theme.cv_sections && theme.cv_sections.teaching !== false && site.data.cv.teaching) { %>
  <section class="mb-8" id="teaching">
    <h2 class="text-2xl font-bold mb-4 text-base-content">Teaching Experience</h2>
    <div class="grid gap-6">
      <% site.data.cv.teaching.forEach(function(course) { %>
        <div class="card glass rounded-box shadow-lg bg-base-100 text-base-content hover:shadow-xl transition-all duration-300">
          <div class="card-body">
            <h2 class="card-title text-xl font-bold flex flex-wrap gap-2 items-start">
              <%= course.course_name %>
              <% if (course.period) { %>
                <div class="badge badge-primary badge-sm lg:badge-md whitespace-nowrap"><%= course.period %></div>
              <% } %>
            </h2>
            <div class="text-base-content opacity-80">
              <p class="font-medium"><%= course.institution %></p>
              <% if (course.role) { %>
                <p class="text-sm opacity-70"><%= course.role %></p>
              <% } %>
              <% if (course.description) { %>
                <p class="mt-2 opacity-90"><%= course.description %></p>
              <% } %>
              <% if (course.students) { %>
                <p class="text-sm mt-2 opacity-70">Students: <%= course.students %></p>
              <% } %>
              <% if (course.evaluation) { %>
                <p class="text-sm mt-1 opacity-70">Evaluation: <%= course.evaluation %></p>
              <% } %>
            </div>
          </div>
        </div>
      <% }); %>
    </div>
  </section>
  <% } %>

</div>
