{% extends 'base.html' %}
{% load i18n %}

{% block title %}{% trans "Experience" %}{% endblock %}

{% block content %}
<section class="section fade-in">
  <div class="container">
    <h1 class="h2" data-i18n="exp_title">{% trans "Professional Experience" %}</h1>
    <p class="p" data-i18n="exp_l1">{% trans "Academic and professional experience in economics, digital transformation, and artificial intelligence." %}</p>

    {% if experiences %}
    <div class="experience-timeline">
      {% for experience in experiences %}
      <div class="experience-item">
        <div class="experience-header">
          <h3>{{ experience.position }}</h3>
          <span class="experience-type">{{ experience.get_experience_type_display }}</span>
        </div>
        <div class="experience-meta">
          <span class="institution">{{ experience.institution }}</span>
          <span class="duration">{{ experience.duration }}</span>
        </div>
        <div class="experience-description">
          <p>{{ experience.description }}</p>
        </div>
      </div>
      {% endfor %}
    </div>
    {% else %}
    <div class="no-content">
      <p>{% trans "No experience information available." %}</p>
    </div>
    {% endif %}

  </div>
</section>
{% endblock %}