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

{%block title%} {{service.metaTitle}} | {{parent()}} {%endblock%}

{%block body%}
<div class="bg-gray">
  <div class="container">
      <ul class="breadcrumb mb-0 pl-0">
          <li class="breadcrumb-item">
              <a class="link-gray" href="{{ path('imax_site_homepage') }}">Home</a>
          </li>
          <li class="breadcrumb-item">
          	<a class="link-gray" href="{{path('imax_services_homepage')}}">Services</a>
          </li>
          <li class="breadcrumb-item active">
            {{service.title}}
          </li>
      </ul>
  </div>
</div>
<div class="section">
	<div class="about-description text-center">
	    <div class="features-3">
	        <div class="container">
	          <div class="row">
	                  <div class="col-md-4">
	                      <div class="info info-hover">
	                          <div class="icon icon-success icon-circle">
	                            {%if section1 is not null%}
	                            {{section1.img1 | raw}}
	                            {%endif%}
	                          </div>
	                          <h4 class="info-title">
	                            {%if section1 is not null%}
	                            {{section1.subtitle1}}
	                            {%endif%}
	                          </h4>
	                          <p class="description">
	                            {%if section1 is not null%}
	                            {{section1.text1}}
	                            {%endif%}
	                          </p>
	                      </div>
	                  </div>
	                  <div class="col-md-4">
	                      <div class="info info-hover">
	                          <div class="icon icon-info icon-circle">
	                            {%if section1 is not null%}
	                            {{section1.img2 | raw}}
	                            {%endif%}
	                          </div>
	                          <h4 class="info-title">
	                            {%if section1 is not null%}
	                            {{section1.subtitle2}}
	                            {%endif%}
	                          </h4>
	                          <p class="description">
	                            {%if section1 is not null%}
	                            {{section1.text2}}
	                            {%endif%}
	                          </p>
	                      </div>
	                  </div>
	                  <div class="col-md-4">
	                      <div class="info info-hover">
	                          <div class="icon icon-primary icon-circle">
	                            {%if section1 is not null%}
	                            {{section1.img3 | raw}}
	                            {%endif%}
	                          </div>
	                          <h4 class="info-title">
	                            {%if section1 is not null%}
	                            {{section1.subtitle3}}
	                            {%endif%}
	                          </h4>
	                          <p class="description">
	                            {%if section1 is not null%}
	                            {{section1.text3}}
	                            {%endif%}
	                          </p>
	                      </div>
	                  </div>
	              </div>
	        </div>
	    </div>
	</div>
</div>
<hr>
<div class="container">
	<div class="mt-4">
	    <div class="content-intro">
	        <div class="d-flex align-items-bottom flex-wrap">
	            <h2 class="mr-3">{{service.title}}</h2>
	        </div>
	        <div data-component="toggle" data-handle-outside="fase" data-toggle-classname="show-more-intro-wrapper--full">
	            <div class="show-more-intro-wrapper" data-toggelable="">
	                <p class="text-muted text-justify">{{service.description}}</p>
	                <button class="btn btn-show-more btn-blue-only-text font-size-2 font-size-sm-3 font-weight-bold" data-clickable="">Read more...</button>
	            </div>
	        </div>
	    </div>
	</div>
	<div class="my-3">
	    <h2 class="mb-3">{{service.serviceType}}</h2>
	    <div class="row">
	        {%if service.services.count > 0%}
	        {%for entity in service.services%}
	        <div class="col-12 col-sm-6 col-lg-3 mb-4 mb-lg-0">
	            <a class="link-gray category-hover" href="{{ path('imax_services_sub_subservice',{'s_slug': service.slug, 'slug': entity.slug}) }}">
	                <div class="frosted-glass-shadow">
	                    <div class="rounded overflow-hidden">
	                        <div class="picture">
	                            <div class="categories-block category-bg bg-category-diy1" style="background-image:url('{{ asset(entity.getWebPath()) }}')"></div>
	                        </div>
	                        <div class="title">
	                            <h2>{{entity.title}}</h2>
	                        </div>
	                    </div>
	                    <div class="shadow"><img alt="{{entity.title}}" src="{{ asset(entity.getWebPath()) }}"></div>
	                </div>
	            </a>
	            <div class="diy-service-list-items mt-3">
	                {%for subservice in entity.subservices%}
	                <p class="font-size-3 text-muted diy-service-list-item m-0 d-flex">
	                    <a class="link-gray text-decoration-none pt-2 pb-1 u-width-100" href="{%if is_granted('IS_AUTHENTICATED_FULLY')%}{{path('imax_site_contact')}}{%else%}{{path('imax_services_sub_subservice1',{'slug': subservice.slug, 's_slug1': subservice.supService.service.slug, 's_slug2': subservice.supService.slug})}}{%endif%}">{{subservice.title}}</a>
	                </p>
	                {%endfor%}
	            </div>
	        </div>
	        {%endfor%}
	        {%else%}
	        <div class="service-items d-flex flex-wrap"></div>
	        {%for entity in service.subservices%}
	        <a class="btn-service-item mr-2 mb-2" href="{%if is_granted('IS_AUTHENTICATED_FULLY')%}{{path('imax_site_contact')}}{%else%}{{path('imax_services_subservice',{'s_slug': entity.supService.slug, 'slug': entity.slug})}}{%endif%}">{{entity.title}}</a>
	        {%endfor%}
	        {%endif%}
	    </div>
	</div>
</div>
<!-- ***OUR TEAM***
     ******************** -->
<div class="container">
<div class="row">
  <div class="col-md-12 mt-1">
      <h2 class="title">{{service.ourJobeurs}}</h2>
  </div>
</div>
</div>
<div class="testimonials-1 section-image mt-2 py-5" style="background: rgba(0,0,0,0.1)">
  <div class="container">
      <div class="row mt-4">
          {%for teamlabo in teams%}
          <div class="col-md-4">
              <div class="card card-testimonial">
                  <div class="card-avatar">
                      <a href="">
                          {%if teamlabo.img is not null%}
                          <img class="img img-raised" src="{{asset(teamlabo.getWebPath())}}" width="100%" height="125px" max-height="125px">
                          {%else%}
                          <img class="img img-raised" src="{{asset('images/avatar.png')}}" width="100%" height="125px" max-height="125px">
                          {%endif%}
                      </a>
                  </div>
                  <div class="d-flex flex-column">
                      <div class="mt-2 font-size-1">
                          {%if teamlabo.icon is not null%}
                              {{teamlabo.icon | raw}}
                          {%endif%}
                      </div>
                  </div>
                  <div class="d-flex flex-column">
                      <div class="text-dark font-weight-medium mt-3">
                          {%if teamlabo.jobsFacts is not null%}
                              {{teamlabo.jobsFacts | raw}}
                          {%endif%}
                      </div>
                  </div>
                  <div class="card-body">
                      <p class="card-description">
                          {{teamlabo.persoDescription}}
                      </p>
                  </div>
                  <div class="icon icon-primary">
                      <i class="fa fa-quote-right"></i>
                  </div>
                  <div class="card-footer">
                      <h4 class="card-title">{{teamlabo.fullname}}</h4>
                      <p class="category">{{teamlabo.infoPersonal}}</p>
                  </div>
              </div>
          </div>
          {%endfor%}
      </div>
  </div>
</div>
<!-- *******ARTICLES********
	 *********************************** -->
<div class="main mt-3 mb-4">
<div class="container">
  <div class="section">
    <h2 class="title">Blog of service</h2>
    <div class="row">
      {%for article in lastArticles%}
      <div class="col-md-4 mt-3">
        <div class="card card-blog box-shadow">
          <div class="card-image">
            <a href="{{ path('imax_blog_read', {'cat_slug':article.category.slug, 'slug':article.slug}) }}">
              <img class="img rounded img-raised" src="{{asset(article.getThumbPath()) | imagine_filter('300x200')}}" width="100%">
            </a>
          </div>
          <div class="card-body">
            <a href="{{ path('imax_blog_by_category',{'slug': article.category.slug}) }}" class="category text-info">{{article.category.name}}</a>
            <h4 class="card-title">
              <a href="{{ path('imax_blog_read', {'cat_slug':article.category.slug, 'slug':article.slug}) }}" class="text-decoration-none">{{article.title}}</a>
            </h4>
            <p class="card-description text-justify" data-component="toggle" data-handle-outside="false" data-toggle-classname="show-more-intro-wrapper--full">
              {{article.subtitle}}
                <span class="show-more-intro-wrapper font-size-3" data-toggelable="">
                  <button class="btn btn-show-more btn-blue-only-text pb-1" data-clickable="">
                    Read more...
                  </button>
                </span>
            </p>
            <div class="author">
                <i class="fa fa-clock"></i> {{article.date | localizeddate('medium','none')}}
            </div>
            <p style="margin-bottom: 0.4rem"></p>
          </div>
        </div>
      </div>
      {%endfor%}
    </div>
  </div>
  <div class="d-block mt-4">
      <a href="{{ path('imax_blog_homepage') }}" class="font-size-4 text-info" style="font-weight: 600">See all articles <i class="fas fa-chevron-right pl-1 font-size-1"></i></a>
  </div>
</div>
</div>
<!-- ********* Fin article ********** 
   ******************************** -->
{%endblock%}