{% extends "public/base.html" %}
{% block title %}Projects | {{ profile.name if profile }}{% endblock %}

{% block content %}
<div class="page-header">
    <div class="breadcrumb"><a href="/">Home</a> / {{ profile.projects_header or 'Projects' }}</div>
    <h1 class="page-title">{{ profile.projects_header or 'Sponsored & Consultancy Projects' }}</h1>
    <p class="page-subtitle">{{ profile.projects_subheader or 'Principal Investigator and Co-Investigator on Major
        Research Projects' }}</p>
</div>

<!-- Stats Overview -->
<section class="mb-16">
    <div class="grid md:grid-cols-3 gap-4">
        <div class="terminal-box p-6 text-center border-amber">
            <p class="text-4xl font-bold text-amber">{{ profile.projects_stat1_value or '₹17 Cr+' }}</p>
            <p class="text-white/40 text-xs mt-2">{{ profile.projects_stat1_label or 'Total Funding' }}</p>
        </div>
        <div class="terminal-box p-6 text-center border-cyan">
            <p class="text-4xl font-bold text-cyan">{{ total_count }}</p>
            <p class="text-white/40 text-xs mt-2">{{ profile.projects_stat2_label or 'Total Projects' }}</p>
        </div>
        <div class="terminal-box p-6 text-center border-pink">
            <p class="text-4xl font-bold text-pink">{{ ongoing_projects|length }}</p>
            <p class="text-white/40 text-xs mt-2">{{ profile.projects_stat3_label or 'Ongoing' }}</p>
        </div>
    </div>
</section>

<!-- Ongoing Projects -->
{% if ongoing_projects %}
<section class="mb-16">
    <div class="flex items-center gap-4 mb-8">
        <div class="h-px flex-1 bg-gradient-to-r from-transparent to-cyan/50"></div>
        <h2 class="text-xl font-bold text-white tracking-tighter uppercase">{{ profile.projects_ongoing_title or
            'Ongoing_Projects' }}</h2>
    </div>
    <div class="space-y-6">
        {% for project in ongoing_projects %}
        <div
            class="terminal-box p-6 {% if loop.index <= 3 %}border-{% if loop.index == 1 %}cyan{% elif loop.index == 2 %}pink{% else %}amber{% endif %}{% endif %}">
            <div class="flex flex-wrap justify-between items-start gap-4 mb-4">
                <div class="flex items-center gap-3">
                    <span class="text-xs text-cyan">{{ project.sponsor }}</span>
                </div>
                <div class="text-right">
                    <span class="text-amber font-bold">{{ project.amount }}</span>
                    <p class="text-white/40 text-xs">{{ project.start_date }} - {{ project.end_date }}</p>
                </div>
            </div>
            <h3 class="text-white font-bold text-lg mb-2">{{ project.title }}</h3>
            <p class="text-white/40 text-sm">
                <span class="text-cyan">{{ project.role }}:</span> {{ project.pi_name if project.pi_name else
                profile.name if profile }}
                {% if project.co_pi_names %}
                | <span class="text-pink">Co-PI:</span> {{ project.co_pi_names }}
                {% endif %}
            </p>
        </div>
        {% endfor %}
    </div>
</section>
{% endif %}

<!-- Completed Projects -->
{% if completed_projects %}
<section class="mb-16">
    <div class="flex items-center gap-4 mb-8">
        <div class="h-px flex-1 bg-gradient-to-r from-transparent to-white/30"></div>
        <h2 class="text-xl font-bold text-white tracking-tighter uppercase">{{ profile.projects_completed_title or
            'Completed_Projects' }}</h2>
    </div>
    <div class="terminal-box overflow-x-auto">
        <table class="data-table">
            <thead>
                <tr>
                    <th>Title</th>
                    <th>Sponsor</th>
                    <th>Amount</th>
                    <th>Duration</th>
                    <th>Role</th>
                </tr>
            </thead>
            <tbody>
                {% for project in completed_projects %}
                <tr>
                    <td class="text-white text-sm">{{ project.title }}</td>
                    <td class="text-cyan text-sm">{{ project.sponsor }}</td>
                    <td class="text-amber text-sm">{{ project.amount }}</td>
                    <td class="text-white/50 text-xs">{{ project.start_date }} - {{ project.end_date }}</td>
                    <td class="text-pink text-xs">{{ project.role }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</section>
{% endif %}
{% endblock %}