{% extends "base.html" %}
{% load static %}

{% block title %}{{ project.title }} | Pipeline Detail{% endblock %}

{% block content %}
<div class="hero-section py-5">
    <div class="container">
        <nav aria-label="breadcrumb" class="mb-4">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{% url 'home' %}" class="text-cyan text-decoration-none">Command Center</a></li>
                <li class="breadcrumb-item active text-muted" aria-current="page">{{ project.title }}</li>
            </ol>
        </nav>
        
        <div class="row align-items-center">
            <div class="col-lg-8">
                <span class="pipeline-badge badge-{{ project.status|lower }} mb-3 d-inline-block">{{ project.get_status_display }}</span>
                <h1 class="display-4 outfit mb-3">{{ project.title }}</h1>
                <p class="lead text-muted">{{ project.description }}</p>
            </div>
            <div class="col-lg-4 text-lg-end">
                <div class="stats-card bg-opacity-10 border-opacity-10">
                    <span class="text-muted small text-uppercase d-block mb-1">Global Delivery</span>
                    <span class="display-6 outfit fw-bold text-cyan">
                        {% with last_step=project.steps.last %}{{ last_step.progress|default:0 }}{% endwith %}%
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

<section class="py-5">
    <div class="container">
        <div class="row g-5">
            <div class="col-lg-8">
                <h3 class="h4 outfit mb-4 section-title">CGI Production Pipeline</h3>
                
                <div class="pipeline-flow">
                    {% for step in steps %}
                    <div class="project-card p-4 mb-3 border-opacity-10">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <div class="d-flex align-items-center">
                                <div class="bg-cyan bg-opacity-10 text-cyan rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 32px; height: 32px; font-size: 0.8rem; font-weight: bold;">
                                    {{ forloop.counter }}
                                </div>
                                <h4 class="h6 mb-0 outfit">{{ step.get_name_display }}</h4>
                            </div>
                            {% if step.is_completed %}
                            <span class="badge bg-cyan text-black rounded-pill">COMPLETO</span>
                            {% else %}
                            <span class="text-muted small">{{ step.progress }}%</span>
                            {% endif %}
                        </div>
                        
                        <div class="progress" style="height: 4px;">
                            <div class="progress-bar {% if step.is_completed %}bg-cyan{% endif %}" style="width: {{ step.progress }}%"></div>
                        </div>
                    </div>
                    {% empty %}
                    <div class="text-center py-5 border border-dashed border-secondary border-opacity-25 rounded-4">
                        <p class="text-muted">Pipeline não inicializado. Configure as etapas no Admin.</p>
                        <a href="/admin/core/pipelinestep/add/?project={{ project.id }}" class="btn btn-sm btn-outline-cyan">Adicionar Etapa +</a>
                    </div>
                    {% endfor %}
                </div>
            </div>
            
            <div class="col-lg-4">
                <div class="sticky-top" style="top: 100px;">
                    <h3 class="h4 outfit mb-4 section-title">Assets Digitais</h3>
                    <div class="assets-container">
                        {% for asset in assets %}
                        <div class="asset-list-item d-flex justify-content-between align-items-center">
                            <div>
                                <span class="d-block outfit fw-bold small">{{ asset.name }}</span>
                                <span class="text-muted" style="font-size: 0.7rem;">{{ asset.get_asset_type_display }} • {{ asset.current_stage }}</span>
                            </div>
                            {% if asset.is_realistic %}
                            <span class="badge bg-purple bg-opacity-10 text-purple border border-purple border-opacity-25" style="font-size: 0.6rem;">REALISTA</span>
                            {% endif %}
                        </div>
                        {% empty %}
                        <p class="text-muted small">Nenhum asset (personagens/cenários) vinculado.</p>
                        {% endfor %}
                    </div>
                    
                    <div class="mt-5 p-4 bg-purple bg-opacity-05 rounded-4 border border-purple border-opacity-10">
                        <h5 class="h6 outfit text-purple mb-3">Diretrizes de Qualidade</h5>
                        <ul class="list-unstyled small text-muted">
                            <li class="mb-2">✓ Topologia limpa para rigging</li>
                            <li class="mb-2">✓ Texturas 4K/8K PBR</li>
                            <li class="mb-2">✓ Iluminação física (PBR)</li>
                            <li>✓ Renderização em EXR Multi-camada</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}