{{ define "main" }}
<main class="flex">
  <section class="section-home {{ .Params.color }} flex w-100">
      <div class="flex align-center bck-marked w-100 section-header">
          <h2>{{ .Params.title }}</h2>
          <p class="subtitle">{{ .Params.description | markdownify  }}</p>
      </div>
      <div class="content">
          <div>
              <button data-type="client server" class="activable active btn lv2 implementationtype">All</button>
              <button data-type="client" class="activable btn lv2 implementationtype client">Clients</button>
              <button data-type="server" class="activable btn lv2 implementationtype server">Servers</button>
          </div>
          <section class="grid">
            {{ range .Pages }}
            <div class="space-between card flex implementation {{ .Params.role }}" data-type="{{ .Params.role }}">
              <div class="flex">
                <h4>{{ .Title }}</h4>
                <p>
                  <span class="type {{ .Params.role }} marked-color">{{ .Params.role }}</span>
                  <span class="type {{ .Params.role }} marked-color">{{ .Params.implementation }}</span>
                </p>
                <p>{{ .Params.description | markdownify }}</p>
              </div>
              <div class="flex-row">
                <a class="btn lv1" target="_blank" href="{{ .Params.source }}">git ↗</a>
                <!-- <a class="btn lv1" target="_blank" href="{{ .Path }}">doc ↗</a> -->
              </div>
            </div>
            {{ end }}
          </section>
      </div>
  </section>
</main>
{{ end }}