{% extends "base.html" %}
{% block extra_head %}
<link rel="stylesheet" href="/static/css/projects.css">
<link rel="stylesheet" href="/static/css/post.css">
<style>
.project-detail-page {
    max-width: 720px;
    margin: 0 auto;
}
.project-detail {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}
.project-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.project-detail-title {
    font-size: 1.5rem;
    font-weight: 700;
}
.project-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
}
.project-detail-meta span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.project-detail-author {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}
.project-detail-author a {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
}
.project-detail-desc {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}
.project-detail-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}
.project-star-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}
.project-star-btn:hover {
    background: var(--bg-card-hover);
    color: var(--warning);
}
</style>
{% endblock %}
{% block content %}
<div class="project-detail-page">
    <a href="/projects" class="back-link">&larr; Back to Projects</a>

    <article class="project-detail">
        <div class="project-detail-header">
            <h1 class="project-detail-title">{{ project['title'] }}</h1>
            <div class="project-status {% if project.get('status') == 'Released' %}released{% else %}dev{% endif %}">
                &#x25CF; {{ project.get('status', 'In Development') }}
            </div>
        </div>

        <div class="project-detail-meta">
            <span class="badge badge-type">{{ project.get('project_type', 'software').replace('_', ' ') }}</span>
            {% if project.get('release_date') %}
            <span>&#x1F4C5; Released: {{ project['release_date'] }}</span>
            {% endif %}
            {% if project.get('demo_date') %}
            <span>&#x1F3AD; Demo: {{ project['demo_date'] }}</span>
            {% endif %}
        </div>

        <div class="project-detail-author">
            {% set _size = 32 %}{% set _size_class = "sm" %}{% set _user = author %}{% include "_avatar_link.html" %}
            <div>
                <a href="/profile/{{ author['username'] if author else '#' }}">{{ author['username'] if author else 'Unknown' }}</a>
                {% if author and author.get('role') %}
                <span style="font-size: 0.75rem; color: var(--text-muted);">&middot; {{ author['role'] }}</span>
                {% endif %}
            </div>
        </div>

        <div class="project-detail-desc rendered-content" data-render>{{ project.get('description', '') }}</div>

        {% if attachments %}
        {% include "_attachment_display.html" %}
        {% endif %}

        {% if platforms %}
        <div style="margin-bottom: 1.5rem;">
            <h4 style="font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 0.5rem;">Platforms</h4>
            <div class="project-card-platforms">
                {% for plat in platforms %}
                <span class="platform-tag">{{ plat.strip() }}</span>
                {% endfor %}
            </div>
        </div>
        {% endif %}

        <div class="project-detail-actions">
            <button type="button" class="project-star-btn" data-share="/projects/{{ project['slug'] or project['uid'] }}">&#x1F517; Share</button>
            {% if user %}
            <form method="POST" action="/votes/project/{{ project['uid'] }}" style="display:inline;">
                <input type="hidden" name="value" value="1">
                <button type="submit" class="project-star-btn">&#x2606; <span class="vote-count-value" data-vote-count="{{ project['uid'] }}">{{ star_count }}</span></button>
            </form>
            {% endif %}
            {% if is_owner %}
            <form method="POST" action="/projects/delete/{{ project['slug'] or project['uid'] }}" style="display:inline;">
                <button type="submit" class="project-star-btn" data-confirm="Delete this project?"><span class="icon">&#x1F5D1;&#xFE0F;</span>Delete</button>
            </form>
            {% endif %}
        </div>
    </article>

    {% with target_uid=project['uid'], target_type="project" %}
    {% include "_comment_section.html" %}
    {% endwith %}
</div>
{% endblock %}