{{ 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>

    <div class="container-fluid py-5">
        <div class="container">
            <h2>Who are we?</h2>
            <div class="row pt-lg-4 pt-0">
            {{ range (where .Site.RegularPages "Type" "authors") }}
                <div class="col-xl-4 col-lg-6 col-12">
                    <div class="row mb-3 mb-lg-5">
                        <div class="col-xxl-5 col-xl-12 col-5">
                            <img class="img-fluid pb-3" src="/img/authors/{{ .Page.Params.image }}" alt="">
                        </div>
                        <div class="col-xxl-7 col-xl-12 col-7 circle-icons">
                            <h2>{{ .Page.Params.name }}</h2>
                            <p>{{ .Page.Params.position }}</p>
                            {{ if .Page.Params.website }}
                                <a href="{{ .Page.Params.website }}" target="_blank" rel="noopener noreferrer" aria-label="{{ .Page.Params.name }}'s Website"><i class="fa-solid fa-globe" aria-hidden="true"></i></a>
                            {{ end }}
                            {{ if .Page.Params.twitter }}
                                <a href="https://twitter.com/{{ .Page.Params.twitter }}" target="_blank" rel="noopener noreferrer" aria-label="{{ .Page.Params.name }}'s Twitter"><i class="fa-brands fa-twitter" aria-hidden="true"></i></a>
                            {{ end }}
                            {{ if .Page.Params.github }}
                                <a href="https://github.com/{{ .Page.Params.github }}" target="_blank" rel="noopener noreferrer" aria-label="{{ .Page.Params.name }}'s GitHub"><i class="fa-brands fa-github" aria-hidden="true"></i></a>
                            {{ end }}
                            {{ if .Page.Params.email }}
                                <a href="mailto:{{ .Page.Params.email }}" aria-label="{{ .Page.Params.name }}'s email"><i class="fa-solid fa-envelope" aria-hidden="true"></i></a>
                            {{ end }}
                            {{ if .Page.Params.gpg }}
                                <a href="{{ .Page.Params.gpg }}" target="_blank" rel="noopener noreferrer" aria-label="{{ .Page.Params.name }}'s GPG key"><i class="fa-solid fa-key" aria-hidden="true"></i></a>
                            {{ end }}
                        </div>
                    </div>
                </div>
            {{ end }}
            </div>
        </div>
    </div>

    {{ partial "testimonials" . }}

    <div class="container-fluid px-sm-3 px-0 pt-5 background-gray-50">
        <div class="container">
            <div class="row justify-content-end">
                <div class="col-xl-5 col-lg-7 col-12 px-sm-3 px-0">
                    <div class="cta-card py-5">
                        <h2>Can we help on your project?</h2>
                        <a class="arrow-link" href="#">Contact us</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
{{ end }}