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

{% block title %} {{category.name}} : {{ parent() }} {% endblock %}

{% block body %}
<div class="container">
    <ul class="breadcrumb mb-0">
        <li class="breadcrumb-item">
            <a class="link-gray" href="{{path('imax_blog_homepage')}}">Blog</a>
        </li>
        <li class="breadcrumb-item active">{{category.name}}</li>
    </ul>
</div>
<div class="container pt-0 pb-0">
    {% 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 %}
</div>
<div class="py-3">
    <div class="container">
    	<h1 class="text-center my-3">Tricks and advice for the daily</h1>
        <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" 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 font-weight-bold" 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"><i class="fa fa-clock"></i> {{entity.date | localizeddate('medium','none')}}</time>
                                <p class="mt-3 font-size-3 mb-3">{{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>
</div>
{% endblock %}