{% extends "base.html" %}

{% block content %}
<div class="container">
    <header class="page-header reveal">
        <h1>Education</h1>
        <p>Academic background and qualifications</p>
    </header>

    {% if education %}
    <div class="timeline">
        {% for edu in education %}
        <article class="timeline-item reveal">
            <div class="timeline-header">
                <h2 class="timeline-title">
                    <a href="/education/{{ edu.slug }}">{{ edu.meta.title }}</a>
                </h2>
                <div class="timeline-meta">
                    <strong>{{ edu.meta.institution }}</strong>
                    {% if edu.meta.location %} &middot; {{ edu.meta.location }}{% endif %}
                </div>
                <div class="timeline-meta">
                    {{ edu.meta.degree }}{% if edu.meta.field %} in {{ edu.meta.field }}{% endif %}
                    {% if edu.meta.gpa %} &middot; GPA: {{ edu.meta.gpa }}{% endif %}
                </div>
                <div class="timeline-date">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
                    {{ edu.meta.start_date|date("%B %Y") }} &ndash;
                    {% if edu.meta.end_date %}{{ edu.meta.end_date|date("%B %Y") }}{% else %}Present{% endif %}
                </div>
            </div>
            <div class="content">
                {{ edu.content|safe }}
            </div>
        </article>
        {% endfor %}
    </div>
    {% else %}
    <div class="empty-state reveal">
        <p>No education entries yet.</p>
    </div>
    {% endif %}
</div>
{% endblock %}