{% extends "base.html" %}
{% block title %}Manajemen Proyek{% endblock %}
{% block breadcrumb %}Proyek{% endblock %}
{% block page_title %}Manajemen Proyek{% endblock %}
{% block topbar_actions %}
<a href="{{ url_for('projects.create') }}" class="btn btn-primary">+ Proyek Baru</a>
{% endblock %}

{% block content %}
<div class="flex gap-2 mb-4">
    {% for s, label in [('all','Semua'),('active','Aktif'),('completed','Selesai'),('suspended','Ditangguhkan'),('cancelled','Dibatalkan')] %}
    <a href="?status={{ s }}" class="btn {% if current_status == s %}btn-primary{% else %}btn-secondary{% endif %} btn-sm">{{ label }}</a>
    {% endfor %}
</div>

<div class="card">
    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>Kode Proyek</th><th>Nama Proyek</th><th>Klien/Instansi</th>
                    <th>No. Kontrak</th><th class="text-right">Nilai Kontrak</th>
                    <th>Periode</th><th>Progress</th><th>Status</th><th></th>
                </tr>
            </thead>
            <tbody>
            {% for p in projects %}
            <tr>
                <td><span class="font-mono text-accent fw-600">{{ p.project_code }}</span></td>
                <td>
                    <div class="fw-600">{{ p.project_name }}</div>
                    <div class="text-muted fs-13">{{ p.satisfaction_method == 'overtime' and 'Overtime Method' or 'Point in Time' }}</div>
                </td>
                <td class="fs-13">{{ p.client_name }}</td>
                <td class="font-mono fs-13">{{ p.contract_number or '—' }}</td>
                <td class="font-mono text-right fw-600">Rp {{ "{:,.0f}".format(p.contract_value) }}</td>
                <td class="fs-13 text-muted">
                    {{ p.start_date.strftime('%d %b %Y') }}<br>s/d {{ p.end_date.strftime('%d %b %Y') }}
                </td>
                <td style="min-width:120px">
                    <div style="display:flex;align-items:center;gap:8px">
                        <div class="progress-bar" style="flex:1">
                            <div class="progress-fill {% if p.completion_percentage > 90 %}danger{% elif p.completion_percentage > 70 %}warn{% endif %}" style="width:{{ p.completion_percentage }}%"></div>
                        </div>
                        <span class="fs-13">{{ p.completion_percentage }}%</span>
                    </div>
                    <div class="fs-13 text-muted">Rp {{ "{:,.0f}".format(p.total_cost) }} terpakai</div>
                </td>
                <td>
                    {% if p.status == 'active' %}<span class="badge badge-success">Aktif</span>
                    {% elif p.status == 'completed' %}<span class="badge badge-info">Selesai</span>
                    {% elif p.status == 'suspended' %}<span class="badge badge-warning">Ditangguhkan</span>
                    {% else %}<span class="badge badge-danger">Dibatalkan</span>{% endif %}
                </td>
                <td><a href="{{ url_for('projects.detail', id=p.id) }}" class="btn btn-secondary btn-sm">Detail →</a></td>
            </tr>
            {% else %}
            <tr><td colspan="9" style="text-align:center;padding:40px;color:var(--text-muted)">Belum ada proyek. <a href="{{ url_for('projects.create') }}" style="color:var(--accent)">Buat proyek baru</a>.</td></tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}