{% comment %}
    Recent Posts Displayed here.
{% endcomment %}
<div class="col col-12 my-5 suggested_posts">
    <h3>Recent Posts</h3>
    <ul class="list-unstyled">
        {% for post in site.posts limit: 3 %}
            {% assign timeframe = 604800 %}
            {% assign post_in_seconds = post.date | date: "%s" | plus: 0 %}
            {% assign recent_posts = "now" | date: "%s" | minus: timeframe %}

             {% if post.image %}
                {% assign image_path = post.image %}
                {% capture image_alt %}{{post.title}} image {% endcapture %}
            {% else %}
                {% assign image_path = site.post_placeholder %}
                {% capture image_alt %}Blog post placeholder image {% endcapture %}
            {% endif %}
            <li class="media flex-column flex-sm-row">
                {% picture post_thumb {{image_path}} --alt {{image_alt}} %}
                <div class="media-body">
                    <a href="{{post.url}}">
                        <h5 class="mt-0 mb-1">{{post.title}}</h5>
                        <em class="suggested_post_date">{{post.date | date: "%A, %B %-d, %Y" }}</em>
                        <p>
                        {% if post.description %}
                            {{post.description}}
                        {% else %}
                            {{ post.content | strip_html | truncatewords:30 }}
                        {% endif %}
                        </p>
                        {% if post_in_seconds > recent_posts %}
                            <span class="new-post" title="Post added in the last week.">New</span>
                        {% endif %}
                    </a>
                </div>
            </li>
        {% endfor %}
        </ul>
</div>
{% comment %}
Other Posts
{% endcomment %}
<div class="col col-12 my-5 suggested_posts">
    <h3>Other Posts</h3>
    <ul class="list-unstyled">
        {% assign posts = site.posts | sample:5 %}
        {% for post in posts %}
             {% if post.image %}
                {% assign image_path = post.image %}
                {% capture image_alt %}{{post.title}} image {% endcapture %}
            {% else %}
                {% assign image_path = site.post_placeholder %}
                {% capture image_alt %}Blog post placeholder image {% endcapture %}
            {% endif %}
            <li class="media flex-column flex-sm-row">
                {% picture post_thumb {{image_path}} --alt {{image_alt}} %}
                <div class="media-body">
                    <a href="{{post.url}}">
                        <h5 class="mt-0 mb-1">{{post.title}}</h5>
                        <em class="suggested_post_date">{{post.date | date: "%A, %B %-d, %Y" }}</em>
                        <p>
                        {% if post.description %}
                            {{post.description}}
                        {% else %}
                            {{ post.content | strip_html | truncatewords:30 }}
                        {% endif %}
                        </p>
                    </a>
                </div>
            </li>
        {% endfor %}
        </ul>
</div>