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

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

                    <h2>{{ i18n "expertise" }}</h2>

                    <div class="tab pb-4" role="tablist" aria-multiselectable="true">
                        {{ 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>{{ .Content | markdownify }}</p>
                            <a class="see-more mt-3" href="{{ "/categories/" | absLangURL }}{{ .Page.Params.id }}">{{ i18n "seeOur" }} {{ .Page.Params.title }} {{ i18n "work" }} {{ partial "fontawesome.html" "solid/arrow-right" }}</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 id="expertise" class="col-12 pt-5 d-block d-lg-none">
                    <h2 class="mb-5">{{ i18n "expertise" }}</h2>
                    {{ range (where .Site.RegularPages "Type" "services") }}
                    <details>
                        <summary>{{ .Page.Params.title }} {{ partial "fontawesome.html" "solid/chevron-down" }}</summary>
                        <p class="mb-0">{{ .Content }}
                        <p>
                            <a class="see-more w-100 justify-content-center my-3"
                                href="{{ "/categories/" | absLangURL }}{{ .Page.Params.id }}">See our {{ .Page.Params.title }} Work</a>
                    </details>
                    {{ end }}
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid pt-5 pb-2">
        <div class="container">
            <div class="row mx-0 schedule justify-content-between align-items-center">
                <div class="col-xl-8 col-lg-8 col-12 pb-lg-0 pb-4">
                    <h2>{{ i18n "aboutDesignSponsorship" }}</h2>
                    <p class="mb-0">{{ i18n "aboutDesignSponsorshipDescription" | markdownify }}</p>
                </div>
                <div class="col-xl-4 col-lg-4 col-12 d-flex justify-content-center mt-lg-0 mt-2 mb-lg-0 mb-3">
                    <a class="design" href="{{ "/probono/" | absLangURL }}">{{ i18n "aboutDesignSponsorshipCTA" }}{{ partial "fontawesome.html" "solid/arrow-right" }}</a>
                </div>
            </div>
        </div>
    </div>

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

</main>
{{ end }}