{% extends "base.html" %}
{% block title %}My Certificates — FORGE Academy{% endblock %}

{% block extra_css %}
<style>
:root {
  --fa-gold:#FFB800; --fa-green:#00FF88; --fa-blue:#4A90E2;
  --fa-red:#FF4444;  --fa-card:#12192b;  --fa-border:rgba(74,144,217,0.25);
}
.mc-hero {
  background:linear-gradient(135deg,#0a0a14 0%,#12192b 60%,#1a1a14 100%);
  border-bottom:1px solid var(--fa-border);padding:2rem 2rem 1.5rem;
}
.mc-hero h1 { font-size:1.6rem;font-weight:700;color:var(--fa-gold);margin:0 0 .25rem; }
.mc-body     { max-width:900px;margin:0 auto;padding:1.5rem 2rem 4rem; }

.cert-grid   { display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.25rem; }
.cert-tile {
  background:var(--fa-card);border-radius:14px;padding:1.75rem;
  border:2px solid var(--fa-border);display:flex;flex-direction:column;gap:.5rem;
  position:relative;overflow:hidden;
}
.cert-tile.earned { border-color:var(--tc); }
.cert-tile.earned::after {
  content:'EARNED';
  position:absolute;top:12px;right:-22px;
  background:var(--tc);color:#000;font-size:.6rem;font-weight:800;letter-spacing:.08em;
  padding:.15rem 2rem;transform:rotate(45deg);
}
.cert-tile-icon  { font-size:2.5rem;text-align:center; }
.cert-tile-name  { font-size:1rem;font-weight:700;color:var(--tc,var(--fa-gold));text-align:center; }
.cert-tile-desc  { font-size:.8rem;color:#8899aa;text-align:center;flex:1; }
.cert-tile-date  { font-size:.75rem;color:#8899aa;text-align:center; }
.cert-tile-gates {
  display:flex;gap:.3rem;flex-wrap:wrap;justify-content:center;margin-top:.25rem;
}
.cert-tile-gate {
  font-size:.7rem;padding:.15rem .5rem;border-radius:10px;
  background:rgba(255,255,255,.06);color:#8899aa;
}
.cert-tile-gate.met { background:rgba(0,255,136,.1);color:var(--fa-green); }
.cert-tile-btns { display:flex;gap:.5rem;margin-top:.5rem; }
.cert-tile-btn {
  flex:1;padding:.4rem .6rem;border-radius:7px;font-size:.78rem;font-weight:600;
  text-align:center;text-decoration:none;border:none;cursor:pointer;
}
.cert-tile-btn-primary { background:var(--tc,var(--fa-gold));color:#000; }
.cert-tile-btn-secondary { background:rgba(255,255,255,.08);color:#ccd;border:1px solid var(--fa-border); }
.cert-tile-btn:disabled { opacity:.45;cursor:not-allowed; }
</style>
{% endblock %}

{% block content %}
<div class="mc-hero">
  <div style="max-width:900px;margin:0 auto;">
    <a href="/academy" style="color:var(--fa-gold);text-decoration:none;font-size:.85rem;">← FORGE Academy</a>
    <h1 style="margin-top:.5rem;">🏅 My Certificates</h1>
    <p style="color:#8899aa;font-size:.9rem;">Track your FORGE AI credentials. CUI // SP-CTI</p>
  </div>
</div>

<div class="mc-body">
  <div class="cert-grid">
    {% for ct in cert_tiers %}
    {% set earned = cert_map.get(ct.key) %}
    {% set elig = eligibility_map.get(ct.key, {}) %}
    <div class="cert-tile {% if earned %}earned{% endif %}" style="--tc:{{ ct.color }};">
      <div class="cert-tile-icon">{{ ct.icon }}</div>
      <div class="cert-tile-name">{{ ct.label }}</div>
      <div class="cert-tile-desc">{{ ct.description }}</div>

      {% if earned %}
      <div class="cert-tile-date">Earned {{ earned.issued_at[:10] if earned.issued_at else '' }}</div>
      <div class="cert-tile-btns">
        <a href="/academy/certificate/{{ ct.key }}" class="cert-tile-btn cert-tile-btn-primary">View</a>
        <a href="/academy/verify/{{ earned.token }}" target="_blank" class="cert-tile-btn cert-tile-btn-secondary">Verify</a>
      </div>
      {% else %}
      <div class="cert-tile-gates">
        {% for gate in elig.gates %}
        <span class="cert-tile-gate {% if gate.met %}met{% endif %}">
          {% if gate.met %}✓{% else %}○{% endif %} {{ gate.name }}
        </span>
        {% endfor %}
      </div>
      <div class="cert-tile-btns">
        <a href="/academy/certificate/{{ ct.key }}" class="cert-tile-btn cert-tile-btn-secondary">
          {% if elig.eligible %}Claim{% else %}View Gates{% endif %}
        </a>
      </div>
      {% endif %}
    </div>
    {% endfor %}
  </div>
</div>

{% include "includes/iqe_query_widget.html" %}
{% endblock %}