{% extends 'layouts/fullwidth.tpl' %}

{% block PageHeader %}
    <div class="page-head-tile">
        <div class="container">
            <div class="page-title">
                <span class="section-title"><strong>News</strong></span>
            </div>
        </div>
    </div>
{% endblock %}

{% block Content %}
    {% paginate getNews(limit = 15, paginate = true) as pageInfo, newsList %}
    <div class="container">
        <div class="posts row">
        {% for n in newsList %}
            <div class="col-12 col-md-4 mb-5">
                <a class="d-block h-100 link-decoration" href="{{ n.permalink }}">
                    <div class="card h-100" style="">
                        <img src="{{ n.thumbnail_R }}" class="card-img-top ratio-16-10" />
                        <div class="card-body">
                            <h5 class="card-title">{{ n.title }}</h5>
                            <p class="card-text">{{ n.subtitle ?? n.body }}</p>
                            <!--<a href="#" class="btn btn-primary">Go somewhere</a>-->
                        </div>
                    </div>
                </a>
            </div>
        {% endfor %}
        </div>
        <!-- /.posts -->

        {% if ((pageInfo.getPrevUrls(1))|length) == 1 or ((pageInfo.getNextUrls(1))|length) == 1 %}
        <div class="page-counter pt-3">

            <!-- GO TO FIRST PAGE     -->

            <a {% if pageInfo.prevUrl and ((pageInfo.getPrevUrls(2))|length) > 1 %} href="{{ pageInfo.firstUrl }}" {% endif %}>
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-skip-end-circle-fill mt-1" viewBox="0 0 20 20">
                    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM9.71 5.093 7 7.028V5.5a.5.5 0 0 0-1 0v5a.5.5 0 0 0 1 0V8.972l2.71 1.935a.5.5 0 0 0 .79-.407v-5a.5.5 0 0 0-.79-.407z"/>
                </svg>
            </a>
            

            <!-- GO TO PREVIOUS PAGE -->

            
            <a {% if pageInfo.prevUrl %} href="{{ pageInfo.prevUrl }}" {% endif %}>
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-arrow-left-circle-fill mt-1" viewBox="0 0 20 20">
                    <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.5 7.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z"/>
                </svg>
            </a>
            

            <!-- PREVIOUS PAGE/PAGES -->

            {% if ((pageInfo.getNextUrls(3))|length) == 0 %}
                {% for page, url in pageInfo.getPrevUrls(3) %}
                    <a style="padding-top: 4px" href="{{ url }}">{{ page }}</a>
                {% endfor %}
            {% elseif ((pageInfo.getNextUrls(3))|length) == 1 %}
                {% for page, url in pageInfo.getPrevUrls(2) %}
                    <a style="padding-top: 4px" href="{{ url }}">{{ page }}</a>
                {% endfor %}
            {# elseif ((pageInfo.getNextUrls(3))|length) == 2 #}
                {# for page, url in pageInfo.getPrevUrls(2) #}
                    <!-- <a style="padding-top: 4px" href="{{ url }}">{{ page }}</a> -->
                {# endfor #}
            {% else %}
                {% for page, url in pageInfo.getPrevUrls(1) %}
                    <a style="padding-top: 4px" href="{{ url }}">{{ page }}</a>
                {% endfor %} 
            {% endif %}

            <!-- CURRENT PAGE -->

            <span class="current">
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-circle-fill mt-1" viewBox="0 0 20 20">
                    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                </svg>
            </span>

            <!-- NEXT PAGE/PAGES -->

            {% if ((pageInfo.getPrevUrls(2))|length) == 0 %}
                {% for page, url in pageInfo.getNextUrls(3) %}
                    <a style="padding-top: 4px" href="{{ url }}">{{ page }}</a>
                {% endfor %}
            {% else %}
                {% for page, url in pageInfo.getNextUrls(2) %}
                    <a style="padding-top: 4px" href="{{ url }}">{{ page }}</a>
                {% endfor %} 
            {% endif %}

            <!-- GO TO NEXT PAGE -->

            
            <a {% if pageInfo.nextUrl %} href="{{ pageInfo.nextUrl }}" {% endif %}>
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-arrow-right-circle-fill mt-1" viewBox="0 0 20 20">
                    <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/>
                </svg>
            </a>
            

            <!-- GO TO LAST PAGE -->

            <a {% if pageInfo.nextUrl and ((pageInfo.getNextUrls(2))|length) > 1 %} href="{{ pageInfo.lastUrl }}" {% endif %}>
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-skip-end-circle-fill mt-1" viewBox="0 0 20 20">
                    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407L9.5 8.972V10.5a.5.5 0 0 0 1 0v-5a.5.5 0 0 0-1 0v1.528L6.79 5.093z"/>
                </svg>
            </a>
            

        </div>
        {% endif %}
    </div> <!-- /.content -->
{% endblock %}