{{ define "main" }}
<main class="post">

    <div class="container-fluid services">
        <div class="container">
            <div class="row">
                <div class="col-xl-3 col-lg-4 col-12 pt-5 pe-0 background-gray-50 d-none d-lg-block">

                    {{ if .IsTranslated }}
                    | {{ i18n "postAvailable" }}
                    {{ range .Translations }}
                    <a href="{{ .Permalink }}"><span>{{ index $.Site.Data.langFlags (.Lang) }}</span></a>
                    {{ end }}
                    {{ end }}

                    <h2>Our Expertise</h2>

                    <div class="tab pb-4" aria-role="tablist">
                        {{ range (where .Site.RegularPages "Type" "services") }}
                        <button type="button" role="tab" class="tablinkservice" aria-controls="{{ .Page.Params.id }}"
                            onclick="service(event, '{{ .Page.Params.id }}')" {{ if eq .Page.Params.weight 1
                            }}id="firstopen" aria-selected="true" {{ else }}aria-selected="false" {{ end }}>{{
                            .Page.Params.title }}</button>
                        {{ end }}
                    </div>

                </div>

                <div class="offset-xl-1 col-xl-8 offset-lg-1 col-lg-7 col-12 pt-lg-5 pt-0 d-none d-lg-block">
                    {{ range (where .Site.RegularPages "Type" "services") }}
                    <div id="{{ .Page.Params.id }}" class="tabcontentservice">
                        <p class="mb-0">{{ .Content }}
                        <p>
                            <a class="see-more mt-3" href="/categories/{{ .Page.Params.id }}">See our {{ .Page.Params.title }} Work</a>
                    </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="tablinkservice" and remove the class "active"
                            tablinkservice = document.getElementsByClassName("tablinkservice");
                            for (i = 0; i < tablinkservice.length; i++) {
                                tablinkservice[i].className = tablinkservice[i].className.replace(" active", "");
                                tablinkservice[i].setAttribute("aria-selected", "false");
                            }

                            // Show the current tab, and add an "active" class to the button that opened the tab
                            document.getElementById(type).style.display = "block";
                            evt.currentTarget.className += " active";
                            evt.currentTarget.setAttribute("aria-selected", "true");
                        }
                    </script>
                </div>

                <div class="col-12 pt-5 d-block d-lg-none">
                    <h2 class="mb-5">Our Expertise</h2>
                    {{ range (where .Site.RegularPages "Type" "services") }}
                    <details>
                        <summary>{{ .Page.Params.title }}</summary>
                        <p class="mb-0">{{ .Content }}
                        <p>
                            <a class="see-more w-100 justify-content-center my-3"
                                href="/categories/{{ .Page.Params.id }}">See our {{ .Page.Params.title }} Work</a>
                    </details>
                    {{ end }}
                </div>
            </div>
        </div>
    </div>

    {{ partial "team" . }}
    {{ partial "testimonials" . }}
    {{ partial "call" . }}

</main>
{{ end }}