{{ define "main" }}
<section
  id="experience"
  class="section section--border-bottom rad-animation-group flex-grow-1"
>
  <div id="main-content">
    <div class="row flex-column-reverse flex-md-row rad-fade-down">
      <div class="col-12 col-md-5 mt-5 mt-sm-0">
        {{ $baseLangSite := .Sites.Default }}
        {{ $currentPageID := .Page.File.UniqueID }}
        
        {{ $xp := (where .Site.RegularPages.ByDate.Reverse "Type" "experience") }}
        {{ $xp = $xp | lang.Merge (where $baseLangSite.RegularPages.ByDate.Reverse "Type" "experience") }}   
        {{ range $xp }} 
        <div class="experience {{ if eq .Page.File.UniqueID $currentPageID }} selected {{ end }}" >
          <a href="{{.Permalink | relURL}}">
            {{/* The context, ".", is now each one of the pages as it goes
            through the loop */}}
            {{ $img := resources.Get .Params.companyLogo }}
            {{ with $img }}
            {{ $imgWebp := $img.Resize (printf "%dx%d webp q75 Lanczos picture" $img.Width $img.Height) }}  
            <div class="experience__header  with-company-logo">
              <img
                src="{{ $imgWebp.RelPermalink }}"
                alt="{{ .Params.company }} logo"
                class="experience__company-logo"
                loading="lazy"
              >
              {{ else }}
              <div class="experience__header  no-company-logo">
              {{ end }}
              <div class="experience__meta">
                <div class="experience__date">{{ .Params.duration }}</div>
                <div class="experience__title">{{ .Params.jobTitle }}</div>
                <div class="experience__company">{{ .Params.company }}. <span class="experience__location">
                  {{ .Params.location }}</span></div>
              </div>
            </div>
          </a>
        </div>
        {{ end }}
      </div>
      <div class="col-12 col-md-7 mt-7 mt-sm-0">
        {{ if (default true .Site.Params.experience.showJobCard) }}
        <div class="job-card mb-5">
          {{ $img := resources.Get .Params.companyLogo }}
          {{ with $img }}
          <div class="with-company-logo d-flex align-items-center mb-3">
            {{ $imgWebp := $img.Resize (printf "%dx%d webp q75 Lanczos picture" $img.Width $img.Height) }}
            <img src="{{ $imgWebp.RelPermalink }}" alt="{{ $.Params.company }} logo" class="company-logo me-3" style="max-height: 50px;">
            {{ else }}
            <div class="no-company-logo d-flex align-items-center mb-3">
            {{ end }}
            <div>
              <h2 class="h4 mb-1">{{ .Params.jobTitle }}</h2>
              <div class="job-card__location text-muted">{{ .Params.company }} • {{ .Params.location }}</div>
              <div class="job-card__dates text-muted">{{ .Params.duration }}</div>
            </div>
          </div>
        </div>
        {{ end }}
        <h1>{{ .Params.title }}</h1>
        {{ .Content | safeHTML }}
      </div>
    </div>
  </div>
</section>
{{ end }}