{% extends "base.twig" %}

{% block content %}


<section class="hero-page bg-dark-arrows">
    <div class="container">
        <h1 class="hero-page__main-title text-left text-align-left text-uppercase">News</h1>
        <p class="hero-page__subtitle text-left h2">And updates</p>
    </div>

</section>
<section class="page-content">
    <div class="container page-content__container">
        <div class="row">
            {% if isFirstPage %}
                {% for post in posts|slice(0,3) %}
            <div class="col-12">
                <article class="card-first">
                    <div class="card-first__header img-play-button">
                        <a href="{{ post.link }}" class="card-first__img-wrapper">
                            <img class="card-first__img" src="{{ post.thumbnail.src }}" alt="alt">
                            {% if post.has_video %}                            
                                <div class="play-icon">
                                    <svg class="arrow-left"><use href="{{ site.theme.link }}/frontend/img/icons.svg#play-icon"></use></svg>
                                    {# <img src="{{ site.theme.link }}/frontend/img/play-icon.svg" /></div> #}
                                </div>
                            {% endif %} 
                            {% if post.is_new_update %}
                                <div class="card__label card-first__label">NEW UPDATE</div>
                            {% endif %} 
                        </a>
                    </div>
                    <div class="card-first__content text-align-left">
                        <time datetime="2020-12-11">{{ post.post_date|date("F d Y") }}</time>
                        <a href="{{ post.link }}"><h2 class="card-first__title">{{ post.title }}</h2></a>
                        <p>{{ post.preview.length(85).read_more('') }}</p>
                        <a href="{{ post.link }}" class="card-first__link btn btn--primary small text-uppercase text-italic">Read more</a>
                    </div>
                </article>
            </div>
                {% endfor %}
            {% endif %}
        </div>
        <div class="row">
            {% for post in posts %}
                {% if (not isFirstPage or loop.index > 3) %}
            <div class="col-12 col-sm-6 col-md-4">
                <article class="card card-dated">
                    <div class="card__header img-play-button">
                        <a href="{{ post.link }}">
                            <img class="card__img" src="{{ post.thumbnail.src|resize(600, 245) }}" alt="alt">
                            {% if post.has_video %}                            
                                <div class="play-icon">
                                    <svg class="arrow-left"><use href="{{ site.theme.link }}/frontend/img/icons.svg#play-icon"></use></svg>
                                </div>
                            {% endif %} 
                        </a>
                        {% if post.is_new_update %}
                            <div class="card__label">NEW UPDATE</div>
                        {% endif %} 
                    </div>
                    <div class="card__content text-align-left">
                        <a href="{{ post.link }}"><h3 class="card__title">{{ post.title }}</h3></a>
                        <div class="card-dated__footer">
                            <time datetime="2020-12-11">{{ post.post_date|date("F d Y") }}</time>
                            <a href="{{ post.link }}" class="card__link btn btn--blank small text-uppercase">Read more</a>
                        </div>
                    </div>
                </article>
            </div>
                {% endif %}
            {% endfor %}
        </div>
        <div class="row">

            {% include "templates/partials/pagination.twig" %}

        </div>
    </div>
</section>
        
{% include 'templates/partials/newsletter-static.twig' %}

{% endblock %}