{% extends "base.html" %}

{% block content %}
<div class="container">
    <article class="detail-page">
        <a href="/education" class="back-link">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
            Back to Education
        </a>

        <header class="detail-header">
            <h1>{{ education.meta.title }}</h1>
            <div class="detail-meta">
                <span class="detail-meta-item">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 10v6M2 10l10-5 10 5-10 5z"/><path d="M6 12v5c0 2 2 3 6 3s6-1 6-3v-5"/></svg>
                    {{ education.meta.institution }}
                </span>
                {% if education.meta.location %}
                <span class="separator"></span>
                <span class="detail-meta-item">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
                    {{ education.meta.location }}
                </span>
                {% endif %}
                <span class="separator"></span>
                <span class="detail-meta-item">
                    {{ education.meta.degree }}{% if education.meta.field %} in {{ education.meta.field }}{% endif %}
                </span>
                {% if education.meta.gpa %}
                <span class="separator"></span>
                <span class="detail-meta-item">GPA: {{ education.meta.gpa }}</span>
                {% endif %}
                <span class="separator"></span>
                <span class="detail-meta-item">
                    <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>
                    {{ education.meta.start_date|date("%B %Y") }} &ndash;
                    {% if education.meta.end_date %}{{ education.meta.end_date|date("%B %Y") }}{% else %}Present{% endif %}
                </span>
            </div>
        </header>

        <div class="content">
            {{ education.content|safe }}
        </div>
    </article>
</div>
{% endblock %}