{{ define "main" }}

{{ $data := index .Site.Data .Site.Language.Lang }}

<!-- hero slider -->
{{ if $data.homepage.slider.enable }}
{{ with $data.homepage.slider }}
<section class="hero-section overlay bg-cover" data-background="{{ .bg_image | absURL }}">
  <div class="container">
    <div class="hero-slider">
      <!-- slider item -->
      {{ range .slider_item }}
      <div class="hero-slider-item">
        <div class="row">
          <div class="col-md-8">
            <h1 class="text-white">{{ $data.homepage.slider.title | markdownify }}</h1>
            <p class="text-muted mb-4" data-animation-out="fadeOut{{.animation_out | title }}" data-delay-out="5" data-duration-in=".3" data-animation-in="fadeIn{{.animation_in | title }}" data-delay-in=".4">{{ .content | markdownify }}</p>
            {{ if .button.enable }}
            <a href="{{ .button.link | absLangURL }}" class="btn btn-primary" data-animation-out="fadeOut{{.animation_out | title }}" data-delay-out="5" data-duration-in=".3" data-animation-in="fadeIn{{.animation_in | title }}" data-delay-in=".7">{{ .button.label }}</a>
            {{ end }}
          </div>
        </div>
      </div>
      {{ end }}
    </div>
  </div>
</section>
{{ end }}
{{ end }}
<!-- /hero slider -->

<!-- about us -->
{{ if $data.homepage.about.enable }}
{{ with $data.homepage.about }}
<section class="section">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-md-6 order-2 order-md-1">
        <h2 class="section-title">{{ .title | markdownify }}</h2>
        <div class="content">
          {{ .content | markdownify }}
        </div>
        {{ if .button.enable }}
        {{ with .button }}
        <a href="{{ .link | absLangURL }}" class="btn btn-primary">{{ .label }}</a>
        {{ end }}
        {{ end }}
      </div>
      {{ with .image }}
      <div class="col-md-6 order-1 order-md-2 mb-4 mb-md-0">
        <img class="img-fluid w-100" src="{{ . | absURL }}" alt="about image">
      </div>
      {{ end }}
    </div>
  </div>
</section>
{{ end }}
{{ end }}
<!-- /about us -->

<!-- banner-feature -->
{{ if $data.homepage.success_banner.enable }}
{{ with $data.homepage.success_banner }}
<section class="section bg-cover" data-background="{{ .image | absURL }}" id="success">
  <div class="container-fluid">
    <div class="row no-gutters">
      <!--div class="col-xl-4 col-lg-5 align-self-end">
        <img class="img-fluid w-100" style="margin-top: -20px;" src="{{ .image | absURL }}" alt="banner-feature">
      </div-->
      <div class="col-xl-8 col-lg-7">
        <div class="row feature-blocks bg-white justify-content-between">
          {{ range .feature_item }}
          <div class="col-sm-6 col-xl-5 mb-xl-5 mb-lg-3 mb-4 text-sm-left">
            {{ if .img }}
              <img src="{{ .icon }}" class="mb-xl-4 mb-lg-3 mb-4 feature-icon"></img>
            {{ else }}
              <i class="{{ .icon }} mb-xl-4 mb-lg-3 mb-4 feature-icon"></i>
            {{ end }}
            <h3 class="mb-xl-4 mb-lg-3 mb-4">{{ .name | markdownify }}</h3>
            <div class="content">
              {{ .content | markdownify }}
            </div>
          </div>
          {{ end }}
        </div>
      </div>
    </div>
  </div>
</section>
{{ end }}
{{ end }}
<!-- /banner-feature -->

<!-- courses -->
{{ if $data.homepage.ganztagsangebote.enable }}
<section class="section-sm">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="d-flex align-items-center section-title justify-content-between">
          <h2 class="mb-0 text-nowrap mr-3">{{ $data.homepage.ganztagsangebote.title }}</h2>
          <div class="border-top w-100 border-primary d-none d-sm-block"></div>
          <div>
            <a href="{{ `ganztagsangebote` | relLangURL }}" class="btn btn-sm btn-primary-outline ml-sm-3 d-none d-sm-block">{{ i18n "see_all" }}</a>
          </div>
        </div>
      </div>
    </div>
    <!-- course list -->
    <div class="row justify-content-center">
      <!-- course item -->
      {{ range first 6 (where .Site.RegularPages "Type" "ganztagsangebote")}}
      <div class="col-lg-4 col-sm-6 mb-5">
        {{ .Render "ganztagsangebote" }}
      </div>
      {{ end }}
    </div>
    <!-- /course list -->
    <!-- mobile see all button -->
    <div class="row">
      <div class="col-12 text-center">
        <a href="{{ `ganztagsangebote` | relLangURL }}" class="btn btn-sm btn-primary-outline d-sm-none d-inline-block">{{ i18n "see_all" }}</a>
      </div>
    </div>
  </div>
</section>
{{ end }}
<!-- /courses -->

<!-- cta -->
{{ if $data.homepage.cta.enable }}
{{ with $data.homepage.cta }}
<section class="section bg-primary">
  <div class="container">
    <div class="row">
      <div class="col-12 text-center">
        <h2 class="text-white font-secondary mb-0">{{ .subtitle | markdownify }}</h2>
        <h5 class="section-title text-white">{{ .title | markdownify }}</h5>
        {{ if .button.enable }}
        {{ with .button }}
        <a href="{{ .link | absLangURL }}" class="btn btn-secondary text-uppercase">{{ .label }}</a>
        {{ end }}
        {{ end }}
      </div>
    </div>
  </div>
</section>
{{ end }}
{{ end }}
<!-- /cta -->

<!-- info -->
{{ if $data.homepage.info.enable }}
{{ partial "info.html" . }}
{{ end }}
<!-- /info -->

<!-- termine -->
{{ if $data.homepage.termine.enable }}
<section class="section bg-gray">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="d-flex align-items-center section-title justify-content-between">
          <h2 class="mb-0 text-nowrap mr-3">{{ $data.homepage.termine.title }}</h2>
          <div class="border-top w-100 border-primary d-none d-sm-block"></div>
          <div>
            <a href="{{`termine` | relLangURL }}" class="btn btn-sm btn-primary-outline ml-sm-3 d-none d-sm-block text-nowrap">{{ i18n "see_all" }}</a>
          </div>
        </div>
      </div>
    </div>
    <div class="row justify-content-center">
      <!-- event -->
      {{ with .Site.GetPage "/termine/_index.md" }}

      {{ range first 3 .Params.events }}
      <li class="d-md-table mb-4 w-100 border-bottom hover-shadow">
        <div class="d-md-table-cell text-center p-4 bg-primary text-white mb-4 mb-md-0"><span class="h2 d-block">{{ time.Format "2" .date}}</span> {{ time.Format "Jan, 2006" .date}}</div>
        <div class="d-md-table-cell px-4 vertical-align-middle mb-4 mb-md-0">
          <p href="{{ .Permalink }}" class="h4 mb-3 d-block">{{ .title }}</p>
          <p class="mb-0">{{ .summary | truncate 100 }}</p>
        </div>
        <div class="d-md-table-cell text-right pr-0 pr-md-4"><p><i class="ti-location-pin text-primary mr-2"></i>{{ .location | markdownify }}</p></div>

      </li>
      {{ end }}

      {{ end }}

    </div>
    <!-- mobile see all button -->
    <div class="row">
      <div class="col-12 text-center">
        <a href="{{`event` | relLangURL }}" class="btn btn-sm btn-primary-outline d-sm-none d-inline-block">{{ i18n "see_all" }}</a>
      </div>
    </div>
  </div>
</section>
{{ end }}
<!-- /events -->

<!-- blog -->
{{ if $data.homepage.blog.enable }}
<section class="section">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <h2 class="section-title">{{ $data.homepage.blog.title }}</h2>
      </div>
    </div>
    <div class="row justify-content-center">
      <!-- blog post -->
      {{ range first 3 (where .Site.RegularPages "Type" "post")}}
      <article class="col-lg-4 col-sm-6 mb-5 mb-lg-0">
        {{ .Render "post" }}
      </article>
      {{ end }}
    </div>
  </div>
</section>
{{ end }}
<!-- /blog -->

{{ end }}