<!-- Featured post -->
<div class="container">
{% assign iter = "first" %}
{% for post in paginator.posts %}
    {% if iter == "first" %}
    

    {% if paginator.page == 1 %}
    {% assign first_page_first_post = true %}
    <section class="section featured-post">
        <a href="{{ post.url }}">
        <div class="card is-shadowless">
        <h2 class="title is-size-3 is-size-5-mobile padded-multiline">
            <span>{{post.title}}
            {% unless post.subtitle == null %} - {{ post.subtitle }}{% endunless %}
            </span></h2>
        <div class="card-image">
            <figure class="image is-2by1 is-relative">
            <a href="{{ post.url }}">
                <img 
                    data-src="{{ post.image.path | default: 'https://via.placeholder.com/910x455.png' | append: '?nf_resize=smartcrop&w=910&h=455'}}" 
                    data-lowsrc="{{ post.image.path | default: 'https://via.placeholder.com/910x455.png' | append: '?nf_resize=smartcrop&w=100&h=50'}}" 
                    alt="Image by {{page.image.author}} on {{page.image.source}}"
                    class="lazyload blur-up">
            </a>
            {% assign postcontent = post.content %}{% comment  %}TODO: improve this as a include parameter{% endcomment %}
            {% capture readingtime %}{% include themes/jmblog-theme/components/reading-time.html %}{% endcapture %}
            {% if readingtime.size > 1 %}
            <span class="tag is-white is-ontop-right">{{ readingtime | strip }}</span>
            {% endif %}
            </figure>
        </div>
        <div class="card-content">
            
            

            <div class="content">
            <a href="{{ post.url }}" class="has-text-black">
                {{ post.summary }}
            </a>
            </div>
            <div class="tags">
                {% for tag in post.tags %}
                <span class="tag">#{{ tag }}</span>
                {% endfor %}
            </div>
        </div>
        </div>
        </a>
    </section>

    <hr>
        {% endif %}<!-- End page 1 -->

    
    <!-- Main section -->
    <section class="section">
        <div class="columns">
            <!-- Main area column -->
            <div class="column is-two-thirds">

                {% if paginator.page == 1 %}
                <h2 class="title is-3 is-uppercase">Recent Articles</h2>
                {% endif %}

                <div class="article-list">
    {% endif %}<!-- End first iteration-->

                    <!-- Articles -->
                    {% unless first_page_first_post %}
                    {% include themes/jmblog-theme/components/article_highlight.html post=post %}
                    {% endunless %}

{% assign iter = null %}
{% assign first_page_first_post = false %}               
{% endfor %}
                </div><!-- End articles list -->

                {% include themes/jmblog-theme/components/pagination_links.html %}

            </div><!-- end left column -->

            <!-- Right side column -- Author details -->
            <div class="column">
                <h2 class="title is-3 is-uppercase">The Author</h2>
                {% include themes/jmblog-theme/components/author.html sidebar=true %}
            </div>

        </div><!-- End columns container -->

    </section>

</div>