{% extends "base.twig" %}

{% block content %}
<h1 class="articles__title text-align-center">Frequently asked questions</h1>
<div class="articles">
    <div class="container">
        <div class="row">
            <ul class="articles-tags-list">
                <li class="{{ no_tag_selected ? "active" : "" }}">
                    <a href="{{ current_permalink }}">All questions</a>
                </li>

            {% for tag in tags_list %}
                <li class="{{tag["is_active"] ? "active" : ""}}">
                    <a href="?tag={{tag["slug"]}}">{{tag["name"]}}</a>
                </li>
             {% endfor %}   

                                                         
            </ul>
        </div>



        <div class="row">
        
            {% for post in posts %}
                <div class="col-md-12">
                    <a href="{{post.link}}" class="articles__cards articles__cards--faq">
                        
                            <div class="faq-image-col">
                                
                                    <img class="articles__image" src="{{ post.thumbnail.src('19x10_medium') }}" alt="">
                                
                            </div>
                            <div class="faq-text-col">
                         
                                 
                                    <h2 href="{{post.link}}"  class="articles__headline">{{post.title}}</h2>
                 
                                    

                     
                            </div>
                            <div class="faq-read-more-col">
                         
                                   
                                        <span class="articles__link ">Read more</span>
                                
                            </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 %}