{% extends "layout.twig" %}

{% block content %}
<div class="plain-content">
    <div class="container">
        <div id="mainContent">
            <div class="col-12 uw-blog-col">

                {% set query = craft.entries().section('blogPost').limit(10) %}

                {% paginate query as pageInfo, posts %}

                {% for post in posts %}
                    <div class="row uw-blog-card">
                        {% if  post.image.one() %}
                        <div class="col-12 col-md-4 uw-blog-img px-0">
                            {% set image = post.image.one() %}
                            {% set thumb = {
                                mode: 'fit',
                                width: 500,
                            } %}
                            <a href="{{ post.getUrl() }}"><img src="{{ image.getUrl(thumb) }}" alt="{{ post.title }}"></a>
                        </div>
                        {% endif %}
                        <div class="col-12 col-md-8 px-0 pl-md-4 mt-4 mt-md-0 uw-blog-info">
                            <div class="row">
                                <div class="col-12">
                                    <div class="col-12 px-0"><h2><a href="{{ post.getUrl() }}">{{ post.title }}</a></h2></div>
                                    <div class="col-12 px-0 mt-3 mb-4">
                                        <div class="ub-blog-date">{{ post.postDate|date("d mm yy") }}</div>
                                        {% for tags in post.postTags.all() %}
                                            <a href="{{ url('blog/tags/' ~ tags.slug) }}" class="uw-blog-tag mr-1">{{ tags.title }}</a>
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                            <div class="mb-4">{{ post.summary }}</div>
                            <div class="d-flex"><a href="{{ post.getUrl() }}"><button>{{ 'Read more'|t }}</button></a></div>
                        </div>
                    </div>
                    <hr>
                {% endfor %}

                <div class="uw-pagination">
                    <div class="pagination-wrapper">
                        <div class="pagination">
                            <a class="prev page-numbers" href="{{ pageInfo.prevUrl }}">{{ 'Prev'|t }}</a>
                            {% for page, url in pageInfo.getPrevUrls(5) %}
                                <a class="page-numbers" href="{{ url }}">{{ page }}</a>
                            {% endfor %}
                            <span aria-current="page" class="page-numbers current">{{ pageInfo.currentPage }}</span>
                            {% for page, url in pageInfo.getNextUrls(5) %}
                                <a class="page-numbers" href="{{ url }}">{{ page }}</a>
                            {% endfor %}
                            <a class="next page-numbers" href="{{ pageInfo.nextUrl }}">{{ 'Next'|t }}</a>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
{% endblock %}