<script>
    window.cachedScript('{{ jquery_asset }}', function () {
        window.cachedScript('https://cdn.jsdelivr.net/npm/@accessible360/accessible-slick@1.0.1/slick/slick.min.js', function () {
    
            $('.recent-projects-list').slick({
                infinite: false,
                slidesToShow: 1.05,
                slidesToScroll: 1,
                autoplay: false,
                arrows: false,
                dots: true,
                mobileFirst: true,
                responsive: [
                    {
                        breakpoint: 800,
                        settings: 'unslick'
                    }
                ]
            });
           
        });
    });
</script>

{% set current_category = page.custom_fields.project_category %}
{% set filtered_projects = [] %}
{% set locations = get_business_locations(filters={'limit': 400}) %}
{% for loc in locations %}
    {% if loc.location_url %}
    {% set local_site = site_from_url(loc.location_url) %}
    {% if local_site %}
        {% set local_site_pages = get_pages(site_id=local_site.id) %}
        {% for p in local_site_pages.filter({'custom_page_type': 'project_subpage_templated_page'}) %}
            {% if p.custom_fields.project_category == current_category %}
                {% set project_with_url = {
                    'page': p,
                    'full_url': (loc.location_url.rstrip('/') if loc.location_url.endswith('/') else loc.location_url) ~ p.path
                } %}
                {% do filtered_projects.append(project_with_url) %}
            {% endif %}
        {% endfor %}
    {% endif %}
    {% endif %}
{% endfor %}
<div style="display: none">Selected category: {{ current_category }} </div>
<section class="recent-projects">
    <div class="st-container">
        <div class="recent-projects-header">
            <h2>Recent Projects</h2>
            <p class="st-p1">See how Top Rail Fence has transformed a wide variety of properties across the country.</p>
        </div>
  
        <div class="recent-projects-list st-flex st-third">
            {% for project_obj in filtered_projects[:3] %}
            {% set project = project_obj.page %}
            <div class="project-item st-item">  
                <a href="{{ project_obj.full_url }}" class="project-card-link">
                    <div class="project-image">
                        <div class="image-cont">
                            {% if project.custom_fields.images %}
                            <img data-src="{{ project.custom_fields.images[0].image }}" alt="{{ project.custom_fields.title }}" class="lazyload">
                            {% else %}        
                            <svg class="header-logo placeholder-logo">
                                <use xlink:href="#icon-logo"></use>
                            </svg>
                            {% endif %}
                        </div>
                    </div>
                
                    <div class="project-content">
                        <h4>{{ project.custom_fields.title }}</h4>
                        <div class="project-meta">
                            <span class="project-location">
                      <svg class="location-icon" xmlns="http://www.w3.org/2000/svg" width="8" height="13" viewBox="0 0 8 13" fill="none">
                        <path d="M4 6.59258C3.62112 6.59258 3.25776 6.43454 2.98985 6.15324C2.72194 5.87193 2.57143 5.4904 2.57143 5.09258C2.57143 4.69475 2.72194 4.31322 2.98985 4.03192C3.25776 3.75061 3.62112 3.59258 4 3.59258C4.37888 3.59258 4.74224 3.75061 5.01015 4.03192C5.27806 4.31322 5.42857 4.69475 5.42857 5.09258C5.42857 5.28956 5.39162 5.48462 5.31983 5.6666C5.24804 5.84859 5.14281 6.01395 5.01015 6.15324C4.8775 6.29253 4.72001 6.40302 4.54669 6.4784C4.37337 6.55378 4.1876 6.59258 4 6.59258ZM4 0.892578C2.93913 0.892578 1.92172 1.33508 1.17157 2.12273C0.421427 2.91038 0 3.97867 0 5.09258C0 8.24258 4 12.8926 4 12.8926C4 12.8926 8 8.24258 8 5.09258C8 3.97867 7.57857 2.91038 6.82843 2.12273C6.07828 1.33508 5.06087 0.892578 4 0.892578Z" fill="#2D3A37"/>
                      </svg>
                      {{ project.custom_fields.location|default('Location TBD') }}
                    </span>
                            <span class="project-tag">{{ project.custom_fields.category }}</span>
                        </div>
                    </div>
                </a>
            </div>
            {% endfor %}
        </div>
    </div>
</section>
             
             <style>
.recent-projects {
    background-color: var(--primary-900);
    padding: 80px 20px;
    text-align: center;
    font-family: var(--var-font-text);
    color: #fff;
}

.project-item {
    background-color: var(--neutral-0);
    border-radius: 12px;
    overflow: hidden;
}

.project-card-link {
    text-decoration: none;
}

.project-image .image-cont {
    --_var-img-height: 185px;
    background: var(--Premium-Green-50, #F4F6F5);
}

.project-content {
    padding: 24px;
    min-height: 128px;
}
.project-content h4 {
    color: var(--Premium-Green-500, #256952);
    font-size: 20px;
    font-weight: 700;
    line-height: 115%;
    letter-spacing: -0.2px;
    margin-bottom: 6px;
}
.project-content > p {
    margin-bottom: 8px;
}
.placeholder-logo {
    width: 143px;
    height: 64px;
    margin: 17% auto;
}

/*.project-title {*/
/*  font-size: 20px;*/
/*  font-weight: 750;*/
/*  color: #07154D;*/
/*  margin-bottom: 12px;*/
/*  line-height: 115%;*/
/*  letter-spacing: -0.2px;*/
/*}*/

.project-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.project-location {
    border-radius: 100px;
    color: var(--Premium-Green-700, #2D3A37);
    background: var(--secondary-400, #CCB66C);
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 12px;
    padding: 4px 8px;
}

.location-icon {
    width: 8px;
    height: 13px;
    flex-shrink: 0;
}

.project-tag {
background: var(--Premium-Green-500, #256952);
    color: #fff;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 500;
}

@media screen and ( max-width: 1000px ){
    .recent-projects {
        padding: 32px 0 80px;
    }
    
    .recent-projects .slick-dots {
        transform: translateX(-16px);
    }
    
    .recent-projects-list {
        padding-left: 16px;
    }
    
    .project-item {
        max-width: 330px;
    }
    
}
</style>