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

{% block content %}

{% if projectpost.draft %}
<div class="bg-yellow-500/20 border-b border-yellow-400/40 text-yellow-300 px-6 py-3 flex items-center justify-between gap-4">
  <span class="font-semibold">&#9888; This post is a draft — only you can see it.</span>
  <div class="flex gap-3">
    <a href="{{ url_for('edit_project', slug=projectpost.slug) }}"
       class="bg-white/10 hover:bg-white/20 text-white text-sm px-4 py-1.5 rounded transition">Edit</a>
    <form action="{{ url_for('publish_project', slug=projectpost.slug) }}" method="post">
      <button type="submit"
              class="bg-orange-500 hover:bg-orange-600 text-white text-sm px-4 py-1.5 rounded transition">
        Publish Post
      </button>
    </form>
  </div>
</div>
{% endif %}

<!-- Hero Section -->
<section class="py-20 text-center text-white bg-gradient-to-br from-orange-500/20 via-rose-500/10 to-fuchsia-500/10 backdrop-blur border-b border-white/10">
  <div class="max-w-3xl mx-auto px-6">
    <h1 class="text-5xl md:text-6xl font-archivo font-extrabold mb-4">{{ projectpost.title }}</h1>
    {% if projectpost.category %}
      <p class="text-white/80 italic text-lg">{{ projectpost.category }}</p>
    {% endif %}
    {% if projectpost.tags %}
    <div class="mt-4 flex justify-center flex-wrap gap-2">
      {% for tag in projectpost.tags.split(',') %}
        {% set t = tag.strip() %}
        {% if t %}
        <a href="{{ url_for('view_tag', tag=t) }}"
           class="text-xs px-3 py-1 rounded-full border border-white/15 bg-white/5 hover:bg-white/10 transition">
          #{{ t }}
        </a>
        {% endif %}
      {% endfor %}
    </div>
    {% endif %}
  </div>
</section>

<!-- Content Section -->
<section class="py-16">
  <div class="container-page space-y-10">

    {% if projectpost.images %}
    <!-- Simple static gallery (no extra routes) -->
    <div class="card bg-[rgb(var(--card))]">
      <h3 class="text-xl font-semibold text-white mb-4">Gallery</h3>
      <div class="grid gap-6 sm:grid-cols-2">
        {% for image in projectpost.images|from_json %}
        <div class="overflow-hidden rounded-xl border border-[rgb(var(--border))] bg-[rgb(var(--card))] hover:scale-[1.02] transition-transform duration-300 shadow-glass">
          <img src="{{ url_for('static', filename='uploads/' + image) }}"
               alt="Project image {{ loop.index }}"
               class="w-full h-64 object-cover">
        </div>
        {% endfor %}
      </div>
    </div>
    {% endif %}

    <!-- Content -->
    <article class="prose prose-invert max-w-none leading-relaxed">
      {{ projectpost.content | markdown | safe }}
    </article>

    <div class="pt-2">
      <a href="{{ url_for('projects') }}" class="btn btn-ghost">← Back to Projects</a>
    </div>
  </div>
</section>

{% endblock %}