{{# About Page Template #}}
{{ layout = 'layouts/default' }}

{{# SLIDER SECTION #}}
<section class="about-slider-section">
    {{ collection:sliders location:contains="about" limit="1" scope="slider" }}

        <div class="row g-0 align-items-stretch">

            {{# Meta col: heart + bullets | col-lg-2 #}}
            <div class="col-lg-2 d-flex flex-column align-items-center justify-content-between">
                <div class="bg-white w-100 h-100 d-flex align-items-center justify-content-center" id="about-slider-likes">
                    {{ collection:slides sort="order" slider_id:contains="{slider:id}" }}
                        <div class="slide-like-item" style="display: none;">
                            {{ partial:partials/likes id="{id}" count="{likes_count ?? 0}" }}
                        </div>
                    {{ /collection:slides }}
                </div>
                <div class="slider-bullets-horizontal py-5" id="about-slider-bullets"></div>
            </div>

            {{# Fading slides | col-lg-10 #}}
            <div class="col-lg-10">
                <div class="about-slider fade-slider" id="about-slider">
                    {{ collection:slides sort="order" slider_id:contains="{slider:id}" }}
                        <div class="slide-item">
                            {{ if featured_image }}
                            <a href="{{ link ?? '#' }}">
                                <img src="{{ featured_image }}" alt="{{ title }}" class="slide-img w-100">
                            </a>
                            {{ /if }}
                        </div>
                    {{ /collection:slides }}
                </div>
            </div>

        </div>
    {{ /collection:sliders }}
</section>

{{# ABOUT TEXT SECTION #}}
<section class="about-text-section">
    <div class="container">
        <div class="row g-0 align-items-end">
            {{# Partners Label | col-lg-3 sticky #}}
            <div class="col-lg-3 pe-lg-0">
                <div class="about-partners-label d-flex align-items-center justify-content-center h-100 py-5">
                    <h2 class="fw-light m-0 text-uppercase text-white">Partners</h2>
                </div>
            </div>
            <div class="col-lg-9 ps-lg-0">
                <div class="row g-0">
                    <div class="col-6 bg-white py-5"></div>
                    <div class="col-6 bg-info py-5"></div>
                </div>
                <div class="bg-white p-lg-5 pt-lg-0 p-xl-10 pt-xl-0">
                    <h2 class="display-5 text-lowercase mt-0 mb-4">about us</h2>
                    {{ if content }}
                    <div class="about-content prose-content">
                        {{ content }}
                    </div>
                    {{ /if }}
                </div>
            </div>
        </div>
    </div>
</section>

{{# PARTNERS SECTION - Logos with custom background, title and description #}}
<section class="about-partners-section">
    <div class="container">
        
        {{ collection:partners orderby="order" }}
        <div class="partner-row">
            <div class="row g-0 align-items-stretch">

                {{# Logo #}}
                <div class="col-lg-3 p-5 d-flex align-items-center" style="{{ color ?= 'background-color:' + color }}">
                    {{ if logo }}
                        <img src="{{ logo }}" alt="{{ title }}" class="partner-detail-logo img-fluid mx-auto d-block">
                    {{ /if }}
                </div>

                {{# Title & Description #}}
                <div class="col-lg-9  bg-white">
                    <div class="border-bottom border-info px-lg-5 px-xl-10 py-lg-5">
                        <h3 class="partner-title lh-1 mb-0">{{ title }}</h3>
                    </div>
                    <div class="p-lg-5 p-xl-10">
                        {{ if content }}
                        <div class="partner-desc">{{ content }}</div>
                        {{ /if }}
                        {{ if link }}
                        <a href="{{ link }}" target="_blank" rel="noopener" class="partner-link mt-3 d-inline-block">Visit Website</a>
                        {{ /if }}
                    </div>
                </div>

            </div>
        </div>
        {{ /collection:partners }}

    </div>
</section>