{{ define "main" }}

<div class="home">

  {{- $site := .Site -}}
  {{- $parents := .Params.Topics -}}
  {{- $children := (where 
                      (where .Site.Pages "Section" "topics") 
                   "Params.topics" "intersect" (slice .Name))  -}}
  {{- $mainWidth := or (and $parents "col-md-8") "col-md-12" -}}
  <div class="row">

    <div class="{{ $mainWidth }}">
      <div class="card mt-3 mb-3">
        <div class="card-header">
          <h2 class="card-text">{{i18n .Data.Singular}}: {{ .Title }}</h2>
        </div>
        <div class="card-body">
          {{ with .Content -}}
            <div class="card-text">{{ . }}</div>
          {{- end }}
          {{ with $children -}}
            <p class="card-text">
            {{- i18n "child-topics" -}}:
            {{ range . -}}
              <span class="badge rounded-pill bg-secondary m-1">
                <a href="{{ .Permalink }}">{{ .Title }}</a>
              </span>
            {{- end }}
            </p>
          {{- end }}
        </div>
      </div>
    </div>

    {{ with $parents -}}
    <div class="col-md-4">
      <div class="card mt-3">
        <div class="card-header">
          <h4 class="card-text">{{i18n "parent-topics"}}</h4>
        </div>
        <div class="card-body">
          {{ range . -}}
            {{- $page := $site.GetPage (printf "/topics/%s" .) -}}
            <span class="badge rounded-pill bg-secondary m-1">
              <a href="{{ $page.Permalink }}"
                 class="text-decoration-none">{{ $page.Title }}
              </a>
            </span>
          {{- end }}
        </div>
      </div>
    </div>
    {{- end }}

  </div>

  <div class="row">
    {{ $paginator := .Paginate (.Data.Pages) }}
    {{ range $paginator.Pages }}
      {{ partial "card.html" . }}
    {{ end }}
  </div> 
    
  <div class="row">
    {{ partial "pagination.html" . }}
  </div>

</div>
{{ end }}