{{- $contextType := printf "%T" . -}}
{{- $isShortcode := (eq $contextType "*hugolib.ShortcodeWithPage") -}}

{{/* ---------------------------------------------------------------------------
     TITLE AND CONTENT
     --------------------------------------------------------------------------- */}}
{{- $title := "" -}}
{{- $content := "" -}}

{{- if $isShortcode }}
  {{- $title = .Get "title" | default ( i18n "about_title" ) -}}
  {{- $content = .Get "content" | default ( i18n "about_content" ) | safeHTML -}}
{{ else }}
  {{- $title = i18n "about_title" -}}
  {{- $content = i18n "about_content" | safeHTML -}}
{{ end }}

{{/* ---------------------------------------------------------------------------
     IMAGES
     --------------------------------------------------------------------------- */}}
{{- $imgSrc := "" -}}
{{- $imgWidth := 0 -}}
{{- $imgHeight := 0 -}}
{{- $imgScale := 0.5 -}}

{{- if $isShortcode }}
  {{- $imgSrc = .Get "imgSrc" | default .Site.Data.homepage.about.image.src -}}
  {{- $imgWidth = .Get "imgWidth" | default .Site.Data.homepage.about.image.width -}}
  {{- $imgHeight = .Get "imgHeight" | default .Site.Data.homepage.about.image.height -}}
  {{- $imgScale = .Get "imgScale" | default .Site.Data.homepage.about.image.scale -}}
{{ else }}
  {{- $imgSrc = .Site.Data.homepage.about.image.src -}}
  {{- $imgWidth = .Site.Data.homepage.about.image.width -}}
  {{- $imgHeight = .Site.Data.homepage.about.image.height -}}
  {{- $imgScale = .Site.Data.homepage.about.image.scale -}}
{{ end }}

{{/* ---------------------------------------------------------------------------
     ALIGNMENT
     --------------------------------------------------------------------------- */}}
{{- $vAlign := "center" -}}
{{- $hAlign := "left" -}}

{{- if $isShortcode }}
  {{- /* Support both v_align and text_align for backwards compatibility */ -}}
  {{- $vAlign = .Get "v_align" | default (.Get "text_align") | default "center" -}}
  {{- $hAlign = .Get "h_align" | default "left" -}}
{{ else }}
  {{- /* Support both v_align and text_align for backwards compatibility */ -}}
  {{- $vAlign = .Site.Data.homepage.about.v_align | default .Site.Data.homepage.about.text_align | default "center" -}}
  {{- $hAlign = .Site.Data.homepage.about.h_align | default "left" -}}
{{ end }}

{{/* ---------------------------------------------------------------------------
     BUTTON
     --------------------------------------------------------------------------- */}}
{{- $btnURL := "" -}}
{{- $btnIcon := "" -}}
{{- $btnText := "" -}}

{{- if $isShortcode }}
  {{- $btnURL = .Get "button_url" | default .Site.Data.homepage.about.button.URL -}}
  {{- $btnIcon = .Get "button_icon" | default .Site.Data.homepage.about.button.icon -}}
  {{- $btnText = .Get "button_text" | default false -}}
{{ else }}
  {{- $btnURL = .Site.Data.homepage.about.button.URL -}}
  {{- $btnIcon = .Site.Data.homepage.about.button.icon -}}
  {{- $btnText = i18n "about_button" -}}
{{ end }}

{{/*
  sectionId: Optional argument to override the default HTML id for this section. If not provided, the default id is used. */}}
{{ $sectionId := "about" }}
{{ with .Get "sectionId" }}
  {{ $sectionId = . }}
{{ end }}

<section {{if $sectionId}} id="{{ $sectionId }}"{{end}} class="section rad-animation-group pb-0">
  <div class="rad-fade-down">
    <div class="row d-flex flex-column-reverse flex-md-row">
      <div class="about__profile-picture col-12 col-md-6">
        {{ partial "lazypicture" (dict "src" $imgSrc "width" $imgWidth "height" $imgHeight "scale" $imgScale "class" "image-left-overflow")}}
      </div>
      <div class="col-12 col-md-6{{ if eq $vAlign "center" }} my-auto{{ else if eq $vAlign "top" }} align-self-start{{ else if eq $vAlign "bottom" }} align-self-end{{ end }}{{ if eq $hAlign "center" }} text-center{{ else if eq $hAlign "right" }} text-end{{ end }}">
        <h1>{{ $title }}</h1>
        <div class="about-me content lead">
          {{ $content }}
        </div>
        {{ if $btnText }}
          <a href="{{ $btnURL | absURL }}" target="_blank" class="btn btn-primary">
            <i class="{{ $btnIcon }}"></i>
            {{ $btnText }}
          </a>
        {{ end }}
      </div>
    </div>
  </div>
</section>