{{ if .Site.Params.testimonial.enable | default false }}
<section id="experience" class="py-5">
    <div class="container">
        <h3 class="text-center">{{ .Site.Params.testimonial.title | default "Client Testimonials" }}</h3>
        <div class="row justify-content-center">
            <div class="col-sm-12 col-md-8 col-lg-8 py-5">
                <div class="experience-container px-3 pt-2">
                    <ul class="nav nav-pills mb-3 bg-transparent primary-font" id="pills-tab" role="tablist">
                        {{ range $index, $element := .Site.Params.testimonial.items }}
                        {{ if (eq $index 0) }}
                        <li class="nav-item px-1 bg-transparent" role="presentation">
                            <div 
                                class="nav-link active bg-transparent" 
                                aria-selected="true" 
                                role="tab" 
                                data-bs-toggle="pill"
                                id='{{ replace .company " " "-" }}-{{ replace .date " " "-" }}-tab'
                                data-bs-target='#pills-{{ replace .company " " "-" }}-{{ replace .date " " "-" }}'
                                aria-controls='{{ replace .company " " "-" }}-{{ replace .date " " "-" }}' 
                            >
                                {{ .company }}
                            </div>
                        </li>
                        {{ else }}
                        <li class="nav-item px-1 bg-transparent" role="presentation">
                            <div 
                                class="nav-link bg-transparent" 
                                aria-selected="true" 
                                role="tab" 
                                data-bs-toggle="pill"
                                id='{{ replace .company " " "-" }}-{{ replace .date " " "-" }}-tab'
                                data-bs-target='#pills-{{ replace .company " " "-" }}-{{ replace .date " " "-" }}' 
                                aria-controls='{{ replace .company " " "-" }}-{{ replace .date " " "-" }}'
                            >
                                {{ .company }}
                            </div>
                        </li>
                        {{ end }}
                        {{ end }}
                    </ul>
                    <div class="tab-content pb-5 pt-2 bg-transparent primary-font" id="pills-tabContent">
                        {{ range $index, $element := .Site.Params.testimonial.items }}
                        {{ if (eq $index 0) }}
                        <div 
                            class="tab-pane fade show active bg-transparent" 
                            role="tabpanel"
                            id='pills-{{ replace .company " " "-" }}-{{ replace .date " " "-" }}'
                            aria-labelledby='pills-{{ replace .company " " "-" }}-tab'
                        >
                            <div>
                                <span class="h4">{{ .job }}</span>
                                <small>-</small>
                                <a href="{{ .companyUrl }}" target="_blank">{{ .company }}</a>
                                
                                {{ if .featuredLink.enable | default false }}
                                <div class="py-2 featuredLink">
                                    <a class="p-2 px-4 btn btn-outline-primary btn-sm" href={{ .featuredLink.url | default "#" }} target="_blank">
                                        {{ .featuredLink.name | default "Featured Link" }} 
                                    </a>
                                </div>
                                {{ end }}
                            </div>

                            <div class="pt-2">
                                {{ .content | markdownify}}
                                <br>
                                <strong>{{ .writtenBy | markdownify}} </strong>
                            </div>
                        </div>
                        {{ else }}
                        <div 
                            class="tab-pane fade bg-transparent" 
                            role="tabpanel"
                            id='pills-{{ replace .company " " "-" }}-{{ replace .date " " "-" }}'
                            aria-labelledby='pills-{{ replace .company " " "-" }}-{{ replace .date " " "-" }}-tab'
                        >
                            <div>
                                <span class="h4">{{ .job }}</span>
                                <small>-</small>
                                <a href="{{ .companyUrl }}" target="_blank">{{ .company }}</a>
                                                               
                                {{ if .featuredLink.enable | default false }}
                                <div class="py-2 featuredLink">
                                    <a class="p-2 px-4 btn btn-outline-primary btn-sm" href={{ .featuredLink.url | default "#" }} target="_blank">
                                        {{ .featuredLink.name | default "Featured Link" }} 
                                    </a>
                                </div>
                                {{ end }}
                            </div>

                            <div class="pt-2">
                                {{ .content | markdownify}}
                                <br>
                                <strong>{{ .writtenBy | markdownify}} </strong>
                            </div>
                        </div>
                        {{ end }}
                        {{ end }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{{ end }}