{% extends 'App::layout_blog.html.twig' %}

{% block title %}{{ section.title }}{% endblock %}
{% block og_title %}{{ section.title }}{% endblock %}


{% block description %}{{ section.body }}{% endblock %}
{% block og_description %}{{ section.body }}{% endblock %}
{% block og_url %}https://www.rueduprof.com/blog/category/{{ section.slug }}{% endblock %}
{% block og_image %}{% endblock %}


{% block article_date %}

{% endblock %}


{% block canonical %}<link rel="canonical" href="https://www.rueduprof.com/blog/category/{{ section.slug }}" />{% endblock %}

{% block amphtml %}{% endblock %}

{% block snippet_json %}
<script type="application/ld+json">
{
  "@context" : "http://schema.org",
  "@type": "CollectionPage",
  "@id": "{{ app.request.getSchemeAndHttpHost() ~ path('app_blog_section', { 'slug':  section.slug }) }}#CollectionPage",
  "name": "{{ section.title }}",
  "url": "{{ app.request.getSchemeAndHttpHost() ~ path('app_blog_section', { 'slug':  section.slug }) }}",
  "description": "{{ section.body }}",
  "breadcrumb" : {
      "@type": "BreadcrumbList",
      "@id": "https://www.rueduprof.com/blog/category/{{ section.slug }}#breadcrumb",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "Blog Rueduprof",
        "item": "https://www.rueduprof.com/blog/"
      },
      {% set countBreads = 1 %}
      {% for key, breadcrumbMeta in breadcrumbsMeta %}
      {% set countBreads = countBreads + 1 %}
      {
        "@type": "ListItem",
        "position": {{countBreads}},
        "name": "{{ breadcrumbMeta.title }}",
        "item": "https://www.rueduprof.com/blog/category/{{ breadcrumbMeta.slug }}"
      }{% if (breadcrumbsMeta|length - 1) != key %},{% endif %}
      {% endfor %}
      ]
  },
   {% set countSections = section.sections|length %}
  {% if countSections > 0 %}
  "hasPart": [
    {% for key, section in section.sections %}
    {
        "@type": "CollectionPage",
        "name": "{{ section.title }}",
        "url": "{{ app.request.getSchemeAndHttpHost() ~ path('app_blog_section', { 'slug':  section.slug }) }}#CollectionPage",
        "description": "{{ section.body }}"
    }{% if (countSections - 1) != key %},{% endif %}
    {% endfor %}
  ],
  {% endif %}
  "mainEntity": {
      "@type": ["ItemList", "CreativeWork"],
      "name": "{{ section.title }}",
      "description": "{{ section.body }}",
      "itemListOrder": "https://schema.org/ItemListOrderAscending",
      "numberOfItems": {{ blogs|length }},
      "itemListElement": [
        {% for key, item in blogs %}
        {
          "@type": "BlogPosting",
          "name": "{{ item.title }}",
          "description": "{{ item.description }}",
          "url": "{{ app.request.getSchemeAndHttpHost() ~ path('app_blog_show', { 'slug': item.slug }) }}",
          "datePublished": "{{ item.created|date('Y-m-d') }}",
          "dateModified": "{{ item.modified|date('Y-m-d') }}"
        }{% if (blogs|length - 1) != key %},{% endif %}
        {% endfor %}
      ]
  }
}
</script>
{% endblock %}

{% block stylesheet %}

    <style>
    .video-container {
      position: relative;
      padding-bottom: 56.25%;
      padding-top: 30px;
      height: 0;
      overflow: hidden;
    }

    .video-container iframe,  
    .video-container object,  
    .video-container embed {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    @media screen and (max-width: 600px) {

        p {
          font-size: 13px;
          line-height: 18px;
        }
        br {
           display: block;
           margin: 0px 0;
        }
    }


.btn-amazon {
/*formatting goes here*/
  color: #000;
  font-weight:800;
  background-color: #ff9900;
  border-color: #ff9900;
}
.btn-amazon:active{
  /*formatting goes here*/
  color: #000;
  font-weight:800;
  background-color: #ff9900;
  border-color: #ff9900;
}

.btn-amazon:hover{
  /*formatting goes here*/
  color: #353b48;
  font-weight:800;
  background-color: #fbc531;
  border-color: #fbc531;
}

.btn-amazon:focus{
  /*formatting goes here*/
  color: #000;
  font-weight:800;
  background-color: #ff9900;
  border-color: #ff9900;
}
    </style>

{% endblock %} 


{% block body %}
       

    <div class="img-cover img-cover-purple" style="background-image: url('/img/background_blue_v0011.jpg')">
        <div class="container p-t-b-50 m-t-0">
            <div class="row text-center">
                <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1">
                    <h1 class="no-m m-b-15 font-thin" style="color: white;font-size: 24px;">{{ section.title }}</h1>

                </div>
            </div>
        </div>
    </div>   



  <div class="p-t-b-10 b-b-b-l">
    <div class="container">
      <div class="row">
        <div class="col-sm-6 m-t-b-10">
          <ol class="breadcrumb no-p-r-l no-m no-bg no-p">
            <li><a  href="{{ path('app_blog_show_index') }}">Blog</a></li>
            
            {% for breadcrumb in breadcrumbs %}

              <li><a href="{{ path('app_blog_section', { 'slug':  breadcrumb.slug }) }}">{{ breadcrumb.title }}</a></li>

            {% endfor %}


          </ol>

        </div>
                <div class="col-sm-6 text-right m-t-b-10">
                     <strong>{{ blogs|length }}</strong> articles en base
                </div>
      </div>
    </div>
  </div>




    <div class="content-padding"  style="background-color: #ffffff;">
        <div class="container">
            <div class="row">



                <div class="col-md-8">

{% for item in blogs %}

                  
                      
                          <div>
                  <div class="row">
                      <div class="col-xs-12">
                          <div class="m-b-10 font-montserrat">
                                            {% if item.section %}
                                                <span class="label label-info  h3 no-m label-rounded label-md">{{ item.section.title }}</span>
                                            {% else %}
                                  <span class="label label-warning  h3 no-m label-rounded label-md">Article</span>
                                            {% endif %}

                              <span class="inline-block m-r-l-10"> by <a>Team RueduProf</a></span> 
                              <span class="text-muted">Publié <time class="timeago" datetime="{{ item.created|date }}"></time></span>
                          </div>
                          <div>
                              <h2 class="no-m m-b-10" style="font-family: 'Roboto', sans-serif;font-weight:800;color:#212121;font-size: 30px;line-height:25px;"><a href="{{ app.request.getSchemeAndHttpHost() ~ path('app_blog_show', { 'slug': item.slug }) }}"  title="{{ item.title }}" style="font-size: 24px;">{{ item.title }}</a></h2>
                          </div>
                      </div>
                  </div>
                  <div class="row">
                      <div class="col-sm-6">
                                        <a href="{{ app.request.getSchemeAndHttpHost() ~ path('app_blog_show', { 'slug': item.slug }) }}" title="{{ item.title }}">
                               <img src="{{ item.thumbnail }}" class="img-responsive" alt="{{ item.title }}">
                                        </a>
                      </div>
                      <div class="col-sm-6"> 
                          <p class="no-m text-lg m-b-20">




                            {% if item.description  |length > 50 %}

                              {% autoescape %}
                                  {{ item.description  |slice(0, 350)  ~ '[...]' | raw  | nl2br }}
                                {% endautoescape %}

                            {% else %}

                              {% autoescape %}
                                  {{ item.description | raw  | nl2br }}
                                {% endautoescape %}

                            {% endif %}

                          </p>
                          <div class="row">
                              <div class="col-xs-6">

                                                  <!-- Your like button code -->

                              <div class="fb-like" data-href="{{ app.request.getSchemeAndHttpHost() ~ path('app_blog_show', { 'slug': item.slug }) }}" data-layout="button_count" data-action="like" data-size="small" data-show-faces="false" data-share="true"></div>

                                            <!--

                                  <a class="btn btn-default btn-rounded btn-icon">
                                      <i class="fa fa-facebook"></i>
                                  </a>
                                  <a class="btn btn-default btn-rounded btn-icon">
                                      <i class="fa fa-twitter"></i>
                                  </a>
                                  <a class="btn btn-default btn-rounded btn-icon">
                                      <i class="fa fa-linkedin"></i>
                                  </a>

                                            -->

                              </div>
                              <div class="col-xs-6 text-right">
                                  <div class="m-t-5">
                                      <a class="inline-block m-r-3" href="{{ app.request.getSchemeAndHttpHost() ~ path('app_blog_show', { 'slug': item.slug }) }}">
                                          <i class="fa fa-comment-o"></i> {{ item.comments|length }}
                                      </a>
  
                                  </div>
                              </div>

                          </div>
                      </div>
                  </div>

              </div>

                            <hr class="m-t-b-50"/>
        
                    

            {% endfor %}

                </div>



                <div class="col-md-4">


                    <div class="p-30 bg-lightgrey xs-p-15">
    <div class="subheading text-muted m-b-10">Catégorie</div>
    <div>


                            <ul class="list-unstyled">
                                {% for section in sections %}
                                    <li class="m-t-10 m-b-5"><a href="{{ path('app_blog_section', { 'slug': section.slug }) }}"><i class="fa fa-fw fa-folder-open-o"></i> {{ section.title }}</a></li>

                                    {% for sectionChilds in section.sections %}
                                        <li class="m-b-5 m-l-10"><a href="{{ path('app_blog_section', { 'slug': sectionChilds.slug }) }}"><i class="fa fa-angle-double-right" aria-hidden="true"></i> {{ sectionChilds.title }}</a></li>

                                        {% for sectionChilds in sectionChilds.sections %}
                                            <li class="m-b-5 m-l-20"><a href="{{ path('app_blog_section', { 'slug': sectionChilds.slug }) }}"><i class="fa fa-angle-double-right" aria-hidden="true"></i> {{ sectionChilds.title }}</a></li>
                                        {% endfor %}

                                    {% endfor %}
                                    <hr />

                                {% endfor %}
 
                            </ul>

    </div>





</div>
                </div>






            </div>
        </div>
    </div>


  <div>
    <div class="container">
        <div class="row">
            <div class="col-md-12">




<div class="row m-t-50">
  <div class="col-xs-6">

    <!-- TrustBox widget - Review Collector --> 
    <div class="trustpilot-widget" data-locale="fr-FR" data-template-id="56278e9abfbbba0bdcd568bc" data-businessunit-id="5c756ccae1c92400017630b9" data-style-height="52px" data-style-width="100%"> <a href="https://fr.trustpilot.com/review/rueduprof.com" target="_blank" rel="noopener">Trustpilot</a> </div> 
    <!-- End TrustBox widget -->
    
</div>
<div class="col-xs-6">

    <!-- TrustBox widget - Micro Review Count --> 
    <div class="trustpilot-widget" data-locale="fr-FR" data-template-id="5419b6a8b0d04a076446a9ad" data-businessunit-id="5c756ccae1c92400017630b9" data-style-height="24px" data-style-width="100%" data-theme="light"> <a href="https://fr.trustpilot.com/review/rueduprof.com" target="_blank" rel="noopener">Trustpilot</a> </div> 
    <!-- End TrustBox widget -->
  </div>
</div>






<br />





            </div>
        </div>
    </div>
</div>


{% endblock body %}

{% block javascripts %}


<!-- TrustBox script --> 
<script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script> <!-- End TrustBox script -->

  <script>
jQuery(document).ready(function() {
  jQuery(".timeago").timeago();
});

  </script>
{% endblock %}