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

{% block content %}
<div class="page-header">
    <div class="breadcrumb"><a href="/">Home</a> / {{ profile.research_header or 'Research & Publications' }}</div>
    <h1 class="page-title">{{ profile.research_header or 'Research & Publications' }}</h1>
    <p class="page-subtitle">{{ profile.research_subheader or (publications|length ~ '+ Peer-Reviewed Papers in
        International Journals and Conferences') }}
    </p>
</div>

<!-- Research Interests -->
<section class="mb-16">
    <div class="terminal-box p-8 border-pink">
        <div class="text-[10px] text-pink mb-6 tracking-widest">{{ profile.research_interests_title or
            'RESEARCH_INTERESTS' }}</div>
        <div class="flex flex-wrap gap-3">
            {% for area in research_areas %}
            <span class="skill-tag text-{{ area.color }}">{{ area.name }}</span>
            {% endfor %}
        </div>
    </div>
</section>

<!-- Digital Library Indexes -->
{% if profile and profile.links %}
<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.research_indexes_title or
            'Digital_Library_Indexes' }}</h2>
    </div>
    <div class="grid md:grid-cols-2 gap-6">
        {% for link in profile.links|sort(attribute='order') %}
        <a href="{{ link.url }}" target="_blank" class="terminal-box p-6 hover:border-cyan transition-all group">
            <div class="flex justify-between items-center">
                <div>
                    <h3 class="text-white font-bold text-lg group-hover:text-cyan transition-colors">{{
                        link.label }}</h3>
                    <p class="text-white/40 text-xs mt-1">{{ link.url|truncate(40) }}</p>
                </div>
                {% if link.icon %}
                <i class="{{ link.icon }} text-2xl text-white/40 group-hover:text-cyan transition-colors"></i>
                {% else %}
                <span class="text-2xl text-white/40 group-hover:text-cyan transition-colors">→</span>
                {% endif %}
            </div>
        </a>
        {% endfor %}
    </div>
</section>
{% endif %}

<!-- Publications by Year -->
<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.research_publications_title or
            'Publications' }}</h2>
    </div>

    {% for year, pubs in pubs_by_year|dictsort|reverse %}
    <div class="mb-8">
        <div class="text-cyan text-sm font-bold mb-4 sticky top-20 bg-[#050505] py-2 z-10">{{ year }}</div>
        <div class="space-y-3">
            {% for pub in pubs %}
            <div class="terminal-box p-4 group hover:border-cyan transition-colors">
                <p class="text-white text-sm mb-2 font-medium">{{ pub.title }}</p>
                <p class="text-white/60 text-xs mb-2">{{ pub.authors }}</p>
                <div class="flex flex-wrap gap-2 items-center">
                    <span class="text-xs px-2 py-0.5 rounded bg-white/5 border border-white/10 
                        {% if pub.venue_type == 'journal' %}text-amber border-amber/30
                        {% elif pub.venue_type == 'conference' %}text-cyan border-cyan/30
                        {% else %}text-pink border-pink/30{% endif %}">
                        {{ pub.venue }}
                    </span>
                    {% if pub.status != 'published' %}
                    <span class="text-[10px] uppercase text-white/40 border border-white/10 px-1.5 py-0.5 rounded">
                        {{ pub.status }}
                    </span>
                    {% endif %}

                    {% if pub.doi %}
                    <a href="{{ pub.doi }}" target="_blank"
                        class="text-[10px] uppercase font-bold text-cyan hover:text-white flex items-center gap-1 ml-auto">
                        <span>DOI</span>
                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                        </svg>
                    </a>
                    {% endif %}

                    {% if pub.url %}
                    <a href="{{ pub.url }}" target="_blank"
                        class="text-[10px] uppercase font-bold text-pink hover:text-white flex items-center gap-1 {% if not pub.doi %}ml-auto{% endif %}">
                        <span>URL</span>
                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1">
                            </path>
                        </svg>
                    </a>
                    {% endif %}
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endfor %}
</section>
{% endblock %}