{{ define "main" }}
<main class="post py-5">
  <div class="container-fluid">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-xl-10 col-lg-10 col-md-12 col-12">
          <h1 class="post-title mb-3">{{ .Title }}</h1>

          {{- if .Content }}
          <div class="content mb-5">{{ .Content }}</div>
          {{- end }}

          <div id="work-filter" class="row mb-5">
              <div class="d-lg-flex d-block justify-content-between mb-4">
                  <div id="category-filter">
                      <button type="button" class="button-filter selected mb-lg-0 mb-2" onclick="filterSelection('all')">{{ i18n "allWorks" }}</button>
                      {{ range (where .Site.RegularPages "Type" "filters") }}
                      <button type="button" class="button-filter mb-lg-0 mb-2" onclick="filterSelection('{{ .Page.Params.id }}')">{{ .Page.Params.title }}</button>
                      {{ end }}
                  </div>
              </div>
          </div>
          </div>
        </div>
      </div>
        <div class="container">
          {{ $work := where .Pages "Type" "work" }}
          <div class="row">
              {{ range first 2 ($work) }}
              <div class="col-xl-6 col-lg-12 col-12 pb-xl-0 pb-5 work {{ range $i, $e := .Params.categories }}{{ if $i }} {{ end }}{{ $e | lower }}{{- end -}}">
                  <a class="zoom-wrapper" href="{{ .Permalink }}" aria-label="{{ .Title }} case study">
                    <img class="img-fluid w-100" src="{{ .Site.BaseURL }}/img/work/{{ .Params.image }}" alt="">
                  </a>
                  <a class="title mt-3 mb-0" href="{{ .Permalink }}" aria-label="Project name: {{ .Title }}">{{ .Title }}</a>
                  <p class="mb-0">
                      {{ range $i, $e := .Params.categories -}}
                          {{- if $i -}}, {{ end -}}
                          {{ $category := substr (replace $e " " "") 0 }}
                          <a class="category" href="{{ "/categories/" | absLangURL }}{{ . | urlize }}" aria-label="{{ i18n "workTagged" }} {{ i18n . }}">{{ i18n $category }}</a>
                      {{- end -}}
                  </p>
              </div>
              {{ end }}
          </div>

          <div class="row pt-lg-5 pt-0 pb-5">
              {{ range after 2 ($work) }}
              <div class="col-xl-4 col-lg-12 col-12 pb-5 work {{ range $i, $e := .Params.categories }}{{ if $i }} {{ end }}{{ $e | lower }}{{- end -}}">
                  <a class="zoom-wrapper" href="{{ .Permalink }}" aria-label="{{ .Title }} case study">
                    <img class="img-fluid w-100" src="{{ .Site.BaseURL }}/img/work/{{ .Params.image }}" alt=""></a>
                  <a class="title mt-3 mb-0" href="{{ .Permalink }}" aria-label="Project name: {{ .Title }}">{{ .Title }}</a>
                  <p class="mb-0">
                      {{ range $i, $e := .Params.categories -}}
                          {{- if $i -}}, {{ end -}}
                          {{ $category := substr (replace $e " " "") 0 }}
                          <a class="category" href="{{ "/categories/" | absLangURL }}{{ . | urlize }}" aria-label="{{ i18n "workTagged" }} {{ i18n . }}">{{ i18n $category }}</a>
                      {{- end -}}
                  </p>
              </div>
              {{ end }}
          </div>

          <script>
              filterSelection("all");
              function filterSelection(c) {
                var x, i;
                x = document.getElementsByClassName("work");
                if (c == "all") c = "";
                for (i = 0; i < x.length; i++) {
                  RemoveClass(x[i], "visible");
                  if (x[i].className.indexOf(c) > -1) AddClass(x[i], "visible");
                }
              }
      
              // Show filtered elements
              function AddClass(element, name) {
                var i, arr1, arr2;
                arr1 = element.className.split(" ");
                arr2 = name.split(" ");
                for (i = 0; i < arr2.length; i++) {
                  if (arr1.indexOf(arr2[i]) == -1) {
                    element.className += " " + arr2[i];
                  }
                }
              }
              
              // Hide elements that are not selected
              function RemoveClass(element, name) {
                var i, arr1, arr2;
                arr1 = element.className.split(" ");
                arr2 = name.split(" ");
                for (i = 0; i < arr2.length; i++) {
                  while (arr1.indexOf(arr2[i]) > -1) {
                    arr1.splice(arr1.indexOf(arr2[i]), 1);
                  }
                }
                element.className = arr1.join(" ");
              }

              var filterContainer = document.getElementById("category-filter");
              var filters = filterContainer.getElementsByClassName("button-filter");
              for (var i = 0; i < filters.length; i++) {
                filters[i].addEventListener("click", function() {
                  var current = document.getElementsByClassName("selected");
                  current[0].className = current[0].className.replace(" selected", "");
                  this.className += " selected";
                });
              }
          </script>

      </div>
  </div>
</main>
{{ end }}