{% extends "base.html" %}
{% block title %}{{ page_title | default("Projects") }}{% endblock %}

{% block content %}
<div class="flex items-center justify-between mb-6">
    <h1 class="text-xl font-semibold text-white">{{ page_title | default("Projects") }}</h1>
    <div class="text-sm text-gray-500">{{ projects | length }} total</div>
</div>

<!-- Filters -->
<div class="flex items-center gap-3 mb-6 flex-wrap">
    <a href="/projects"
       class="px-3 py-1.5 text-xs rounded-full transition
       {% if not current_status %}bg-blue-600 text-white{% else %}bg-gray-800 text-gray-400 hover:text-white{% endif %}">
        All
    </a>
    {% for s in statuses %}
    <a href="/projects?status={{ s }}"
       class="px-3 py-1.5 text-xs rounded-full transition
       {% if current_status == s %}bg-blue-600 text-white{% else %}bg-gray-800 text-gray-400 hover:text-white{% endif %}">
        {{ s | replace('_', ' ') | title }}
    </a>
    {% endfor %}
</div>

<!-- Table -->
<div class="card rounded-lg overflow-hidden">
    <table class="w-full text-sm">
        <thead>
            <tr class="border-b border-gray-800 text-left">
                <th class="px-4 py-3 text-xs text-gray-500 font-medium uppercase tracking-wider">
                    <a href="/projects?status={{ current_status }}&sort=title&order={% if current_sort == 'title' and current_order == 'asc' %}desc{% else %}asc{% endif %}"
                       class="hover:text-gray-300">Title</a>
                </th>
                <th class="px-4 py-3 text-xs text-gray-500 font-medium uppercase tracking-wider">Status</th>
                <th class="px-4 py-3 text-xs text-gray-500 font-medium uppercase tracking-wider">
                    <a href="/projects?status={{ current_status }}&sort=bid_amount&order={% if current_sort == 'bid_amount' and current_order == 'desc' %}asc{% else %}desc{% endif %}"
                       class="hover:text-gray-300">Bid</a>
                </th>
                <th class="px-4 py-3 text-xs text-gray-500 font-medium uppercase tracking-wider">Owner</th>
                <th class="px-4 py-3 text-xs text-gray-500 font-medium uppercase tracking-wider">
                    <a href="/projects?status={{ current_status }}&sort=created_at&order={% if current_sort == 'created_at' and current_order == 'desc' %}asc{% else %}desc{% endif %}"
                       class="hover:text-gray-300">Created</a>
                </th>
                <th class="px-4 py-3 text-xs text-gray-500 font-medium uppercase tracking-wider">GitHub</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-800">
            {% for p in projects %}
            <tr class="hover:bg-gray-900/50 transition">
                <td class="px-4 py-3">
                    <div class="flex items-center gap-2">
                        {% if p.ref_number %}
                        <span class="text-xs font-mono text-blue-400 bg-blue-400/10 px-1.5 py-0.5 rounded">BS-{{ '%03d' % p.ref_number }}</span>
                        {% endif %}
                        <a href="/projects/{{ p.id }}" class="text-blue-400 hover:text-blue-300">
                            {{ p.title[:60] }}{% if p.title | length > 60 %}...{% endif %}
                        </a>
                    </div>
                    <div class="text-xs text-gray-600 mt-0.5">FL#{{ p.freelancer_project_id }}</div>
                </td>
                <td class="px-4 py-3">
                    <span class="badge badge-{{ p.bid_status.value | status_color }}">
                        {{ p.bid_status.value | replace('_', ' ') | title }}
                    </span>
                </td>
                <td class="px-4 py-3 text-gray-400">
                    {% if p.bid_amount %}{{ p.bid_amount | currency }}{% else %}&mdash;{% endif %}
                </td>
                <td class="px-4 py-3 text-gray-400">{{ p.owner_username or '—' }}</td>
                <td class="px-4 py-3 text-gray-500 text-xs">{{ p.created_at | timeago }}</td>
                <td class="px-4 py-3">
                    {% if p.github_repo_url %}
                    <a href="{{ p.github_repo_url }}" target="_blank" class="text-gray-500 hover:text-gray-300 text-xs">repo &rarr;</a>
                    {% else %}
                    <span class="text-gray-700">&mdash;</span>
                    {% endif %}
                </td>
            </tr>
            {% else %}
            <tr>
                <td colspan="6" class="px-4 py-8 text-center text-gray-600">No projects found</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}