{% extends "base.html" %}

{#
================================================================================
Resume List Template (Kida-Native)
================================================================================

Resume/CV page with professional layout.

KIDA FEATURES USED:
- {% let %} for template-scoped variables
- Optional chaining (?.) for null-safe access
- Null coalescing (??) for smart defaults
- {% def %} for reusable section components

USAGE:
Set `type: resume` in frontmatter
================================================================================
#}

{# =============================================================================
TIMELINE ITEM COMPONENT
============================================================================= #}
{% def timeline_item(item, title_field='title', subtitle_field='company') %}
{% let item_title = item[title_field] ?? '' %}
{% let item_subtitle = item[subtitle_field] ?? '' %}
{% let item_start = item?.start_date ?? '' %}
{% let item_end = item?.end_date ?? 'Present' %}
{% let item_location = item?.location ?? '' %}
{% let item_desc = item?.description ?? '' %}
{% let item_highlights = item?.highlights ?? [] %}
{% let item_technologies = item?.technologies ?? [] %}

<div class="timeline-item">
    <div class="timeline-header">
        <div class="timeline-title-group">
            <h3 class="timeline-title">{{ item_title }}</h3>
            <p class="timeline-company">{{ item_subtitle }}</p>
        </div>
        <div class="timeline-meta">
            <span class="timeline-date">{{ item_start }} - {{ item_end }}</span>
            {% if item_location %}
            <span class="timeline-location">{{ item_location }}</span>
            {% end %}
        </div>
    </div>
    {% if item_desc %}
    <p class="timeline-description">{{ item_desc }}</p>
    {% end %}
    {% if item_highlights is iterable and item_highlights is not string and item_highlights | length > 0 %}
    <ul class="timeline-highlights">
        {% for highlight in item_highlights %}
        <li>{{ highlight }}</li>
        {% end %}
    </ul>
    {% end %}
    {% if item_technologies is iterable and item_technologies is not string and item_technologies | length > 0 %}
    <div class="timeline-technologies">
        <strong>Technologies:</strong>
        {% for tech in item_technologies %}
        <span class="tech-tag">{{ tech }}</span>
        {% end %}
    </div>
    {% end %}
</div>
{% end %}

{# =============================================================================
MAIN TEMPLATE
============================================================================= #}

{% block content %}
{# Load resume data #}
{% let site_data = site?.data ?? {} %}
{% let resume = site_data?.resume ?? params ?? {} %}
{% let resume_name = resume?.name ?? page?.title ?? 'Resume' %}
{% let resume_headline = resume?.headline ?? '' %}
{% let resume_contact = resume?.contact ?? {} %}
{% let resume_summary = resume?.summary ?? '' %}
{% let resume_experience = resume?.experience ?? [] %}
{% let resume_education = resume?.education ?? [] %}
{% let resume_skills = resume?.skills ?? [] %}
{% let resume_projects = resume?.projects ?? [] %}
{% let resume_certifications = resume?.certifications ?? [] %}
{% let resume_awards = resume?.awards ?? [] %}
{% let resume_languages = resume?.languages ?? [] %}
{% let resume_volunteer = resume?.volunteer ?? [] %}

<div class="resume">
    {# Header Section #}
    <header class="resume-header">
        <h1 class="resume-name">{{ resume_name }}</h1>
        {% if resume_headline %}
        <p class="resume-headline">{{ resume_headline }}</p>
        {% end %}

        {# Contact Information #}
        {% if resume_contact | length > 0 %}
        <div class="resume-contact">
            {% if resume_contact?.email %}
            <a href="mailto:{{ resume_contact.email }}" class="contact-item">
                <span class="contact-icon">✉</span> {{ resume_contact.email }}
            </a>
            {% end %}
            {% if resume_contact?.phone %}
            <span class="contact-item">
                <span class="contact-icon">📱</span> {{ resume_contact.phone }}
            </span>
            {% end %}
            {% if resume_contact?.location %}
            <span class="contact-item">
                <span class="contact-icon">📍</span> {{ resume_contact.location }}
            </span>
            {% end %}
            {% if resume_contact?.website %}
            {% let website_display = resume_contact.website | replace('https://', '') | replace('http://', '') %}
            <a href="{{ resume_contact.website }}" class="contact-item" target="_blank">
                <span class="contact-icon">🌐</span> {{ website_display }}
            </a>
            {% end %}
            {% if resume_contact?.linkedin %}
            <a href="{{ resume_contact.linkedin }}" class="contact-item" target="_blank">
                <span class="contact-icon">💼</span> LinkedIn
            </a>
            {% end %}
            {% if resume_contact?.github %}
            <a href="{{ resume_contact.github }}" class="contact-item" target="_blank">
                <span class="contact-icon">🔗</span> GitHub
            </a>
            {% end %}
        </div>
        {% end %}
    </header>

    {# Summary/About Section #}
    {% if resume_summary or content %}
    <section class="resume-section resume-summary">
        {% if resume_summary %}
        <p class="summary-text">{{ resume_summary }}</p>
        {% end %}
        {% if content %}
        <div class="summary-content prose">
            {{ content | safe }}
        </div>
        {% end %}
    </section>
    {% end %}

    {# Experience Section #}
    {% if resume_experience | length > 0 %}
    <section class="resume-section">
        <h2 class="section-title">Experience</h2>
        <div class="timeline">
            {% for job in resume_experience %}
            {{ timeline_item(job, title_field='title', subtitle_field='company') }}
            {% end %}
        </div>
    </section>
    {% end %}

    {# Education Section #}
    {% if resume_education | length > 0 %}
    <section class="resume-section">
        <h2 class="section-title">Education</h2>
        <div class="timeline">
            {% for edu in resume_education %}
            {% let edu_item = {
            'title': edu?.degree ?? '',
            'company': edu?.institution ?? '',
            'start_date': edu?.start_date ?? '',
            'end_date': edu?.end_date ?? 'Present',
            'location': edu?.location ?? '',
            'description': 'GPA: ' ~ edu.gpa if edu?.gpa else '',
            'highlights': edu?.honors ?? [],
            'technologies': []
            } %}
            {{ timeline_item(edu_item) }}
            {% if edu?.coursework %}
            <div class="timeline-technologies timeline-technologies--coursework">
                <strong>Relevant Coursework:</strong> {{ edu.coursework | join(', ') }}
            </div>
            {% end %}
            {% end %}
        </div>
    </section>
    {% end %}

    {# Skills Section #}
    {% if resume_skills | length > 0 %}
    <section class="resume-section">
        <h2 class="section-title">Skills</h2>
        <div class="skills-grid">
            {% for skill_group in resume_skills %}
            {% let group_category = skill_group?.category ?? 'Skills' %}
            {% let group_items = skill_group?.items ?? [] %}
            <div class="skill-group">
                <h3 class="skill-category">{{ group_category }}</h3>
                <div class="skill-tags">
                    {% for skill in group_items %}
                    <span class="skill-tag">{{ skill }}</span>
                    {% end %}
                </div>
            </div>
            {% end %}
        </div>
    </section>
    {% end %}

    {# Projects Section #}
    {% if resume_projects | length > 0 %}
    <section class="resume-section">
        <h2 class="section-title">Projects</h2>
        <div class="timeline">
            {% for project in resume_projects %}
            {% let project_name = project?.name ?? '' %}
            {% let project_url = project?.url ?? '' %}
            {% let project_role = project?.role ?? '' %}
            {% let project_date = project?.date ?? '' %}
            {% let project_desc = project?.description ?? '' %}
            {% let project_highlights = project?.highlights ?? [] %}
            {% let project_technologies = project?.technologies ?? [] %}
            {% let project_github = project?.github ?? '' %}
            {% let project_demo = project?.demo ?? '' %}
            <div class="timeline-item">
                <div class="timeline-header">
                    <div class="timeline-title-group">
                        <h3 class="timeline-title">
                            {% if project_url %}
                            <a href="{{ project_url }}" target="_blank">{{ project_name }}</a>
                            {% else %}
                            {{ project_name }}
                            {% end %}
                        </h3>
                        {% if project_role %}
                        <p class="timeline-company">{{ project_role }}</p>
                        {% end %}
                    </div>
                    {% if project_date %}
                    <div class="timeline-meta">
                        <span class="timeline-date">{{ project_date }}</span>
                    </div>
                    {% end %}
                </div>
                {% if project_desc %}
                <p class="timeline-description">{{ project_desc }}</p>
                {% end %}
                {% if project_highlights | length > 0 %}
                <ul class="timeline-highlights">
                    {% for highlight in project_highlights %}
                    <li>{{ highlight }}</li>
                    {% end %}
                </ul>
                {% end %}
                {% if project_technologies | length > 0 %}
                <div class="timeline-technologies">
                    <strong>Technologies:</strong>
                    {% for tech in project_technologies %}
                    <span class="tech-tag">{{ tech }}</span>
                    {% end %}
                </div>
                {% end %}
                {% if project_github or project_demo %}
                <div class="project-links">
                    {% if project_github %}
                    <a href="{{ project_github }}" target="_blank" class="project-link">GitHub</a>
                    {% end %}
                    {% if project_demo %}
                    <a href="{{ project_demo }}" target="_blank" class="project-link">Live Demo</a>
                    {% end %}
                </div>
                {% end %}
            </div>
            {% end %}
        </div>
    </section>
    {% end %}

    {# Certifications Section #}
    {% if resume_certifications | length > 0 %}
    <section class="resume-section">
        <h2 class="section-title">Certifications</h2>
        <div class="certifications-list">
            {% for cert in resume_certifications %}
            {% let cert_name = cert?.name ?? '' %}
            {% let cert_issuer = cert?.issuer ?? '' %}
            {% let cert_date = cert?.date ?? '' %}
            {% let cert_url = cert?.url ?? '' %}
            <div class="certification-item">
                <h3 class="certification-name">{{ cert_name }}</h3>
                <p class="certification-issuer">{{ cert_issuer }}</p>
                {% if cert_date %}
                <p class="certification-date">{{ cert_date }}</p>
                {% end %}
                {% if cert_url %}
                <a href="{{ cert_url }}" target="_blank" class="certification-link">View Credential →</a>
                {% end %}
            </div>
            {% end %}
        </div>
    </section>
    {% end %}

    {# Awards Section #}
    {% if resume_awards | length > 0 %}
    <section class="resume-section">
        <h2 class="section-title">Awards & Recognition</h2>
        <div class="awards-list">
            {% for award in resume_awards %}
            {% let award_name = award?.name ?? '' %}
            {% let award_issuer = award?.issuer ?? '' %}
            {% let award_date = award?.date ?? '' %}
            {% let award_desc = award?.description ?? '' %}
            <div class="award-item">
                <h3 class="award-name">{{ award_name }}</h3>
                <p class="award-issuer">{{ award_issuer }}</p>
                {% if award_date %}
                <p class="award-date">{{ award_date }}</p>
                {% end %}
                {% if award_desc %}
                <p class="award-description">{{ award_desc }}</p>
                {% end %}
            </div>
            {% end %}
        </div>
    </section>
    {% end %}

    {# Languages Section #}
    {% if resume_languages | length > 0 %}
    <section class="resume-section">
        <h2 class="section-title">Languages</h2>
        <div class="languages-list">
            {% for lang in resume_languages %}
            {% let lang_name = lang?.language ?? '' %}
            {% let lang_level = lang?.proficiency ?? '' %}
            <div class="language-item">
                <span class="language-name">{{ lang_name }}</span>
                <span class="language-level">{{ lang_level }}</span>
            </div>
            {% end %}
        </div>
    </section>
    {% end %}

    {# Volunteer Section #}
    {% if resume_volunteer | length > 0 %}
    <section class="resume-section">
        <h2 class="section-title">Volunteer Experience</h2>
        <div class="timeline">
            {% for vol in resume_volunteer %}
            {% let vol_item = {
            'title': vol?.role ?? '',
            'company': vol?.organization ?? '',
            'start_date': vol?.start_date ?? '',
            'end_date': vol?.end_date ?? 'Present',
            'description': vol?.description ?? ''
            } %}
            {{ timeline_item(vol_item) }}
            {% end %}
        </div>
    </section>
    {% end %}
</div>
{% end %}