{{ define "main" }}
{{- $subtitle     := .Site.Params.home.subtitle | markdownify }}
{{- $about        := .Site.Params.home.about }}
{{- $logo         := "img/logos/main-logo.png" | relURL }}
{{- $features     := .Site.Params.home.features }}
{{- $about        := .Site.Params.home.about | markdownify }}
{{- $diagram      := "img/architecture.png" | relURL }}
{{- $adopterLogos := .Site.Data.adopters }}
<section class="hero has-text-centered is-dark has-shadow">
  <div class="hero-body">
    <div class="container">
      <img src="{{ $logo }}" class="title is-home-logo" alt="containerd hero logo">

      <br />

      <p class="subtitle is-size-3 is-size-4-mobile has-text-weight-light">
        {{ $subtitle }}
      </p>

      <br />

      <div class="buttons is-centered">
        <a class="button is-medium is-radiusless is-borderless has-text-weight-bold" href="/docs/getting-started">
          <span class="icon">
            <i class="fas fa-sm fa-step-forward"></i>
          </span>
          <span>
            Getting started
          </span>
        </a>

        <a class="button is-dark is-outlined is-inverted is-radiusless" href="/docs">
          <span class="icon">
            <i class="fas fa-sm fa-info"></i>
          </span>
          <span>
            Docs
          </span>
        </a>

        <a class="button is-orange is-radiusless" href="/downloads">
          <span class="icon">
            <i class="fas fa-file-download"></i>
          </span>
          <span>
            Downloads
          </span>
        </a>
      </div>
    </div>
  </div>
</section>

{{ partial "home/graduation.html" . }}

<section class="section" id="about">
  <div class="container">
   <div class="columns is-vcentered">
     <div class="column is-4 is-about-section">
      <div class="is-size-5">
        {{ $about }}
      </div>
      
      <br />

      <hr class="short-hr is-black" />
    </div>

    <div class="column is-8 has-text-centered">
      <a href="{{ $diagram }}">
        <img src="{{ $diagram }}" class="is-home-diagram" alt="containerd architecture diagram">
      </a>
    </div>
   </div>
  </div>
</section>

<section class="section is-grey" id="features">
  <div class="container">
    <div class="columns">
      <div class="column is-one-quarter">
        <p class="is-size-3 is-size-4-mobile has-text-weight-semibold">
          Features
        </p>

        <hr class="short-hr is-black" />
      </div>

      <div class="column">
        <ul>
        {{- range $idx, $feature := $features }}
        {{- if eq (mod $idx 2) 0 }}
        <li class="is-size-4 is-size-5-mobile">
          {{ $feature }}
        </li>
        {{- end }}
        {{- end }}
        </ul>
      </div>

      <div class="column">
        <ul>
        {{- range $idx, $feature := $features }}
        {{- if eq (mod $idx 2) 1 }}
        <li class="is-size-4 is-size-5-mobile">
          {{ $feature }}
        </li>
        {{- end }}
        {{- end }}
        </ul>
      </div>
    </div>
  </div>
</section>

<section class="section is-adopters-section" id="adopters">
  <div class="container">
    <div class="columns">
      <div class="column is-3">
        <p class="is-size-3 is-size-4-mobile has-text-weight-semibold">
          Adopters
        </p>

        <hr class="short-hr is-black" />
      </div>

      <div class="column has-text-centered">
        <div class="is-logo-box">
          {{- range $adopterLogos }}
          {{- $logoUrl := printf "img/logos/adopters/%s" .logo | relURL }}
          {{- $imgname2 := split  .logo "."  }}
          {{- $imgname := index $imgname2 0  }}
          <a href="{{ .url }}" class="is-adopter-logo" target="_blank">
            <img src="{{ $logoUrl }}" alt ="{{ $imgname }}" >
          </a>
          {{- end }}
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section is-light-grey has-text-centered is-cncf-section" id="cncf">
  <div class="container">
    <p class="title is-spaced is-size-4 is-size-5-mobile">
      containerd is a <a href="https://cncf.io">Cloud Native Computing Foundation</a> graduated project
    </p>

    <br />

    <img src="/img/logos/cncf.png" class="is-cncf-logo" alt="Cloud Native Computing Foundation logo">
  </div>
</section>
{{ end }}
