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

{% block title %} Home | {{ parent() }} {% endblock %}

{% block body %}
<div class="bg-cover" style="background-image: url('{{asset(section6.getWebPath())}}'); background-size: cover; background-position: 50% center; height: 620px">
  {% if app.request.hasPreviousSession %}
  <div style="display: block; max-width: 1053px; margin: 0 auto">
      {% for type, messages in app.session.flashbag.all %}
          {% for message in messages %}
              <div class="alert alert-{{type}} alert-dismissable">
                  <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                  {{message|raw}}
              </div>
          {% endfor %}
      {% endfor %}
  </div>
  {% endif %}
</div>
<div class="section section-about-us mt-4">
  <div class="container">
      <div class="row">
          <div class="col-md-8 ml-auto mr-auto text-center">
              <h2 class="title">Who we are?</h2>
              <h5 class="">The laboratory 646-06 allows to reinvent the mobile networks to have a solution and maximum exploitation. </h5>
          </div>
      </div>
  </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 pb-0">
  <div class=" container">
    <div class="row d-flex align-items-end">
      <div class="col-lg-6 col-md-8">
        <div class="mb-0">
            <h2 class="mr-3">What service have you need ?</h2>
        </div>
        <p class="text-justify text-muted">
          For every situation, find the beneficiary whose expertises meet your expectation and your level of requirement. 
        </p>
      </div>
    </div>   
  </div>
</div>
  <div class="main">
    <div class="container">
      <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 pt-3 pb-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" style="max-height: 125px">
                            {%else%}
                            <img class="img img-raised" src="{{asset('images/avatar.png')}}" width="100%" height="125px" style="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 py-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>
  <!-- ********PARTNERS******** 
       ********************************* -->
  <div class="py-1 bg-partner border-top">
      <div class="container text-center medias d-flex justify-content-between align-items-center flex-wrap">
          {%for partner in partners %}  
              {%if partner.src is not null%}
                <img src="{{asset(partner.getThumbPath()) | imagine_filter('300x200')}}" height="60px">
              {%else%}
                {{partner.svg | raw}}
              {%endif%}
          {%endfor%}
      </div>
  </div>
  <!-- **********SECTION 1******** 
       ************************************* -->
  <div class="pt-4 border-top">
      <div class="container text-justify">
          <h2 class="font-weight-bold mb-4">The service between individuals in all serenity
          </h2>
          <h3 class="font-size-5">
              {%if section6.img1 is not null%} {{section1.img1 | raw}} {%endif%}
  	        <span>
  	            {%if section6.subtitle1 is not null%} {{section6.subtitle1 | raw}} {%endif%}
  	        </span>
          </h3>
          <div> 
              <p class="text-muted">
                  {%if section6.text1 is not null%} {{section6.text1 | raw}} {%endif%}
              </p>
          </div>
          <div class="row">
              <div class="col-md-6 mt-2">
                  <h3 class="font-size-5">
                      {%if section6.img2 is not null%} {{section6.img2 | raw}} {%endif%}
                      <span>{%if section6.subtitle2 is not null%} {{section6.subtitle2 | raw}} {%endif%}</span>
                  </h3>
                  <div>
                      <p class="text-muted text-align-justify">
                          {%if section6.text2 is not null%} {{section1.text2 | raw}} {%endif%}
                      </p>
                  </div>
              </div>
              <div class="col-md-6 mt-2">
                  <h3 class="font-size-5">
                      {%if section6.img3 is not null%} {{section6.img3 | raw}} {%endif%}
                      <span>{%if section6.subtitle3 is not null%} {{section6.subtitle3 | raw}} {%endif%}</span>
                  </h3>
                  <div>
                    <p class="text-muted text-align-justify">
                        {%if section6.text3 is not null%} {{section6.text3 | raw}} {%endif%}
                    </p>
                  </div>
              </div>
          </div>
          <h3 class="font-size-5">
              {%if section6.img4 is not null%} {{section1.img4 | raw}} {%endif%}
            <span>
                {%if section6.subtitle4 is not null%} {{section6.subtitle4 | raw}} {%endif%}
            </span>
          </h3>
          <div> 
              <p class="text-muted text-align-justify">
                  {%if section6.text4 is not null%} {{section6.text4 | raw}} {%endif%}
              </p>
          </div>
      </div>
</div>
{% endblock %}
{%block javascripts%}
<script type="text/javascript">
  $('.tlt').textillate({
    selector: '.texts',
    loop: false,
    minDisplayTime: 2000,
      initialDelay: 0,
    autoStart: true,
    inEffects: [],
    outEffects: [ 'hinge' ],
    // in animation settings.
    in: {
      effect: 'fadeInLeftBig',
      delayScale: 1.5,
      delay: 50,
      sync: false,
      shuffle: false,
      reverse: false,
      callback: function () {}
    },
    // out animation settings.
    out: {
      effect: 'hinge',
      delayScale: 1.5,
      delay: 50,
      sync: false,
      shuffle: false,
      reverse: false,
      callback: function () {}
    },
    // callback that executes once textillate has finished
    callback: function () {},
    type: 'char'
  });
</script>
{%endblock%}