{% extends "base.html" %}

{% block title %}Proyek — {{ profile.full_name }}{% endblock %}

{% block content %}
{% include "partials/page_header.html" with eyebrow="Portofolio" heading="Proyek Saya" subheading="Kumpulan karya yang pernah saya bangun — dari eksperimen kecil sampai produk yang dipakai orang." %}

<section class="mx-auto max-w-7xl px-5 py-16 sm:px-8">

  {% if techs %}
    <div class="reveal mb-10 flex flex-wrap gap-2">
      <a href="{% url 'careers:project_list' %}" class="chip {% if not active_tech %}chip-active{% endif %}">Semua</a>
      {% for t in techs %}
        <a href="?tech={{ t.id }}" class="chip {% if active_tech == t.id|stringformat:'s' %}chip-active{% endif %}">
          {{ t.name }} <span class="opacity-60">{{ t.n }}</span>
        </a>
      {% endfor %}
    </div>
  {% endif %}

  {% if projects %}
    <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
      {% for p in projects %}
        <a href="{{ p.get_absolute_url }}" class="reveal card card-glow spotlight group flex flex-col overflow-hidden" data-delay="{{ forloop.counter0 }}0">
          <div class="img-zoom relative aspect-[16/10] overflow-hidden bg-ink-800">
            {% if p.thumbnail %}
              <img src="{{ p.thumbnail.url }}" alt="{{ p.title }}" class="h-full w-full object-cover" loading="lazy">
            {% else %}
              <div class="grid h-full w-full place-items-center bg-gradient-to-br from-brand-500/15 to-gold-400/5">
                <span class="font-display text-4xl font-extrabold text-ember">{{ p.title|slice:":2"|upper }}</span>
              </div>
            {% endif %}
            <div class="absolute left-3 top-3 flex gap-1.5">
              {% if p.is_featured %}
                <span class="rounded-full bg-gradient-to-r from-gold-400 to-brand-500 px-2.5 py-1 text-[0.65rem] font-bold uppercase tracking-wide text-black">Unggulan</span>
              {% endif %}
              {% if p.status == 'ongoing' %}
                <span class="rounded-full bg-black/70 px-2.5 py-1 text-[0.65rem] font-bold uppercase tracking-wide text-emerald-400 backdrop-blur">Berjalan</span>
              {% endif %}
            </div>
          </div>

          <div class="flex flex-1 flex-col p-5">
            <h3 class="font-display text-base font-bold text-neutral-50 transition group-hover:text-gold-400">{{ p.title }}</h3>
            {% if p.role %}<p class="mt-1 text-xs font-medium text-brand-400">{{ p.role }}</p>{% endif %}
            <p class="mt-2 line-clamp-3 flex-1 text-sm leading-relaxed text-neutral-500">{{ p.short_description }}</p>
            {% if p.tech_stack.all %}
              <div class="mt-4 flex flex-wrap gap-1.5">
                {% for t in p.tech_stack.all|slice:":4" %}<span class="chip">{{ t.name }}</span>{% endfor %}
                {% if p.tech_stack.all|length > 4 %}<span class="chip">+{{ p.tech_stack.all|length|add:"-4" }}</span>{% endif %}
              </div>
            {% endif %}
          </div>
        </a>
      {% endfor %}
    </div>

    {% include "partials/pagination.html" %}
  {% else %}
    <div class="card p-12 text-center">
      <p class="font-display text-5xl">📦</p>
      <p class="mt-4 font-display text-lg font-bold text-neutral-300">Belum ada proyek</p>
      <p class="mt-1.5 text-sm text-neutral-500">Proyek yang kamu tambahkan lewat panel akan muncul di sini.</p>
    </div>
  {% endif %}
</section>
{% endblock %}