{% extends "base.html" %}
{% block title %}Projects{% endblock %}

{% block content %}

<!-- Hero -->
<section class="text-center py-20 bg-gradient-to-br from-orange-500/20 via-rose-500/10 to-fuchsia-500/10 text-white shadow-inner">
  <h1 class="heading-hero mb-4">My Projects</h1>
  <p class="text-lg opacity-90">A snapshot of things I’ve built or contributed to.</p>
</section>

<!-- Projects Grid -->
<section id="projects" class="py-16">
  <div class="container-page">
    {% if projectpost|length == 0 %}
      <div class="card text-center">
        <h2 class="text-2xl font-semibold mb-2">Nothing here yet</h2>
        <p class="subtle">Projects will appear as you publish them.</p>
      </div>
    {% else %}
      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
        {% for p in projectpost %}
        <article class="card group overflow-hidden transition hover:shadow-glass">
          {% if p.cover_image %}
            <a href="{{ url_for('view_project', slug=p.slug) }}" class="block -m-6 mb-4 overflow-hidden rounded-2xl">
              <img src="{{ p.cover_image }}" alt="{{ p.title }}" class="w-full h-40 object-cover group-hover:scale-[1.02] transition" loading="lazy">
            </a>
          {% endif %}

          <h2 class="text-xl font-semibold">
            <a href="{{ url_for('view_project', slug=p.slug) }}" class="hover:underline">
              {{ p.title }}
            </a>
          </h2>

          {% if p.category %}
            <span class="mt-2 inline-flex items-center gap-2 text-xs font-medium px-3 py-1 rounded-full
                         border border-[rgb(var(--border))] bg-[rgb(var(--card))] text-[rgb(var(--muted))]">
              {{ p.category }}
            </span>
          {% endif %}

          {% if p.summary %}
            <p class="mt-3 subtle line-clamp-3">{{ p.summary }}</p>
          {% endif %}

          {% set tags = (p.tags|default('', true)).split(',') if p.tags else [] %}
          {% if tags %}
            <div class="mt-4 flex flex-wrap gap-2">
              {% for tag in tags %}
                {% set t = tag.strip() %}
                {% if t %}
                  <a href="{{ url_for('view_project_tag', tag=t) }}"
                     class="text-xs px-3 py-1 rounded-full border border-[rgb(var(--border))]
                            bg-[rgb(var(--card))] hover:bg-[rgb(var(--border))] transition">
                    #{{ t }}
                  </a>
                {% endif %}
              {% endfor %}
            </div>
          {% endif %}

          <div class="mt-6">
            <a href="{{ url_for('view_project', slug=p.slug) }}" class="btn btn-primary">View Project</a>
          </div>
        </article>
        {% endfor %}
      </div>
    {% endif %}
  </div>
</section>

{% endblock %}