{% set my_path = page.path %}
{% if my_path %}
{% set path_parts = my_path.strip('/').split('/') %}
{% endif %}
<section class="breadcrumbs">
{% set breadcrumbs = get_breadcrumbs(include_home=True) %}
<div class="st-container-lg">
<div class="st-flex st-breadcrumbs">
{% for item in breadcrumbs.breadcrumbs[:2] %}
{% if loop.last %}
<span class="current-page">{{ item.name }}</span>
{% else %}
<a href="{{ item.link }}">{{ item.name }}</a>
<span class="breadcrumbs-seperator">|</span>
{% endif %}
{% endfor %}
</div>
{% do set_schema_overrides('breadcrumbs', breadcrumbs.as_schema()) %}
</div>
</section>
{% if my_path.startswith('/blog/') %}
<!--HOME CARE TIPS BLOG-->
<div class="st-container-md posts-list-wrapper">
{% set all_cats = get_categories() %}
<div class="post-list-header main">
<h1>Home Care Tips</h1>
<ul class="blog-categories st-flex st-desktop">
<li><a href="/blog/">All posts</a></li>
{% for cat in all_cats %}
<li class="{% if path_parts %}{% if path_parts[2] == cat.name|slugify %}active-category{% endif %}{% endif %}">
<a href="{{ cat.url }}"><span>{{ cat.name }}</span></a>
</li>
{% endfor %}
</ul>
<div class="selector-cont st-mobile">
<select id="catSelector" class="cat-selector bg-color">
<option value="/blog/">Select A Category</option>
{% for cat in all_cats %}
<option value="{{ cat.url }}" {% if cat.url == page.path %}selected{% endif %}>{{ cat.name }}</option>
{% endfor %}
</select>
<svg class="selector-arrow" width="16" height="8" viewBox="0 0 16 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 0.940236L1.48072 0.5L8 6.60928L14.5193 0.5L15 0.940236L8 7.5L1 0.940236Z" fill="#666666" stroke="#666666" stroke-width="0.5"/>
</svg>
</div>
</div>
<div class="post-list-cat-wrap st-third">
<!--Blog Root-->
{% if page.path == '/blog/' %}
{% for post in filter_posts(category_slug='blogs') %}
<a itemprop="articleBody" class="article-body st-item" href="{{ post.url(**post_url_params) }}">
<div itemscope="" itemtype="http://schema.org/BlogPosting" class="post-list-item" title="{{ post.title }}">
<div itemprop="image" itemscope itemtype="https://schema.org/ImageObject" class="blog-image-wrap">
{% if post.featured_img %}
<div style="background-image:url('{{ post.featured_img.src }}')" itemprop="image" class="blog-featured-img"></div>
{% else %}
<div style="background-image: url('/img/upload/hwcg-blog-fallback.jpg')" itemprop="image" class="blog-featured-img"></div>
{% endif %}
</div>
<div class="blog-cont">
<p class="st-h4" itemprop="name headline">{{ post.title }}</p>
<ul class="cat-list">
{% if post.categories %}
{% for category in post.categories[:3] %}
{% if category.name != "Blogs" %}
<li>
<p>{{ category.name }}</p>
</li>
{% endif %}
{% endfor %}
{% endif %}
</ul>
</div>
</div>
</a>
{% endfor %}
{% else %}
<!--Category Page-->
{% for post in posts %}
{% if post %}
<a itemprop="articleBody" class="article-body st-item article-cat-page" href="{{ post.url(**post_url_params) }}">
<div itemscope="" itemtype="http://schema.org/BlogPosting" class="post-list-item" title="{{ post.title }}">
<div itemprop="image" itemscope itemtype="https://schema.org/ImageObject" class="blog-image-wrap">
{% if post.featured_img %}
<div style="background-image:url('{{ post.featured_img.src }}')" itemprop="image" class="blog-featured-img"></div>
{% else %}
<div style="background-image: url('/img/upload/hwcg-blog-fallback.jpg')" itemprop="image" class="blog-featured-img"></div>
{% endif %}
</div>
<div class="blog-cont">
<p class="st-h4" itemprop="name headline">{{ post.title }}</p>
{% if post.categories %}
<ul class="cat-list">
{% for category in post.categories[:3] %}
{% if category.name != "Blogs" %}
<li>
<p>{{ category.name }}</p>
</li>
{% endif %}
{% endfor %}
</ul>
{% endif %}
</div>
</div>
</a>
{% endif %}
{% endfor %}
{% endif %}
</div>
<div class="next-prev-wrapper st-flex">
{% if posts.has_previous() %}
<a class="st-btn v1" href="{{ posts.prev_link }}"><span>{% trans %}Previous Page{% endtrans %}</span></a>
{% endif %}
{% if posts.has_next() %}
<a class="st-btn v1" href="{{ posts.next_link }}"><span>{% trans %}Next Page{% endtrans %}</span></a>
{% endif %}
</div>
</div>
<!--end Home Care Tips Blog-->
{% elif my_path.startswith('/resources/') %}
<!--RESOURCES BLOG-->
<div class="st-container-lg resources-wrapper">
<div class="post-list-header main">
<h1>Home Care Resource Center</h1>
<p>Learn how to set yourself and your loved ones up for success with in-home care.</p>
</div>
{% if page.path == '/resources/' %}
<!--Resources Root-->
<div class="resources-body">
<div class="resources-top st-flex st-half">
<div class="featured-resources st-item">
<div class="green-tab"><h3>Featured Resource:</h3></div>
{% for post in filter_posts(category_slug='resources')[:1] %}
<a itemprop="articleBody" class="article-body st-item" href="{{ post.url(**post_url_params) }}">
<div itemscope="" itemtype="http://schema.org/BlogPosting" class="post-list-item" title="{{ post.title }}">
<div itemprop="image" itemscope itemtype="https://schema.org/ImageObject" class="blog-image-wrap">
{% if post.featured_img %}
<div style="background-image:url('{{ post.featured_img.src }}')" itemprop="image" class="blog-featured-img"></div>
{% else %}
<div style="background-image: url('/img/upload/hwcg-blog-fallback.jpg')" itemprop="image" class="blog-featured-img"></div>
{% endif %}
</div>
<div class="blog-cont">
<p class="st-h2 st-teal-900" itemprop="name headline">{{ post.title }}</p>
<div class="card-footer">
{% if post.categories %}
<ul class="cat-list">
{% for category in post.categories[:3] %}
{% if category.name != "Blogs" %}
<li>
<p>{{ category.name }}</p>
</li>
{% endif %}
{% endfor %}
</ul>
{% endif %}
<button class="explore-btn">
Explore Subject <span class="arrow">→</span>
</button>
</div>
</div>
</div>
</a>
{% endfor %}
</div>
<div class="popular-resources st-item">
<div class="green-tab"><h3>Other popular resources:</h3></div>
<div class="post-list-cat-wrap">
{% for post in filter_posts(category_slug='resources')[:3] %}
<a itemprop="articleBody" class="article-body st-item" href="{{ post.url(**post_url_params) }}">
<div itemscope="" itemtype="http://schema.org/BlogPosting" class="post-list-item" title="{{ post.title }}">
<div itemprop="image" itemscope itemtype="https://schema.org/ImageObject" class="blog-image-wrap">
{% if post.featured_img %}
<div style="background-image:url('{{ post.featured_img.src }}')" itemprop="image" class="blog-featured-img"></div>
{% else %}
<div style="background-image: url('/img/upload/hwcg-blog-fallback.jpg')" itemprop="image" class="blog-featured-img"></div>
{% endif %}
</div>
<div class="blog-cont">
<p class="st-h4" itemprop="name headline">{{ post.title }}</p>
{% if post.categories %}
<ul class="cat-list">
{% for category in post.categories[:3] %}
{% if category.name != "Blogs" %}
<li>
<p>{{ category.name }}</p>
</li>
{% endif %}
{% endfor %}
</ul>
{% endif %}
</div>
</div>
</a>
{% endfor %}
</div>
</div>
</div>
<!-- Navigate by Topic -->
<section class="topics-section">
<h2 class="topics-title">Navigate Resources by Topic</h2>
<div class="topic-buttons">
<a href="/resources/in-home-senior-safety/" class="topic-btn">In-Home Senior Safety</a>
<a href="/resources/support-for-caregivers/" class="topic-btn">Support for Family Caregivers</a>
<a href="/about-home-care/how-much-does-home-care-cost/" class="topic-btn">Home Care Costs & Payment Options</a>
<a href="/home-care-services/chronic-conditions/" class="topic-btn">Chronic Condition Management</a>
<div class="compass-icon">
<img src="/img/upload/hwcg_compass_1.webp" width="120" height="120" alt="Compass" />
</div>
</div>
</section>
<div class="latest-resources">
<div class="green-panel st-flex ">
<h3>Latest Resources:</h3>
<div class="selector-cont">
<select id="catSelector" class="cat-selector bg-color">
<option value="/blog/">Filter by Category</option>
<option class="category" value="in-home-senior-safety">In-Home Senior Safety</option>
<option class="category" value="support-for-caregivers">Support for Family Caregivers</option>
</select>
<svg class="selector-arrow" width="16" height="8" viewBox="0 0 16 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 0.940236L1.48072 0.5L8 6.60928L14.5193 0.5L15 0.940236L8 7.5L1 0.940236Z" fill="#666666" stroke="#666666" stroke-width="0.5"/>
</svg>
</div>
</div>
<div class="post-list-cat-wrap st-third">
{% for post in filter_posts(category_slug='resources') %}
{% set ns = namespace(categoryname='') %}
{% if post.categories %}
{% for category in post.categories %}
{% if category.name != "Blogs" and category.name != "Resources" and ns.categoryname == '' %}
{% set ns.categoryname = category.name|slugify %}
{% endif %}
{% endfor %}
{% endif %}
<a itemprop="articleBody" class="article-body st-item" href="{{ post.url(**post_url_params) }}" data-cat="{{ ns.categoryname }}">
<div itemscope="" itemtype="http://schema.org/BlogPosting" class="post-list-item" title="{{ post.title }}">
<div itemprop="image" itemscope itemtype="https://schema.org/ImageObject" class="blog-image-wrap">
{% if post.featured_img %}
<div style="background-image:url('{{ post.featured_img.src }}')" itemprop="image" class="blog-featured-img"></div>
{% else %}
<div style="background-image: url('/img/upload/homstretch-team.jpg')" itemprop="image"></div>
{% endif %}
</div>
<div class="blog-cont">
<p class="st-h4" itemprop="name headline">{{ post.title }}</p>
{% if post.categories %}
<ul class="cat-list">
{% for category in post.categories[:3] %}
{% if category.name != "Blogs" and category.name != "Resources" %}
<li>
<p>{{ category.name }}</p>
</li>
{% endif %}
{% endfor %}
</ul>
{% endif %}
</div>
</div>
</a>
{% endfor %}
</div>
<div class="next-prev-wrapper st-flex">
{% if posts.has_previous() %}
<a class="st-btn v1" href="{{ posts.prev_link }}"><span>{% trans %}Previous Page{% endtrans %}</span></a>
{% endif %}
{% if posts.has_next() %}
<a class="st-btn v1" href="{{ posts.next_link }}"><span>{% trans %}Next Page{% endtrans %}</span></a>
{% endif %}
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const selector = document.getElementById('catSelector');
const posts = document.querySelectorAll('.article-body');
selector.addEventListener('change', function() {
const selected = this.value;
posts.forEach(post => {
const cat = post.getAttribute('data-cat');
// Show all if default option, or only matching category
if (selected === '/blog/' || selected === '' || selected === 'Filter by Category') {
post.style.display = '';
} else if (cat === selected) {
post.style.display = '';
} else {
post.style.display = 'none';
}
});
});
});
</script>
</div>
{% else %}
<!--Category Page-->
<div class="resources-body">
<div class="latest-resources">
<div class="post-list-cat-wrap st-third">
{% for post in filter_posts(category_slug='resources') %}
<a itemprop="articleBody" class="article-body st-item" href="{{ post.url(**post_url_params) }}">
<div itemscope="" itemtype="http://schema.org/BlogPosting" class="post-list-item" title="{{ post.title }}">
<div itemprop="image" itemscope itemtype="https://schema.org/ImageObject" class="blog-image-wrap">
{% if post.featured_img %}
<div style="background-image:url('{{ post.featured_img.src }}')" itemprop="image" class="blog-featured-img"></div>
{% else %}
<div style="background-image: url('/img/upload/homstretch-team.jpg')" itemprop="image"></div>
{% endif %}
</div>
<div class="blog-cont">
<p class="st-h4" itemprop="name headline">{{ post.title }}</p>
{% if post.categories %}
<ul class="cat-list">
{% for category in post.categories[:3] %}
{% if category.name != "Blogs" and category.name != "Resources" %}
<li>
<p>{{ category.name }}</p>
</li>
{% endif %}
{% endfor %}
</ul>
{% endif %}
</div>
</div>
</a>
{% endfor %}
</div>
<div class="next-prev-wrapper st-flex">
{% if posts.has_previous() %}
<a class="st-btn v1" href="{{ posts.prev_link }}"><span>{% trans %}Previous Page{% endtrans %}</span></a>
{% endif %}
{% if posts.has_next() %}
<a class="st-btn v1" href="{{ posts.next_link }}"><span>{% trans %}Next Page{% endtrans %}</span></a>
{% endif %}
</div>
</div>
</div>
{% endif %}
</div>
<!--end Resources Blog-->
{% endif %}