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

{%block title%} {{section5.title}} | {{parent()}} {%endblock%}

{%block body%}
<div class="wrapper">
  <div class="page-header page-header-small mt-0" style="background: rgba(0,0,0,0.3)">
    <!-- antonio mardi 17 septembre 2019 -->
    <div class="page-header-image" data-parallax="true"
      style="background-image: url('{{asset(section5.getWebPath())}}');">
    </div>
    <!-- endmodif -->
    <div class="container pt-0 pb-0">
        {% 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>
    <div class="content-center">
      <div class="row">
        <div class="col-md-8 ml-auto mr-auto text-center">
          <h2 class="title" style="font-size: 40px; font-weight: 700">
            {{section5.title}}
          </h2>
        </div>
      </div>
    </div>
  </div>
  <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 active">{{section5.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="main">
    <div class=" container">
        <div class="content-intro">
            <div class="d-flex align-items-bottom flex-wrap mb-1">
                <h2 class="mr-3">{%if section5.subtitle1 is not null%}{{section5.subtitle1 | raw}}{%endif%}</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-justify text-muted">
                      {%if section5.text1 is not null%}
                      {{section5.text1 | raw}}
                      {%endif%}
                    </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>
  <div class="main">
    <div class="container">
        <div class="d-flex align-items-bottom mb-2 flex-wrap">
            <h2 class="mr-3">What service have you need?</h2>
        </div>
        <div class="row">
          {%for cat in categories%}
          <div class="col-12 col-sm-6 col-md-3">
              <div class="d-flex flex-column mb-grid-gutter">
                  <a href="{{path('imax_services_subservice',{'slug': cat.slug})}}" class="link-gray font-size-4 category-hover">
                      <div class="frosted-glass-shadow">
                          <div class="rounded overflow-hidden">
                              <div class="picture">
                                  <div class="categories-block category-bg bg-category-diy" style="background-image:url('{{asset(cat.getWebPath())}}')"></div>
                              </div>
                              <div class="title">
                                  <h3>{{cat.title}}</h3>
                              </div>
                          </div>
                          <div class="shadow">
                              <img src="{{asset(cat.getWebPath())}}" alt="{{cat.title}}"/>
                          </div>
                      </div>
                  </a>
              </div>
          </div>
          {%endfor%}
        </div>
    </div>
  </div>
  <!-- ***OUR TEAM***
        ******************** -->
  <div class="container">
    <div class="row">
      <div class="col-md-6 mt-1">
          <h2 class="title">Our jobeurs are to your service</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-4 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>
 <!-- ******* Content *******
      ********************************** -->
  {% if is_granted('IS_AUTHENTICATED_FULLY') == 0 %}
  <hr>
  <div class="ypj-fluid-container">
      <div class="my-5">
          <div class="bottom-long-text text-justify">
            <h3>
                {%if section5.subtitle2 is not null%}{{section5.subtitle2}}{%endif%}
            </h3>
            <div class="col-md-8">
              {%if section5.img2 is not null%}
              <img src="{{asset(section5.img2)}}" alt="{{section5.title}}" width="100%" height="100%">
              {%else%}
              {{section5.img2 | raw}}
              {%endif%}
            </div>
            <p>
                {%if section5.text2 is not null%}{{section5.text2 | raw}}{%endif%}
            </p>
            <h3>
                {%if section5.subtitle3 is not null%}{{section5.subtitle3}}{%endif%}
            </h3>
            <div class="col-md-8">
              {%if section5.img3 is not null%}
              <img src="{{asset(section5.img3)}}" alt="{{section5.title}}" width="100%" height="100%">
              {%else%}
              {{section5.img3 | raw}}
              {%endif%}
            </div>
            <p>
                {%if section5.text3 is not null%}{{section5.text3|raw}}{%endif%}
            </p>
            <h3>
                {%if section5.subtitle4 is not null%} {{section5.subtitle4}}{%endif%}
            </h3>
            <div class="col-md-8">
              {%if section5.img4 is not null%}
              <img src="{{asset(section5.img4)}}" alt="{{section5.title}}" width="100%" height="100%">
              {%else%}
              {{section5.img4 | raw}}
              {%endif%}
            </div>
            <p>
              {%if section5.text4 is not null%}{{section5.text4 | raw}}{%endif%}
            </p>
          </div>
      </div>
  </div>
  {% endif %}
</div>
{%endblock%}