{% extends 'academy/base.html' %}
{% block title %}Portfolio – Creative Academy{% endblock %}

{% block extra_css %}
<style>
  .portfolio-hero {
    padding: 5rem 4rem 3rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .filter-bar {
    display: flex; gap: 0.5rem; margin-top: 2rem; flex-wrap: wrap;
  }
  .filter-btn {
    padding: 0.55rem 1.3rem;
    border-radius: 2px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--gray-light);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
  }
  .filter-btn:hover { border-color: var(--gold); color: var(--gold); }
  .filter-btn.active { background: var(--gold); border-color: var(--gold); color: var(--black); }

  .portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(255,255,255,0.04);
    margin: 0;
  }
  .portfolio-item {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--charcoal);
    cursor: pointer;
  }
  .portfolio-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
  }
  .portfolio-item:hover img { transform: scale(1.06); }
  .portfolio-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(10,10,10,0.92) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 1.5rem;
  }
  .portfolio-item:hover .portfolio-overlay { opacity: 1; }
  .portfolio-overlay h3 { font-size: 1rem; margin-bottom: 0.25rem; }
  .portfolio-overlay span { font-size: 0.78rem; color: var(--gold); text-transform: uppercase; letter-spacing: 0.1em; }
  .portfolio-overlay .instructor { font-size: 0.8rem; color: var(--gray-light); margin-top: 0.25rem; }

  .portfolio-placeholder {
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: var(--gray);
    gap: 0.5rem;
    background: linear-gradient(135deg, #1e1e1e, #252525);
  }
  .portfolio-placeholder .icon { font-size: 3rem; }
  .portfolio-placeholder p { font-size: 0.8rem; }

  .empty-state {
    text-align: center; padding: 5rem 2rem;
    color: var(--gray);
  }
  .empty-state .icon { font-size: 4rem; margin-bottom: 1rem; }

  @media (max-width: 768px) {
    .portfolio-hero { padding: 3rem 1.5rem 2rem; }
    .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  }
</style>
{% endblock %}

{% block content %}
<div class="portfolio-hero">
  <div class="section-label">Our Works</div>
  <h1 class="section-title">Instructor Portfolio</h1>
  <p class="section-sub">Browse the work of the creatives who'll be teaching you — real projects, real skills.</p>

  <div class="filter-bar">
    <a href="/portfolio/" class="filter-btn {% if active_category == 'all' %}active{% endif %}">All Works</a>
    <a href="/portfolio/?category=graphics" class="filter-btn {% if active_category == 'graphics' %}active{% endif %}">🎨 Graphics</a>
    <a href="/portfolio/?category=digital_art" class="filter-btn {% if active_category == 'digital_art' %}active{% endif %}">✏️ Digital Art</a>
    <a href="/portfolio/?category=photography" class="filter-btn {% if active_category == 'photography' %}active{% endif %}">📷 Photography</a>
  </div>
</div>

{% if items %}
  <div class="portfolio-grid">
    {% for item in items %}
    <div class="portfolio-item">
      <img src="{{ item.image.url }}" alt="{{ item.title }}" loading="lazy">
      <div class="portfolio-overlay">
        <span>{{ item.get_category_display }}</span>
        <h3>{{ item.title }}</h3>
        <div class="instructor">by {{ item.instructor_name }}</div>
      </div>
    </div>
    {% endfor %}
  </div>
{% else %}
  <div class="empty-state">
    <div class="icon">🖼️</div>
    <h3>Portfolio coming soon</h3>
    <p>Our instructors' works will be uploaded here shortly.</p>
    <br>
    <a href="/register/" class="btn btn-gold">Register in the meantime →</a>
  </div>
{% endif %}
{% endblock %}