<%- include('../partials/header', { title: 'Module Complete', learnerName: learnerName }) %>

<% /* completedCount works whether or not completedModules is passed from the route */ %>
<% var completedCount = (typeof completedModules !== 'undefined' && completedModules) ? completedModules.length : Math.round(progress * totalModules / 100); %>

<div class="container">
  <div class="progress-section">
    <div class="progress-info">
      <span class="progress-text">Module <%= moduleNum %> of <%= totalModules %></span>
      <span class="progress-percentage"><%= progress %>% Complete</span>
    </div>
    <div class="progress-bar">
      <div class="progress-fill" style="width: <%= progress %>%"></div>
    </div>
  </div>

  <div class="completion-card">
    <div class="completion-icon">&#10003;</div>
    <h2><%= module.title %> — Complete!</h2>
    <p class="completion-message">You have successfully completed this module.</p>

    <div class="completion-stats">
      <p>Progress: <%= completedCount %> of <%= totalModules %> modules completed</p>
    </div>

    <div class="next-steps">
      <% if (canStartExam) { %>
        <div class="exam-ready">
          <p class="highlight">&#127881; All modules complete! You're ready for the final exam.</p>
          <a href="/exam" class="btn btn-success btn-large">Take Final Exam</a>
        </div>
      <% } else if (nextModuleNum) { %>
        <a href="/modules/<%= nextModuleNum %>" class="btn btn-primary btn-large">Continue to Next Module</a>
        <p class="remaining-text">
          <strong><%= totalModules - completedCount %></strong> module<%= (totalModules - completedCount) !== 1 ? 's' : '' %> remaining before you can take the final exam.
        </p>
      <% } %>
    </div>
  </div>
</div>

<%- include('../partials/footer') %>
