{{ 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="tab pb-4" role="tablist" aria-multiselectable="true">
              <button type="button" role="tab" class="button-filter" aria-controls="allworks"
                  onclick="service(event, 'allworks')" id="firstopen" aria-selected="true">
                  {{ i18n "allWorks" }}</button>
              {{ range (where .Site.RegularPages "Type" "filters") }}
              <button type="button" role="tab" class="button-filter" aria-controls="{{ .Page.Params.id }}"
                  onclick="service(event, '{{ .Page.Params.id }}')" aria-selected="false">{{
                  .Page.Params.title }}</button>
              {{ end }}
            </div>

          </div>
        </div>
      </div>

      <div class="container">
        {{ $work := where .Pages "Type" "work" }}

        <div class="allworks tabcontentservice mt-5">

          <div class="row">
              {{ range first 2 ($work) }}
              <div class="col-xl-6 col-lg-12 col-12 pb-xl-0 pb-5 work">
                  <a class="zoom-wrapper" href="{{ .Permalink }}" aria-label="{{ .Title }} case study">
                    <img class="img-fluid w-100 with-js" src="{{ .Site.BaseURL }}/img/work/{{- with .Params.images }}{{ index . 1 }}{{ end -}}.svg" width="636px" height="357px" alt="">
                    <img class="img-fluid w-100 no-js" src="{{ .Site.BaseURL }}/img/work/{{- with .Params.images }}{{ index . 1 }}{{ end -}}.webp" 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">
                  <a class="zoom-wrapper" href="{{ .Permalink }}" aria-label="{{ .Title }} case study">
                    <img class="img-fluid w-100 with-js" src="{{ .Site.BaseURL }}/img/work/{{- with .Params.images }}{{ index . 1 }}{{ end -}}.svg" width="416px" height="234px" alt="">
                    <img class="img-fluid w-100 no-js" src="{{ .Site.BaseURL }}/img/work/{{- with .Params.images }}{{ index . 1 }}{{ end -}}.webp" 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>

        <div class="row py-5">
          {{ range ($work) }}
            <div class="col-xl-4 col-lg-12 col-12 mb-4 mt-0 work tabcontentservice {{ range $i, $e := .Params.categories }}{{ if $i }} {{ end }}{{ replaceRE " " "-" $e | lower }}{{- end -}}">
                <a class="zoom-wrapper" href="{{ .Permalink }}" aria-label="{{ .Title }} case study">
                  <img class="img-fluid w-100 with-js" src="{{ .Site.BaseURL }}/img/work/{{- with .Params.images }}{{ index . 1 }}{{ end -}}.svg" width="416px" height="234px" alt="">
                  <img class="img-fluid w-100 no-js" src="{{ .Site.BaseURL }}/img/work/{{- with .Params.images }}{{ index . 1 }}{{ end -}}.webp" 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 }}

        <script>
          document.getElementById("firstopen").click();

          function service(evt, type) {
              // Declare all variables
              var i, tabcontentservice, tablinkservice;

              // Get all elements with class="tabcontentservice" and hide them
              tabcontentservice = document.getElementsByClassName("tabcontentservice");
              for (i = 0; i < tabcontentservice.length; i++) {
                  tabcontentservice[i].style.display = "none";
              }

              // Get all elements with class="button-filter" and remove the class "active"
              tablinkservice = document.getElementsByClassName("button-filter");
              for (i = 0; i < tablinkservice.length; i++) {
                  tablinkservice[i].className = tablinkservice[i].className.replace(" selected", "");
                  tablinkservice[i].setAttribute("aria-selected", "false");
              }

              // Show the current tab, and add an "active" class to the button that opened the tab
              // document.dataset(type).style.display = "block";
              const className = "" + '.' + type +  "";
              const selectedItems = document.querySelectorAll(className);
              console.log(selectedItems);
              selectedItems.forEach(selectedItem => {
                  selectedItem.style.display = "block"
              });

              evt.currentTarget.className += " selected";
              evt.currentTarget.setAttribute("aria-selected", "true");
          }
        </script>
        </div>
      </div>
  </div>
</main>
{{ end }}