<section class="courses-style1-area">
<div class="layer-outer" style="background-image:url({{ asset('front/assets/images/pattern/courses-bg.png') }});"></div>
<div class="container">
<div class="sec-title text-center">
<div class="big-title"><h2>{{ 'app.service.popular_servies'|trans }}</h2></div>
<div class="border-box">
<span class="linetop"></span>
<span class="linebottom"></span>
</div>
</div>
<div class="row">
{% for service in services %}
<!--Start Single courses Style1-->
<div class="col-xl-3 col-lg-6 col-md-6">
<div class="single-courses-style1">
<div class="img-holder">
<img src="{{ asset(article_images_directory ~ '/' ~ service.image) }}" alt="{{ service.title }}">
</div>
<div class="text-holder">
<h3><a href="{{ path('front_service_show', { id : service.id }) }}">{{ service.title }}</a></h3>
<p>{{ service.text|nl2br }}</p>
<div class="button">
<a class="btn-one" href="{{ path('front_service_show', { id : service.id }) }}">
<span class="txt">{{ 'app.article.see_more'|trans }}</span>
</a>
<a class="btn-one" data-toggle="modal" data-target="#bookingModal" data-service="{{ service.title }}" data-service-id="service-{{ service.id }}">
<span class="txt">{{ 'app.booking.form.submit'|trans }}</span> <i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
<!--End Single courses Style1-->
{% endfor %}
</div>
<div class="row">
<div class="col-xl-12">
{% if pagination is not defined or pagination == true %}
<!-- services pagination area start-->
{{ knp_pagination_render(services) }}
<!-- services pagination area end-->
{% else %}
<div class="all-portfolio-button text-center">
<a class="btn-one" href="{{ path('front_service_index', {'type': 'horse'}) }}">
<span class="txt">{{ 'app.gallery.view_more'|trans }}</span>
</a>
</div>
{% endif %}
</div>
</div>
</div>
</section>