<%- include('partials/header', { title: 'Exam Results', learnerName: learnerName }) %>

<div class="container">
  <div class="result-card">
    <% if (passed) { %>
      <div class="result-header passed">
        <div class="result-icon">✓</div>
        <h1>Certification Achieved!</h1>
        <p class="result-subtitle">Congratulations on passing the PCA Certification Exam</p>
      </div>

      <div class="result-details">
        <section class="section-scores">
          <h3>Your Section Scores</h3>
          <div class="scores-table">
            <% Object.entries(sectionScores).forEach(([id, section]) => { %>
              <div class="score-row passed">
                <div class="score-info">
                  <span class="score-title"><%= section.title %></span>
                  <span class="score-detail"><%= section.correct %>/<%= section.total %> correct</span>
                </div>
                <div class="score-badge"><%= section.score %>%</div>
              </div>
            <% }); %>
          </div>
        </section>

        <section class="certificate-section">
          <h3>Your Certificate</h3>
          <p>Your official PCA Certification certificate is ready for download.</p>
          <% if (certificateUrl) { %>
            <a href="<%= certificateUrl %>" class="btn btn-success btn-large" download>Download Certificate</a>
            <p class="print-note">You can also print your certificate from the PDF.</p>
          <% } %>
        </section>

        <section class="next-steps">
          <h3>Next Steps</h3>
          <p>Your certification demonstrates your commitment to providing quality care. Keep this certificate for your records and share it with your employer as needed.</p>
          <a href="/" class="btn btn-primary">Return to Home</a>
        </section>
      </div>

    <% } else { %>
      <div class="result-header failed">
        <div class="result-icon">!</div>
        <h1>Exam Not Passed</h1>
        <p class="result-subtitle">Please review the areas below and try again</p>
      </div>

      <div class="result-details">
        <section class="section-scores">
          <h3>Your Section Scores</h3>
          <div class="scores-table">
            <% Object.entries(sectionScores).forEach(([id, section]) => { %>
              <div class="score-row <%= section.passed ? 'passed' : 'failed' %>">
                <div class="score-info">
                  <span class="score-title"><%= section.title %></span>
                  <span class="score-detail"><%= section.correct %>/<%= section.total %> correct</span>
                </div>
                <div class="score-badge <%= section.passed ? '' : 'needs-improvement' %>">
                  <%= section.score %>%
                </div>
              </div>
            <% }); %>
          </div>
        </section>

        <section class="failed-sections">
          <h3>Areas to Review</h3>
          <p>You must score 70% or higher in all sections to pass. Focus on these sections:</p>
          <ul class="review-list">
            <% Object.entries(sectionScores).forEach(([id, section]) => { %>
              <% if (!section.passed) { %>
                <li><%= section.title %> - <%= section.score %>%</li>
              <% } %>
            <% }); %>
          </ul>
        </section>

        <section class="retake-section">
          <h3>Ready to Try Again?</h3>
          <p>Review the material for the sections you need to improve and retake the exam.</p>
          <a href="/exam" class="btn btn-primary btn-large">Retake Exam</a>
        </section>
      </div>
    <% } %>
  </div>
</div>

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