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

{% block title %} Article et Service {% endblock %}

{% block content %}
    
    <div class="breadcrumb">
        <div class="breadcrumb-inner">
            <ul class="list-inline list-unstyled">
                <li class='active'><a href="#">Article et Service</a></li>
            </ul>
        </div>
    </div>
    
    <div class="body-content outer-top-vs" id="top-banner-and-menu">

        <div class="wide-banners outer-bottom-vs">

            <div class="row">
                {% for i in 0..leng %}

                    {% if articles[i] is defined %}
                        <div class="col-md-3 col-sm-3">
                            <div class="wide-banner cnt-strip">
                                <a href="{{ path('frontend_article_detail', {id:articles[i].getId()} ) }}">
                                    <div class="image"> 
                                        <img class="img-responsive" src="{{ asset('uploads/images/articles/' ~ articles[i].getImageDefault()) }}" alt="{{ articles[i].getTitre() }}">   
                                    </div>
                                </a>
                            
                            </div>
                            <br><br>
                        </div>
                    {% endif %}

                    {% if services[i] is defined %}
                        <div class="col-md-3 col-sm-3">
                            <div class="wide-banner cnt-strip">
                                <a href="{{ path('frontend_service_detail', {id:services[i].getId()} ) }}">
                                    <div class="image"> 
                                        <img class="img-responsive" src="{{ asset('uploads/images/services/' ~ services[i].getImageDefault()) }}" alt="{{ services[i].getTitre() }}">   
                                    </div>
                                </a>
                            
                            </div>
                            <br><br>
                        </div>
                    {% endif %}

                {% endfor %}
            </div>
            
        </div>


    </div>

{% endblock %}