{% extends "base.html" %}
{% block title %}Your Certificate — Python 108{% endblock %}
{% block content %}
<div class="cert-preview-page">

  {% if is_complete %}
  <!-- Completed — show download -->
  <div class="cert-hero">
    <div class="cert-hero-icon">🏆</div>
    <h1 class="cert-hero-title">Congratulations, {{ user['username'] }}!</h1>
    <p class="cert-hero-sub">
      You have completed all 108 programs of the Python 108 curriculum.<br>
      Your certificate is ready to download.
    </p>
    {% if completion_date %}
    <p class="cert-hero-date">Completed on <strong>{{ completion_date }}</strong></p>
    {% endif %}
    <a href="{{ url_for('certificate', username=user['username']) }}"
       class="btn btn-primary btn-lg cert-download-btn">
      🎓 Download PDF Certificate
    </a>
    <a href="{{ url_for('dashboard') }}" class="btn btn-ghost" style="margin-top:.5rem">
      Back to Dashboard
    </a>
  </div>

  <!-- Certificate preview card -->
  <div class="cert-preview-card">
    <div class="cert-preview-inner">
      <div class="cpv-header">
        <span class="cpv-snake">🐍</span>
        <div class="cpv-titles">
          <div class="cpv-main-title">PYTHON 108</div>
          <div class="cpv-subtitle">Complete Python Programming Curriculum</div>
        </div>
      </div>
      <div class="cpv-body">
        <div class="cpv-certifies">CERTIFICATE OF COMPLETION</div>
        <div class="cpv-divider"></div>
        <div class="cpv-this-certifies">This is to certify that</div>
        <div class="cpv-name">{{ user['username'] }}</div>
        <div class="cpv-name-line"></div>
        <div class="cpv-has-completed">has successfully completed</div>
        <div class="cpv-course">Python 108 — Complete Python Programming Course</div>
        <div class="cpv-desc">comprising 108 programs, 108 exercises, 12 module quizzes</div>
        {% if completion_date %}
        <div class="cpv-date">Completed on {{ completion_date }}</div>
        {% endif %}
      </div>
      <div class="cpv-stats-bar">
        {% for val, lbl in [('108','Programs'),('108','Exercises'),('12','Modules'),('120','Questions')] %}
        <div class="cpv-stat">
          <div class="cpv-stat-val">{{ val }}</div>
          <div class="cpv-stat-lbl">{{ lbl }}</div>
        </div>
        {% endfor %}
      </div>
    </div>
    <p class="cert-preview-note">
      Preview only — download the PDF above for the full printable certificate.
    </p>
  </div>

  {% else %}
  <!-- Not complete yet -->
  <div class="cert-hero cert-hero-incomplete">
    <div class="cert-hero-icon">📚</div>
    <h1 class="cert-hero-title">Almost there!</h1>
    <p class="cert-hero-sub">
      Complete all 108 programs to unlock your certificate.<br>
      You've done <strong>{{ stats.programs_done }}</strong> of 108
      — only <strong>{{ 108 - stats.programs_done }}</strong> to go!
    </p>
    <div class="cert-progress-wrap">
      <div class="progress-bar-track" style="max-width:400px;margin:0 auto">
        <div class="progress-bar-fill"
             style="width:{{ (stats.programs_done/108*100)|round|int }}%"></div>
      </div>
      <div style="font-size:.85rem;color:var(--text-2);margin-top:.4rem">
        {{ (stats.programs_done/108*100)|round|int }}% complete
      </div>
    </div>
    <a href="{{ url_for('dashboard') }}" class="btn btn-primary btn-lg" style="margin-top:1.5rem">
      Continue learning →
    </a>
  </div>
  {% endif %}

</div>
{% endblock %}