{% extends 'base.html.twig' %}

{% set pageTitle = "blogs"|trans|title %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('styles/blog.css') }}">
{% endblock %}

{% set tags = getBlogTags(app.request) %}

{% block content %}
    {% include "components/_intro.html.twig" with {options: {
        title: "blogs_intro_title"|trans|title,
        skip: ".blog-wrapper",
        img: false,
        skip: false
    }} %}
    <div class="section-wrapper">
        {% include 'components/_blog-search.html.twig' %}
    </div>
    {% set page = app.request.get('page') %}
    {% set query = app.request.get('s') %}
    {% set tags = app.request.get('tags') %}
    {% set allBlogs = getBlogs({'page': page, 'query': query, 'tags': tags}, app.request) %}
    {% set mainBlog = allBlogs["mainBlog"] %}
    {% set blogs = allBlogs["blogs"] %}
    {% set pageCount = allBlogs["pageCount"] %}
    {% set search = app.request.get('s') %}
    {% set filterTags = app.request.get('tags') %}
    <div class="section-wrapper blog-wrapper">
        <div class="content-section blog">
            <div class="blog-content">
                {% if (mainBlog is not defined or not mainBlog) and (blogs|length) == 0 %}
                    <span class="blog-not-found not-found">{{"blog_not_found"|trans|capitalize}}</span>
                {% else %}
                    {% if mainBlog is defined and mainBlog %}
                        {% include 'components/_blog-item.html.twig' with {type: "main", blog: mainBlog} %}
                    {% endif %}
                    {% for blog in blogs %}
                        {% include 'components/_blog-item.html.twig' with {blog: blog} %}
                    {% endfor %}
                {% endif %}
            </div>
            <div class="blog-page-navigator">
                {% if not page %}{% set page = 1 %}{% endif %}
                {% set page = page|number_format %}
                {% if page != 1 %}
                    <a href="{{path('blog', {'s': search, 'tags': filterTags, 'page': page-1})}}" class="prev-button">{{"back"|trans|title}}</a>
                    <a href="{{path('blog', {'s': search, 'tags': filterTags, 'page':  page-1})}}" class="border-button big-button">0{{page-1}}</a>
                {% endif %}
                <div class="border-button big-button active">0{{page}}</div>
                {% if page != 9 and page < pageCount %}
                    <a href="{{path('blog', {'s': search, 'tags': filterTags, 'page':  page+1})}}" class="border-button big-button">0{{page+1}}</a>
                    <a href="{{path('blog', {'s': search, 'tags': filterTags, 'page': page+1})}}" class="next-button">{{"next"|trans|title}}</a>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock %}