{% extends "base-gray.html.twig" %}
  
{% block title %} {{article.title}} - Blog | {{ 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">
                <a class="link-gray" href="{{ path('imax_blog_by_category',{'slug': article.category.slug}) }}">{{article.category.name}}</a>
            </li>
            <li class="breadcrumb-item active">{{article.title}}</li>
        </ul>
        <!-- ******ALERTE****** -->
        {% 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 class="row">
            <div class="col-md-9" itemscope="" itemtype="">
                <div class="card mb-3">
                    <img alt="{{article.title}}" class="img-fluid" itemprop="image" src="{{asset(article.getThumbPath()) | imagine_filter('900x300')}}">
                    <div class="px-3">
                        <h1 class="mt-3" itemprop="name">{{article.title}}</h1>
                        <p class="font-size-4 font-weight-normal text-justify my-3">
                          {{article.subtitle}}
                        </p>
                        <p class="h5 text-slate font-weight-bold d-inline-block" itemprop="articleSection">{{article.category.name}}</p>
                        <span class="text-muted">—</span>
                        <span class="activity-time font-weight-medium font-size-3 d-inline-block">
                            {{ article.date | localizeddate('medium','none') }}
                        </span>
                        <hr>
                    </div>
                    <div class="px-3">
                        <div class="content-word fr-view font-size-3 text-justify" itemprop="articleBody">
                            {{article.content | raw}}
                        </div>
                    </div>
                </div>
                <h3 class="my-3">Similar articles</h3>
                <div class="row">
                    {%for entity in lastArticles%}
                    <div class="col-md-4">
                        <div class="card mb-3">
                            <a href="{{ path('imax_blog_read', {'cat_slug':entity.category.slug, 'slug':entity.slug}) }}">
                                <div style="background: url('{{asset(entity.getThumbPath()) | imagine_filter('300x200')}}') no-repeat;background-size: cover;background-position:center;position:relative;border-top-left-radius:4px;border-top-right-radius:4px;width:100%;height: 160px;">
                                    <div class="blog-header-post-content" style="height: 100%;text-align: center;">
                                        <div class="px-2" style="line-height: 160px;">
                                            <h4 class="h4 text-white font-size-3" style="display: inline-block;vertical-align: middle;line-height: 22px;">{{entity.title}}</h4>
                                        </div>
                                    </div>
                                </div>
                            </a>
                            <div class="p-3">{{entity.subtitle | truncate(75,'...')}}</div>
                            <div class="clearfix p-3">
                                <div class="float-left">
                                    <time class="activity-time"><i class="fa fa-clock"></i> {{entity.date | localizeddate('medium', 'none')}}</time>
                                </div>
                                <div class="float-right" style="padding-top:2px">
                                    <a href="{{ path('imax_blog_read', {'cat_slug':entity.category.slug, 'slug':entity.slug}) }}">Read more &gt;</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    {%endfor%}
                </div>
                <div class="my-3 text-center">
                    <a class="btn btn-light btn-lg" href="{{ path('imax_blog_homepage') }}">See all articles</a>
                </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 class="modal" id="modalBlogImg">
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <button aria-label="Fermer" class="close" data-dismiss="modal" type="button">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body text-center"><img alt="Image agrandie" class="img-fluid" src=""></div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}