{% extends "base.html" %}

{% block content %}
<div class="container">
    <article class="detail-page">
        <a href="/experience" 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 Experience
        </a>

        <header class="detail-header">
            {% if experience.meta.current or not experience.meta.end_date %}
            <span class="current-badge" style="margin-bottom: 1rem; display: inline-block;">Current Role</span>
            {% endif %}
            <h1>{{ experience.meta.position|default(experience.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"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>
                    {{ experience.meta.company }}
                </span>
                {% if experience.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>
                    {{ experience.meta.location }}
                </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>
                    {{ experience.meta.start_date|date("%B %Y") }} &ndash;
                    {% if experience.meta.current or not experience.meta.end_date %}Present{% else %}{{ experience.meta.end_date|date("%B %Y") }}{% endif %}
                </span>
            </div>
        </header>

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