{{ define "main" }}

<section class="section pb-0">
  <div class="container">
    <div class="row justify-content-between align-items-center">
      <div class="col-lg-5 text-center text-lg-start">
        {{ with .Params.banner }}
        <h1 class="mb-4">{{ .title | markdownify }}</h1>
        <p class="mb-4">{{ .subtitle | markdownify }}</p>
        {{ end }}
        <div class="d-flex flex-wrap justify-content-center justify-content-lg-start">

          {{ with .Params.banner_button }}
          <a class="btn btn-primary ms-2 me-2 me-lg-4 mt-2" href="{{.link | safeURL}}">{{.label}}</a>
          {{ end }}

          <form class="search-wrapper mt-2 mx-2 mx-lg-0" name="search-form" data-bs-toggle="modal" data-bs-target="#searchModal">
            <i class="search-icon fas fa-search"></i>
            <input class="form-control px-4 text-dark" placeholder="{{ i18n `search_placeholder`}}" readonly>
            <button type="button" class="search-button" data-search-toggler>{{ i18n "search" }}</button>
          </form>
        </div>
      </div>
      <div class="col-lg-6 d-lg-block d-none">
        {{ partial "image.html" (dict "Src" .Params.banner.image "Alt" "illustration") }}
      </div>
    </div>
  </div>
</section>

<!-- topics -->
<section class="section pb-0">
  <div class="container">
    <h2 class="section-title">{{ i18n "topics" }}</h2>
    <div class="row">
      {{ range (where site.Pages "Type" "docs") }}
      <div class="col-lg-4 col-sm-6 mb-4">
        <div class="card h-100">
          <div class="card-body py-5">
              
            <h4 class="card-title h4"><i class="{{ .Params.Icon }}"></i> {{ .Title }}</h4>
            <p class="card-text">{{ .Params.Description | markdownify }}</p>
            <a href="{{ .Permalink }}" class="stretched-link"></a>
          </div>
        </div>
      </div>
      {{ end }}
    </div>
  </div>
</section>
<!-- /topics -->

<!-- faq -->
{{ with site.GetPage "/faq" }}
<section class="section pb-0">
  <div class="container">
    <h2 class="section-title">{{ .Title }}</h2>
    <div class="row masonry-wrapper">
      {{ .Content }}
    </div>
  </div>
</section>
{{ end }}
<!-- /faq -->

<!-- call to action -->
{{ with .Params.call_to_action }}
{{ if .enable }}
<section class="section">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-lg-4 text-center d-lg-block d-none">
        {{ partial "image.html" (dict "Src" .image "Alt" "call-to-action") }}
      </div>
      <div class="col-lg-8 text-lg-start text-center">
        <h2 class="mb-3 fw-bold">{{ .title | markdownify }}</h2>
        <p>{{ .content | markdownify }}</p>
        {{ if .button.enable }}
        {{ with .button }}
        <a href="{{ .link | absLangURL }}" class="btn btn-primary">{{ .label }}</a>
        {{ end }}
        {{ end }}
      </div>
    </div>
  </div>
</section>
{{ end }}
{{ end }}
<!-- /call to action -->

{{ end }}