{% extends "base.html" %}

<!-- ============================================================
     pages/project-detail.html — 项目详情页模板
     展示单个项目的完整信息、描述、链接等。

     模板变量：
       - project: Project 项目详情
       - site_name: String 网站名称
     ============================================================ -->

{% block title %}{{ project.title }} — {{ site_name }}{% endblock %}

{% block content %}
<h1 class="page-title">{{ project.title }}</h1>

{% if project.description %}
<p style="color: var(--color-text-secondary); margin-bottom: 1.5rem;">
    {{ project.description }}
</p>
{% endif %}

{% if project.tech_stack %}
<div style="display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1.5rem;">
    {% for tech in project.tech_stack | split(pat=",") %}
    <span class="tech-tag">{{ tech | trim }}</span>
    {% endfor %}
</div>
{% endif %}

<div style="display: flex; gap: 1rem; margin-bottom: 2rem;">
    {% if project.url %}
    <a href="{{ project.url }}" target="_blank" rel="noopener" class="download-btn">访问项目 &rarr;</a>
    {% endif %}
    {% if project.github_url %}
    <a href="{{ project.github_url }}" target="_blank" rel="noopener" class="download-btn"
       style="background: var(--color-text);">GitHub</a>
    {% endif %}
</div>

{% if project.content_html %}
<div class="post-content">
    {{ project.content_html | safe }}
</div>
{% endif %}

<p style="margin-top: 2rem;">
    <a href="/projects">&larr; 返回作品集</a>
</p>
{% endblock %}