{% extends "base.html" %}
{% block title %}AI Injection Pattern Library — 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);
}
.pl-hero {
  background:linear-gradient(135deg,#0a0a14 0%,#12192b 60%,#1a1a14 100%);
  border-bottom:1px solid var(--fa-border); padding:2rem 2rem 1.5rem;
}
.pl-hero h1 { font-size:1.6rem;font-weight:700;color:var(--fa-gold);margin:0 0 .25rem; }
.pl-hero p  { color:#8899aa;margin:0;font-size:.9rem; }
.pl-body    { padding:1.5rem 2rem 4rem; }

/* Filters */
.pl-filters {
  display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.5rem;align-items:center;
}
.pl-filter-chip {
  padding:.3rem .75rem;border-radius:20px;font-size:.8rem;cursor:pointer;
  border:1px solid transparent;background:rgba(255,255,255,.05);color:#aab;
  text-decoration:none;transition:all .15s;
}
.pl-filter-chip:hover,.pl-filter-chip.active {
  background:var(--fa-gold);color:#000;border-color:var(--fa-gold);
}
.pl-filter-sep { color:#333;margin:0 .25rem;align-self:center; }

/* Pattern grid */
.pl-grid {
  display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.25rem;
}
.pl-card {
  background:var(--fa-card);border:1px solid var(--fa-border);
  border-radius:14px;padding:1.5rem;text-decoration:none;color:inherit;
  transition:border-color .2s,box-shadow .2s;display:block;
}
.pl-card:hover {
  border-color:var(--fa-gold);box-shadow:0 4px 20px rgba(255,184,0,.1);
}
.pl-card-header { display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem; }
.pl-icon { font-size:1.8rem; }
.pl-card-title { font-size:1.05rem;font-weight:700;color:#e0e0e0; }
.pl-card-use-case { font-size:.85rem;color:#8899aa;margin-bottom:.85rem;line-height:1.5; }
.pl-meta { display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.75rem; }
.pl-badge {
  font-size:.72rem;font-weight:600;padding:.18rem .5rem;border-radius:4px;
  border:1px solid rgba(255,255,255,.1);
}
.pl-approach-badge { background:rgba(74,144,226,.12);color:#4A90E2; }
.pl-complexity-low    { background:rgba(0,255,136,.1);color:#00FF88; }
.pl-complexity-medium { background:rgba(255,184,0,.1);color:#FFB800; }
.pl-complexity-high   { background:rgba(255,68,68,.1);color:#FF4444; }
.pl-missions { font-size:.78rem;color:#667;margin-top:.5rem; }
.pl-missions span { color:#4A90E2; }

/* Phase color badges */
.pl-phase { font-size:.72rem;font-weight:700;padding:.2rem .55rem;border-radius:10px; }
.phase1-badge { background:rgba(0,255,136,.12);color:#00FF88;border:1px solid rgba(0,255,136,.25); }
.phase2-badge { background:rgba(255,184,0,.12);color:#FFB800;border:1px solid rgba(255,184,0,.25); }
.phase3-badge { background:rgba(255,68,68,.12);color:#FF4444;border:1px solid rgba(255,68,68,.25); }

/* Intro callout */
.pl-callout {
  background:rgba(74,144,226,.06);border:1px solid rgba(74,144,226,.2);
  border-radius:12px;padding:1.25rem;margin-bottom:1.5rem;font-size:.9rem;color:#ccd;
}
.pl-callout strong { color:var(--fa-gold); }
</style>
{% endblock %}

{% block content %}
<div class="pl-hero">
  <div style="font-size:.78rem;color:#FFB800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.25rem;">
    FORGE ACADEMY
  </div>
  <h1>AI Injection Pattern Library</h1>
  <p>8 proven patterns for adding AI to existing applications — without big-bang rewrites.</p>
</div>

<div class="pl-body">

  <div class="pl-callout">
    <strong>How to use this library:</strong> Pick the pattern that matches your goal. Each entry links to the
    AADC canvas template for designing the solution and the Academy missions that teach the implementation skills.
    Use the <a href="/ai-ml/modernize" style="color:var(--fa-blue);">Modernization Decision Tree →</a> if you're unsure which pattern fits your stack.
  </div>

  <!-- Filters -->
  <div class="pl-filters">
    <span style="font-size:.8rem;color:#8899aa;">Phase:</span>
    <a href="/academy/patterns" class="pl-filter-chip {% if not phase_filter %}active{% endif %}">All</a>
    <a href="/academy/patterns?phase=phase1" class="pl-filter-chip {% if phase_filter=='phase1' %}active{% endif %}">🟢 Phase 1 Quick Win</a>
    <a href="/academy/patterns?phase=phase2" class="pl-filter-chip {% if phase_filter=='phase2' %}active{% endif %}">🟡 Phase 2 Augmentation</a>
    <a href="/academy/patterns?phase=phase3" class="pl-filter-chip {% if phase_filter=='phase3' %}active{% endif %}">🔴 Phase 3 Transformation</a>
    <span class="pl-filter-sep">|</span>
    <span style="font-size:.8rem;color:#8899aa;">Approach:</span>
    <a href="/academy/patterns?approach=prompt" class="pl-filter-chip {% if approach_filter=='prompt' %}active{% endif %}">Prompt-Only</a>
    <a href="/academy/patterns?approach=rag" class="pl-filter-chip {% if approach_filter=='rag' %}active{% endif %}">RAG</a>
    <a href="/academy/patterns?approach=agentic" class="pl-filter-chip {% if approach_filter=='agentic' %}active{% endif %}">Agentic</a>
    <a href="/academy/patterns?approach=fine" class="pl-filter-chip {% if approach_filter=='fine' %}active{% endif %}">Fine-Tune</a>
  </div>

  <!-- Pattern grid -->
  <div class="pl-grid">
    {% for p in patterns %}
    {% set phase_cls = {'phase1':'phase1-badge','phase2':'phase2-badge','phase3':'phase3-badge'} %}
    {% set cplx_cls  = {'Low':'pl-complexity-low','Medium':'pl-complexity-medium','High':'pl-complexity-high'} %}
    <a href="/academy/patterns/{{ p.id }}" class="pl-card">
      <div class="pl-card-header">
        <span class="pl-icon">{{ p.icon }}</span>
        <div>
          <div class="pl-card-title">{{ p.title }}</div>
          <span class="pl-phase {{ phase_cls.get(p.phase_tag,'') }}">{{ p.phase }}</span>
        </div>
      </div>
      <div class="pl-card-use-case">{{ p.use_case }}</div>
      <div class="pl-meta">
        <span class="pl-badge pl-approach-badge">{{ p.approach }}</span>
        <span class="pl-badge {{ cplx_cls.get(p.complexity,'') }}">{{ p.complexity }} complexity</span>
      </div>
      <div class="pl-missions">
        Academy missions:
        {% for slug in p.missions[:2] %}
          <span>{{ slug }}</span>{% if not loop.last %}, {% endif %}
        {% endfor %}
        {% if p.missions | length > 2 %} <span>+{{ p.missions|length - 2 }} more</span>{% endif %}
      </div>
    </a>
    {% endfor %}
  </div>

  {% if not patterns %}
  <div style="text-align:center;padding:3rem;color:#555;">
    No patterns match the current filter. <a href="/academy/patterns" style="color:var(--fa-blue);">Clear filters</a>
  </div>
  {% endif %}

  <!-- Bottom CTA -->
  <div style="margin-top:2rem;display:flex;gap:1rem;flex-wrap:wrap;">
    <a href="/ai-ml/modernize" style="background:var(--fa-gold);color:#000;padding:.55rem 1.25rem;border-radius:8px;font-weight:600;text-decoration:none;font-size:.9rem;">
      Modernization Decision Tree →
    </a>
    <a href="/academy/missions" style="background:rgba(255,255,255,.08);color:#e0e0e0;padding:.55rem 1.25rem;border-radius:8px;font-weight:600;text-decoration:none;font-size:.9rem;">
      Browse Academy Missions →
    </a>
    <a href="/innovation/new" style="background:rgba(74,144,226,.15);color:#4A90E2;padding:.55rem 1.25rem;border-radius:8px;font-weight:600;text-decoration:none;font-size:.9rem;">
      Submit an Innovation Idea →
    </a>
  </div>

  <div style="text-align:center;padding:2rem;font-size:.75rem;color:#555;margin-top:2rem;">
    CUI // SP-CTI — FORGE Academy AI Injection Pattern Library
  </div>
</div>
{% endblock %}