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

{% block content %}
<div class="page-header">
    <div class="breadcrumb"><a href="/">Home</a> / {{ profile.about_header or 'About Me' }}</div>
    <h1 class="page-title">{{ profile.about_header or 'About Me' }}</h1>
    <p class="page-subtitle">{{ profile.about_subheader or 'Professor, Department of Computer Science and Engineering'
        }}</p>
</div>

<!-- Bio -->
{% if not profile or profile.show_bio %}
<section class="mb-16">
    <div class="grid md:grid-cols-3 gap-8">
        <!-- Photo Column -->
        <div class="md:col-span-1">
            <div
                class="terminal-box p-2 border-cyan h-full flex items-center justify-center bg-black/50 relative group overflow-hidden">
                {% if profile and profile.image_url %}
                <img src="{{ profile.image_url }}" alt="{{ profile.name }}"
                    class="w-full h-auto object-cover border border-white/10 grayscale group-hover:grayscale-0 transition-all duration-500">
                {% else %}
                <div
                    class="w-full aspect-[3/4] flex flex-col items-center justify-center bg-white/5 border border-white/10 border-dashed">
                    <span class="text-4xl mb-4">👨‍💻</span>
                    <span class="text-xs text-white/40 uppercase tracking-widest">No Image</span>
                </div>
                {% endif %}
                <!-- Scanline effect overlay -->
                <div
                    class="absolute inset-0 bg-gradient-to-b from-transparent via-cyan/5 to-transparent opacity-0 group-hover:opacity-100 pointer-events-none animate-scan">
                </div>
                <!-- Corner accents -->
                <div class="absolute top-0 left-0 w-2 h-2 border-t border-l border-cyan"></div>
                <div class="absolute top-0 right-0 w-2 h-2 border-t border-r border-cyan"></div>
                <div class="absolute bottom-0 left-0 w-2 h-2 border-b border-l border-cyan"></div>
                <div class="absolute bottom-0 right-0 w-2 h-2 border-b border-r border-cyan"></div>
            </div>
        </div>

        <!-- Text Column -->
        <div class="md:col-span-2">
            <div class="terminal-box p-8 border-cyan h-full">
                <div class="text-[10px] text-cyan mb-4 tracking-widest animate-pulse">{{ profile.label_bio if profile
                    and profile.label_bio }}
                </div>
                <p class="text-white text-base leading-relaxed font-light text-justify">
                    {{ profile.bio if profile and profile.bio }}
                </p>

                <div class="mt-8 flex gap-4">
                    <div class="text-xs text-white/40">
                        <span class="block text-cyan font-bold tracking-wider mb-1">{{ profile.about_location_label or
                            'LOCATION' }}</span>
                        {{ profile.institution if profile }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endif %}

<!-- Research Areas -->
{% if not profile or profile.show_research_areas %}
<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.label_research_areas if profile
            and profile.label_research_areas }}</h2>
    </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>
</section>
{% endif %}

<!-- Education -->
{% if not profile or profile.show_education %}
<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-pink/50"></div>
        <h2 class="text-xl font-bold text-white tracking-tighter uppercase">{{ profile.label_education if profile and
            profile.label_education }}</h2>
    </div>
    <div class="space-y-4">
        {% for edu in education %}
        <div class="terminal-box p-6 {% if loop.first %}border-pink{% endif %}">
            <div class="flex justify-between items-start">
                <div>
                    <h3 class="text-white font-bold">{{ edu.degree }}</h3>
                    <p class="text-white/60 text-sm">{{ edu.field }}</p>
                    <p class="text-cyan text-xs mt-1">{{ edu.institution }}</p>
                </div>
                <span class="text-amber text-xs">{{ edu.year }}</span>
            </div>
            {% if edu.description %}
            <p class="text-pink text-xs mt-2">{{ edu.description }}</p>
            {% endif %}
        </div>
        {% endfor %}
    </div>
</section>
{% endif %}

<!-- Experience -->
{% if not profile or profile.show_experience %}
<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-amber/50"></div>
        <h2 class="text-xl font-bold text-white tracking-tighter uppercase">{{ profile.label_experience if profile and
            profile.label_experience }}</h2>
    </div>
    <div class="space-y-4">
        {% for exp in experiences %}
        <div class="terminal-box p-6 {% if exp.is_current %}border-cyan{% endif %}">
            <div class="flex justify-between items-start">
                <div>
                    <h3 class="text-white font-bold">{{ exp.position }}</h3>
                    <p class="text-cyan text-sm">{{ exp.organization }}</p>
                    {% if exp.department %}
                    <p class="text-white/40 text-xs">{{ exp.department }}</p>
                    {% endif %}
                </div>
                <div class="text-right">
                    <span class="text-amber text-xs">{{ exp.start_date }} - {{ exp.end_date if exp.end_date else
                        'Present' }}</span>
                    {% if exp.is_current %}
                    <span class="block text-[10px] text-cyan mt-1">● Current</span>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</section>
{% endif %}

<!-- Awards -->
{% if not profile or profile.show_awards %}
<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.label_awards if profile and
            profile.label_awards }}</h2>
    </div>
    <div class="grid md:grid-cols-2 gap-4">
        {% for award in awards %}
        <div class="terminal-box p-6">
            <div class="flex items-start gap-3">
                <span class="text-amber text-xl">★</span>
                <div>
                    <h3 class="text-white font-bold">{{ award.title }}</h3>
                    {% if award.organization %}
                    <p class="text-white/60 text-xs">{{ award.organization }}</p>
                    {% endif %}
                    <span class="text-cyan text-xs">{{ award.year }}</span>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</section>
{% endif %}

<!-- Custom Sections -->
{% for section in custom_sections %}
<section class="mb-16">
    <div class="flex items-center gap-4 mb-4">
        <div class="h-px flex-1 bg-gradient-to-r from-transparent to-white/30"></div>
        <div class="text-right">
            <h2 class="text-xl font-bold text-white tracking-tighter uppercase">{{ section.title }}</h2>
            {% if section.subtitle %}
            <p class="text-white/60 text-xs mt-1">{{ section.subtitle }}</p>
            {% endif %}
        </div>
    </div>
    {% if section.year %}
    <div class="flex justify-end mb-4">
        <span class="text-xs font-mono text-cyan bg-cyan/10 px-2 py-1 rounded inline-block">{{ section.year }}</span>
    </div>
    {% endif %}
    {% if section.tags %}
    <div class="flex flex-wrap gap-2 mb-4 justify-end">
        {% for tag in section.tags.split(',') %}
        <span class="text-[10px] text-purple-300 bg-purple-500/10 px-2 py-1 rounded tracking-wider uppercase">{{
            tag.strip() }}</span>
        {% endfor %}
    </div>
    {% endif %}
    <div class="terminal-box p-8 border-white/20">
        <div class="prose prose-invert max-w-none text-white/80 text-sm leading-relaxed mb-6">
            {{ section.content | safe }}
        </div>

        <!-- Sub-items -->
        {% if section.items %}
        <div class="space-y-4 border-t border-white/10 pt-6">
            {% for item in section.items|sort(attribute='order') %}
            <div class="flex justify-between items-start">
                <div>
                    <h3 class="text-white font-bold text-sm">
                        {% if item.link %}
                        <a href="{{ item.link }}" target="_blank" class="hover:text-cyan transition-colors">{{
                            item.title }} ↗</a>
                        {% else %}
                        {{ item.title }}
                        {% endif %}
                    </h3>
                    {% if item.subtitle %}
                    <p class="text-white/60 text-xs">{{ item.subtitle }}</p>
                    {% endif %}
                    {% if item.content %}
                    <p class="text-white/40 text-xs mt-1">{{ item.content }}</p>
                    {% endif %}
                </div>
                {% if item.year %}
                <span class="text-cyan text-xs font-mono whitespace-nowrap ml-4">{{ item.year }}</span>
                {% endif %}
            </div>
            {% endfor %}
        </div>
        {% endif %}
    </div>
</section>
{% endfor %}

{% endblock %}