{#
  CV Experience Section - work experience timeline
  Data fetched from /cv/data.json via homepage plugin
#}

{% set sectionConfig = section.config or {} %}
{% set maxItems = sectionConfig.maxItems or 10 %}
{% set showHighlights = sectionConfig.showHighlights if sectionConfig.showHighlights is defined else true %}

{% if cv and cv.experience and cv.experience.length %}
<section class="mb-8 sm:mb-12" id="experience">
  <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6">
    {{ sectionConfig.title or "Experience" }}
  </h2>

  <div class="space-y-4">
    {% for item in cv.experience | head(maxItems) %}
    {% if not filterType or item.experienceType == filterType or not item.experienceType %}
    <div class="relative pl-6 border-l-2 border-accent-300 dark:border-accent-700">
      <div class="absolute -left-[7px] top-1 w-3 h-3 rounded-full bg-accent-500"></div>
      <h3 class="font-semibold text-surface-900 dark:text-surface-100">{{ item.title }}</h3>
      <p class="text-sm text-surface-600 dark:text-surface-400">
        {{ item.company }}{% if item.location %} &middot; {{ item.location }}{% endif %}
        {% if item.type %} &middot; <span class="capitalize">{{ item.type }}</span>{% endif %}
      </p>
      {% if item.startDate %}
      <p class="text-xs text-surface-500 mt-0.5">
        {{ item.startDate }}{% if item.endDate %} – {{ item.endDate }}{% else %} – Present{% endif %}
      </p>
      {% endif %}
      {% if item.description %}
      <p class="text-sm text-surface-700 dark:text-surface-300 mt-2">{{ item.description }}</p>
      {% endif %}
      {% if showHighlights and item.highlights and item.highlights.length %}
      <div class="flex flex-wrap gap-1.5 mt-2">
        {% for h in item.highlights %}
        <span class="px-2.5 py-1 bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700 rounded-full text-xs text-surface-700 dark:text-surface-300">
          {{ h }}
        </span>
        {% endfor %}
      </div>
      {% endif %}
    </div>
    {% endif %}
    {% endfor %}
  </div>
</section>
{% endif %}