{% extends "base.twig" %}

{% block content %}
<h1 class="articles__title text-align-center">Articles</h1>
<div class="articles">
    <div class="container">
        <div class="row">
            {% for post in posts %}
                <div class="col-md-6">
                    <a href="{{post.link}}" class="articles__cards">
                        <div class="row no-gutters">
                            <div class="col-lg-6">
                               
                                    <img class="articles__image" src="{{ post.thumbnail.src('19x10_medium') }}" alt="">
                              
                            </div>
                            <div class="col-lg-6">
                                <div class="articles__info">
                                 
                                    <h2 href="{{post.link}}"  class="articles__headline">{{post.title}}</h2>
                 
                                    <p class="articles__text">{{ post.preview.length(50).read_more('') }}</p>
                                    <div class="articles__info-details">
                                        <h6 class="articles__date">{{post.date}}</h6>
                                        <span href="{{post.link}}" class="articles__link text-uppercase">Read more</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            {% endfor %}
        </div>
   
    {% if posts.pagination.pages is not empty %}
        <div class="articles__pagination">
            {% if posts.pagination.prev %}
                <a href="{{posts.pagination.prev.link}}">
                    <div class="articles-arrows__left">
                        <svg class="icon-arrow-left">
                            <use xlink:href="{{site.theme.link}}/frontend/icons/icons.svg#icon-arrow-left"></use>
                        </svg>
                    </div>
                </a>
            {% endif %}

            {% for page in posts.pagination.pages %}
                {% if page.link %}
                    <a href="{{page.link}}" class="articles__page">{{page.title}}</a>
                {% else %}
                    <span class="articles__page articles__page--active">{{page.title}}</span>
                {% endif %}
            {% endfor %}

            {% if posts.pagination.next %}
                <a href="{{posts.pagination.next.link}}">
                    <div class="articles-arrows__right">
                        <svg class="icon-arrow-right">
                            <use xlink:href="{{site.theme.link}}/frontend/icons/icons.svg#icon-arrow-right"></use>
                        </svg>
                    </div>
                </a>
            {% endif %}
        </div>
    {% endif %}
</div>


{% endblock %}