{{ $sectionID := replace (lower .section.name) " " "-"  }}
{{ if .section.id }}
  {{ $sectionID = .section.id }}
{{ end }}

{{ $author:= site.Data.author }}
{{ if (index site.Data site.Language.Lang).author }}
  {{ $author = (index site.Data site.Language.Lang).author }}
{{ end }}

<div class="container anchor p-lg-5 about-section" id="{{ $sectionID }}">
  <div class="row pt-sm-2 pt-md-4 align-self-center">
    <!-- summary -->
    <div class="col-sm-6">
      <h3 class="p-1">{{ $author.name }}</h3>
      {{ if .designation }}
      <h5 class="p-1">
        {{ .designation }}
        {{ if .company }}
        {{ i18n "at"}} <a href="{{ .company.url }}">{{ .company.name }}</a>
        {{ end }}
      </h5>
      {{ end }}
      <p class="p-1 text-justify">
        {{ .summary | markdownify }}
      </p>
      <div class="text-container ml-auto">
        <ul class="social-link d-flex">
          {{ range .socialLinks }}
          <li>
            {{ if eq .name "Email" }}
              <a href="mailto:{{ .url }}" target="/"><i class="{{ .icon }}"></i></a>
            {{ else if eq .name "Phone" }}
              <a href="tel:{{ .url }}" target="/"><i class="{{ .icon }}"></i></a>
            {{ else }}
              <a href="{{ .url }}" target="/"><i class="{{ .icon }}"></i></a>
            {{ end }}
          </li>
          {{ end }}
        </ul>
      </div>
      {{ if .resume }}
      <a href="{{ .resume | relURL }}" target="#"
        ><button class="btn btn-dark">{{ i18n "resume"}}</button></a
      >
      {{ end }}
    </div>
    <!-- soft skills circular-progressbar -->
    <div class="col-sm-6 pt-5 pl-md-4 pl-sm-3 pt-sm-0">
      <div class="row">
        {{ range .softSkills }}
          {{ partial "misc/soft-skills.html" . }}
        {{ end }}
      </div>
    </div>
  </div>
</div>