{{ define "main" }}
<main class="post py-5">
    <div class="container-fluid">
        <div class="container">

            <h1 class="post-title mb-5">{{ .Title }}</h1>

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

            <div id="posts-filter" class="tab pb-4" role="tablist" aria-multiselectable="true">
                <button type="button" role="tab" class="button-filter" aria-controls="allposts"
                    onclick="service(event, 'allposts')" id="firstopen" aria-selected="true">
                    {{ i18n "allPosts" }}</button>
                {{ range (where .Site.RegularPages "Type" "categories") }}
                <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 class="allposts tabcontentservice mt-3">

            <div class="row">
                {{ range first 1 (where .Site.RegularPages "Type" "blog") }}
                <div class="col-xl-8 col-lg-12 col-12 pb-lg-0 pb-4">
                    <article class="first background-blue-50">
                        <img class="grayscale mb-lg-3 mb-0" src="{{ .Site.BaseURL }}{{ .Params.image }}" alt="{{ .Title }}" width="1000px" height="750px">
                        <div class="data">
                            <p class="info mb-1">{{ i18n "readingTime" .Page.ReadingTime }} / <strong><time datetime="{{ .Date.Format .Site.Params.dateform }}">{{ .Date.Format .Site.Params.dateform }}</time></strong></p>
                            <a class="title mb-2 stretched-link" href="{{ .Permalink }}">{{ .Title }}</a>
                            <p class="description mb-0 mt-2">{{ .Summary | truncate 200 }}</p>
                        </div>
                    </article>
                </div>
                {{ end }}
                {{ range first 1 (after 1 (where .Site.RegularPages "Type" "blog")) }}
                <div class="col-xl-4 col-lg-12 col-12">
                    <article class="card">
                        <img class="grayscale mb-3" src="{{ .Site.BaseURL }}{{ .Params.image }}" width="368px" height="276px" alt="{{ .Title }}">
                        <p class="info mb-1">{{ i18n "readingTime" .Page.ReadingTime }} / <strong><time datetime="{{ .Date.Format .Site.Params.dateform }}">{{ .Date.Format .Site.Params.dateform }}</time></strong></p>
                        <a class="title mb-2 stretched-link" href="{{ .Permalink }}">{{ .Title }}</a>
                        <p class="description mb-0">{{ .Summary | truncate 200 }}</p>
                    </article>
                </div>
                {{ end }}
            </div>

            <div class="row py-4">
                {{- range first 3 (after 2 (where .Site.RegularPages "Type" "blog")) }}
                <div class="col-xl-4 col-lg-12 col-12">
                    <article class="card">
                        <img class="grayscale mb-3" src="{{ .Site.BaseURL }}{{ .Params.image }}" width="368px" height="276px" alt="{{ .Title }}" loading="lazy">
                        <p class="info mb-1">{{ i18n "readingTime" .Page.ReadingTime }} / <strong><time datetime="{{ .Date.Format .Site.Params.dateform }}">{{ .Date.Format .Site.Params.dateform }}</time></strong></p>
                        <a class="title mb-2 stretched-link" href="{{ .Permalink }}">{{ .Title }}</a>
                        <p class="description mb-0">{{ .Summary | truncate 200 }}</p>
                    </article>
                </div>
                {{- end }}
            </div>

            <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>Need design support?</h2>
                    <p class="mb-0">Schedule a 30min chat with us to find out how we can help</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="https://cal.ura.design/uradotdesign" target="_blank" rel="noopener noreferrer">Schedule a Chat</a>
                </div>
            </div>

            <div class="row py-4">
                {{- range after 5 (where .Site.RegularPages "Type" "blog") }}
                <div class="col-xl-4 col-lg-12 col-12 pb-4">
                    <article class="card">
                        <p class="info mb-1">{{ i18n "readingTime" .Page.ReadingTime }} / <strong><time datetime="{{ .Date.Format .Site.Params.dateform }}">{{ .Date.Format .Site.Params.dateform }}</time></strong></p>
                        <a class="title mb-2 stretched-link" href="{{ .Permalink }}">{{ .Title }}</a>
                        <p class="description mb-0">{{ .Summary | truncate 200 }}</p>
                    </article>
                </div>
                {{- end }}
            </div>
        </div>

            <div class="row">
                {{- range (where .Site.RegularPages "Type" "blog") }}
                <div class="{{ range .Params.categories }}{{ . | lower  }}{{ end }} tabcontentservice col-xl-4 col-lg-12 col-12 pb-4 mt-0">
                    <article class="card">
                        <p class="info mb-1">{{ i18n "readingTime" .Page.ReadingTime }} / <strong><time datetime="{{ .Date.Format .Site.Params.dateform }}">{{ .Date.Format .Site.Params.dateform }}</time></strong></p>
                        <a class="title mb-2 stretched-link" href="{{ .Permalink }}">{{ .Title }}</a>
                        <p class="description mb-0">{{ .Summary | truncate 200 }}</p>
                    </article>
                </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);
                        const showSupport = document.getElementById("supportNeeded");
                        selectedItems.forEach(selectedItem => {
                            selectedItem.style.display = "block"
                        });
                        evt.currentTarget.className += " selected";
                        evt.currentTarget.setAttribute("aria-selected", "true");

                        showSupport.className.replace("shown", "");

                        if (type == "allposts") {
                            showSupport.className.replace("shown", "");
                        }

                        showSupport.className += " shown";

                    }
                </script>
            </div>

            <div id="supportNeeded" 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>Need design support?</h2>
                    <p class="mb-0">Schedule a 30min chat with us to find out how we can help</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="https://cal.ura.design/uradotdesign" target="_blank" rel="noopener noreferrer">Schedule a Chat</a>
                </div>
            </div>
        </div>
    </div>
</main>
{{ end }}