{% extends "base-gray.html.twig" %}

{% block title %} Blog | {{ parent() }} {% endblock %}

{% block body %}
<div class="container">
{% if app.request.hasPreviousSession %}
    {% for type, messages in app.session.flashbag.all %}
        {% for message in messages %}
        <div class="al1">
            <div class="alert alert-{{ type }} alert-dismissable mb-0">
                <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                {{ message|raw }}
            </div>
        </div>
        {% endfor %}
    {% endfor %}
{% endif %}
	<h1 class="text-center my-5">Tricks and advice for the daily</h1>
    <div class="row mb-4">
    	{%if article is not null%}
        <div class="col-md-12">
            <a href="{{ path('imax_blog_read', {'cat_slug':article.category.slug, 'slug':article.slug}) }}">
                <div style="background: url('{{asset(article.getThumbPath()) | imagine_filter('720x480')}}') no-repeat;background-size: cover;background-position:center;height:450px;position:relative;border-radius:4px;">
                    <div class="blog-header-post-content">
                        <h2 class="h4 mt-3 px-2 font-size-5 text-center text-white">{{article.title}}</h2>
                        <div class="media mb-3">
                            <div class="media-body align-self-center">
                                <div class="font-size-3 pl-3 text-white text-justify">{{article.subtitle}}</div>
                            </div>
                            <div class="media-right align-self-center">
                                <i class="fa fa-chevron-right fa-2x text-white pr-2 pl-2"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        {%endif%}
    </div>
    <div class="my-4">
        <div class="row">
        	{%for cat in categories%}
            <div class="col-md-3 text-center mb-2">
                <a class="btn btn-lg btn-light btn-block " href="{{path('imax_blog_by_category',{'slug': cat.slug})}}">{{cat.name}}</a>
            </div>
            {%endfor%}
        </div>
    </div>
    <div class="row">
        <div class="col-md-9">
            {%for entity in articles%}
            <div class="card mb-3">
                <div class="blog-post">
                    <div class="blog-post-left">
                        <a href="{{ path('imax_blog_read', {'cat_slug':entity.category.slug, 'slug':entity.slug}) }}"><img alt="{{entity.title}}" class="blog-post-img" height="200" itemprop="image" src="{{asset(entity.getThumbPath()) | imagine_filter('300x200')}}" width="300"></a>
                    </div>
                    <div class="blog-post-right">
                        <div class="p-3">
                            <h2 class="h5 mt-2 mb-0">
                                <a class="text-dark" href="{{ path('imax_blog_read', {'cat_slug':entity.category.slug, 'slug':entity.slug}) }}">{{entity.title}}</a>
                            </h2>
                            <time class="activity-time font-size-2 d-inline-block mt-0">{{entity.date | localizeddate('medium','none')}}</time>
                            <p class="mt-3 font-size-3 mb-3 text-justify">{{entity.subtitle}}</p>
                        </div>
                    </div>
                </div>
            </div>
            {%endfor%}
            <div>
                {{ knp_pagination_render(articles) }}
            </div>
        </div>
        <div class="col-md-3">
            <div class="card mb-3 text-center">
                <div class="card-body">
                    <p class="h5 font-weight-normal mb-3 text-secondary">Need of help? Find someone to help you</p>
                    <a class="btn btn-info btn-break" href="{{path('imax_services_homepage')}}">Ask for a service</a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}