{{ $ := .root }}
{{ $page := .page }}
{{ $columns := $page.Params.design.columns | default "2" }}

<!-- Experience widget -->
<div class="col-12 {{if eq $columns "2"}}col-lg-8{{end}}">
  {{ with $page.Content }}{{ . }}{{ end }}

  {{ if $page.Params.experience }}
  {{ $exp_len := len $page.Params.experience }}

  {{/* Default to user's custom order (as requested in #1761) as Hugo doesn't support multiple sorts on params. */}}
  {{ range $idx, $key := $page.Params.experience }}
  <div class="row experience">
    <!-- Timeline -->
    <div class="col-auto text-center flex-column d-none d-sm-flex">
      <div class="row h-50">
        <div class="col {{if gt $idx 0}}border-right{{end}}">&nbsp;</div>
        <div class="col">&nbsp;</div>
      </div>
      <div class="m-2">
        <span class="badge badge-pill border {{if not .date_end}}exp-fill{{end}}">&nbsp;</span>
      </div>
      <div class="row h-50">
        <div class="col {{if lt $idx (sub $exp_len 1)}}border-right{{end}}">&nbsp;</div>
        <div class="col">&nbsp;</div>
      </div>
    </div>
    <!-- Content -->
    <div class="col py-2">
      <div class="card">
        <div class="card-body">

          {{- if .company_logo}}
          {{- $svg_icon := resources.Get (printf "media/icons/brands/%s.svg" .company_logo) -}}
          {{ if not $svg_icon }}{{ errorf "Brand logo not found at `assets/media/icons/brands/%s.svg`" .company_logo }}{{end}}
          <div class="d-flex align-content-start">
            <div class="mr-2 mb-2">
              {{- with .company_url}}<a href="{{.}}" target="_blank" rel="noopener">{{end -}}
              <img src="{{ $svg_icon.RelPermalink }}" width="56px" height="56px" alt="{{.company | plainify}}" loading="lazy">
              {{- with .company_url}}</a>{{end -}}
            </div>
            <div>
          {{ end }}

              <div class="section-subheading card-title exp-title text-muted my-0">{{.title | markdownify | emojify}}</div>
              <div class="section-subheading card-title exp-company text-muted my-0">
                {{- with .company_url}}<a href="{{.}}" target="_blank" rel="noopener">{{end}}{{.company | markdownify | emojify}}{{with .company_url}}</a>{{end -}}
              </div>
              <div class="text-muted exp-meta">
                {{ (time .date_start) | time.Format ($page.Params.date_format | default "January 2006") }} –
                {{ if .date_end}}
                  {{ (time .date_end) | time.Format ($page.Params.date_format | default "January 2006") }}
                {{else}}
                  {{ i18n "present" | default "Present" }}
                {{end}}
                {{with .location}}
                  <span class="middot-divider"></span>
                  <span>{{.}}</span>
                {{end}}
              </div>

          {{- if .company_logo}}
            </div>
          </div>
          {{end}}

          {{with .description}}<div class="card-text">{{. | markdownify | emojify}}</div>{{end}}
        </div>
      </div>
    </div>
  </div>
  {{end}}
  {{end}}
</div>