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

{%block title%} Service {{service.title}} | {{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">
          	{%if service.service is not null%}
          	<a class="link-gray" href="{{path('imax_services_subservice',{'slug': service.service.slug})}}">{{service.service.title}}</a>
          	{%else%}
          		{%if service.supService.service is not null%}
          		<li class="breadcrumb-item">
          			<a class="link-gray" href="{{path('imax_services_subservice',{'slug': service.supService.service.slug})}}">{{service.supService.service.title}}</a>
          		</li>
          		<li class="breadcrumb-item">
          			<a class="link-gray" href="{{path('imax_services_sub_subservice',{'slug': service.supService.slug,'s_slug': service.supService.service.slug})}}">{{service.supService.title}}</a>
          		</li>
          		{%else%}
          		<li class="breadcrumb-item">
          			<a class="link-gray" href="{{path('imax_services_subservice',{'slug': service.supService.slug})}}">{{service.supService.title}}</a>
          		</li>
          		{%endif%}
          	{%endif%}
          </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>
	        {%if service.supService is not null%}
	        <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>
	        {%endif%}
	    </div>
	</div>
	{%if service.supService is not null%}
    <div class="mt-3 mb-4">
        <a class="btn btn-green btn-lg btn-break btn-service-cta" href="{{path('imax_site_contact')}}">
        	{{service.btn1}}
        </a>
    </div>
    {%endif%}
    <div>
        {%if service.supService is null%}
        <h2 class="mb-3">{{service.serviceType}}</h2>
        <div class="service-items d-flex flex-wrap"></div>
        {%endif%}
        {%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_sub_subservice1',{'slug': entity.slug, 's_slug1': entity.supService.service.slug, 's_slug2': entity.supService.slug})}}{%endif%}">{{entity.title}}</a>
        {%endfor%}
    </div>
</div>
<!-- ***OUR TEAM***
     ******************** -->
<div class="container">
<div class="row">
  <div class="col-md-12">
      <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%}