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

{% block title %}Les stages de préparation au brevet des collèges{% endblock %}
{% block og_title %}Les stages de préparation au brevet des collèges{% endblock %}


{% block description %}Découvrez les stages de préparation au brevet des collèges.{% endblock %}
{% block og_description %}Découvrez les stages de préparation au brevet des collèges.{% endblock %}

{% block og_url %}https://www.rueduprof.com{{ path('app_course_index', {'slug': 'brevet'}) }}{% endblock %}

{% block canonical %}https://www.rueduprof.com{{ path('app_course_index', {'slug': 'brevet'}) }}{% endblock %}

{% block stylesheets %}
<style>
    .avatar-fix {
   
        border-radius: 25px;
 
        width:180px;
        margin-bottom:10px;
    }
    .adcontent ul li {
      
        margin-bottom:-16px;
    }
</style>
{% endblock %} 

{% block fos_user_content %}
    {% spaceless %}


    <div class="simple-background-skill shadow">
        <div class="container p-t-b-20 m-t-60 text-center">
            <div class="row">
                <div class="col-md-12">
                    <h1 class="no-m m-b-15 font-thin">Les stages de préparation au brevet des collèges 2022</h1>
                    <div class="m-t-15 no-m text-white">Découvrez les stages de préparation de février 2022.</div>
                </div>
            </div>
        </div>
    </div>
  <!--
    <div class="container-fluid simple-background-skill-search">
        <div class="container">
            <div class="row">
                <div class="col-md-12 p-15" style="padding-top:15px;padding-bottom:0px;">
                    {{ form_start(form_search) }}

                    <div class="row">                         
                      <div class="col-sm-3 form-group">
                        {{ form_row(form_search.type, {'attr': {'class': 'form-control form-control-md'}}) }}
                      </div>
                      <div class="col-sm-2 form-group">
                        {{ form_row(form_search.exam, {'attr': {'value' : 'brevet', 'class': 'form-control form-control-md ui-select'}}) }}
                      </div>
                      <div class="col-sm-3 form-group">
                        {{ form_row(form_search.city, {'attr': {'class': 'form-control form-control-md', 'placeholder': 'Ville, code postal'}}) }}
                      </div>

                          <div class="col-sm-2 form-group">
                        {{ form_row(form_search.location, {'attr': {'class': 'form-control form-control-md ui-select'}}) }}
                      </div>
                      <div class="col-sm-2 form-group">
                        <button type="submit" class="btn btn-md btn-primary btn-call-to-action btn-block"><i class="fa fa-search"></i> Rechercher</button>
                      </div>
                    </div>
                  
                    {{ form_row(form_search.latitude) }}
                    {{ form_row(form_search.longitude) }}
                    {{ form_row(form_search.department) }}
                  
                  {{ form_end(form_search) }}
                  
                </div>
            </div>
        </div>
        <svg class="hero-crop" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 48">
            <path fill="#f4f4f4" fill-rule="evenodd" d="M0 0c194.22 23.31 345.236 37.383 453.045 42.218C539.007 46.073 627.992 48 720 48c265.097 0 505.097-16 720-48v48H0V0z"/>
        </svg>
    </div>
-->
    <div class="container xs-no-p-i">
        <div class="row xs-no-m-i">
            <div class="col-xs-12 xs-no-p-i">
                
                <div class="alert alert-info m-10" role="alert">
                    <div class="row">
                        <div class="col-md-9">
                            
                            <p class="m-t-5" style="font-size:16px;"><img width="30px" src="/images/customer-service.png" style="margin:10px;"/> <b> Besoin d'aide ?</b> Faites-vous accompagner par <b>un conseiller pédagogique</b> dans votre recherche.</p>
                        </div>
                        <div class="col-md-3 text-right">
                            
                            <a href="{{ path('app_consultant_ask') }}" class="btn btn-primary btn-call-to-action"><i class="fa fa-commenting-o" aria-hidden="true"></i> Contacter un conseiller</a>
                        </div>
                    </div>
                </div>
                <div class="text-center"><h2>Les <b>stages de préparation</b> au brevet des collèges</h2></div>
                {% for course in courses %}
                    <!-- START: Ticket item -->
                    <div class="panel panel-default" style="margin-left:10px;margin-right:10px;">
                        <div class="panel-body p-30">
                            <div class="row r-sm-table bg-white">
                                <div class="col-md-3 col-sm-cell text-center">
                                    <p><span style="font-size:14px;margin-top:10px;" class="label label-primary b-rad-100 label-line inline-block">{{ course.slotLimit }} élève{% if course.slotLimit  > 1 %}s{% endif %} max</span></p>
                                    
                                    {% if course.place == 'face-to-face' %}
                                        <img class="avatar-fix" alt="avatar" src="/images/classroom.png"/>
                                        <p><i class="fa fa-map-marker" aria-hidden="true"></i> {{ course.city }} ({{ course.postalCode }})</p>
                                    {% else %}
                                        <img class="avatar-fix" alt="avatar" src="/images/webcam.png"/>
                                        <p style="color:royalblue;"><i class="fa fa-video-camera" aria-hidden="true"></i> En ligne</p>
                                    {% endif %}
                                </div>
                          
                                <div class="col-md-6 col-sm-cell">
                                    <h3 class="h2_title" style="font-weight:600;">{{ course.title|e }}</h3><br />
                                    <div class="adcontent">{{ course.content | raw  | nl2br  }}</div>
                                   
                                        <ul>
                                            {% for  category in course.courseCategories %}
                                                <li>{{ category.category.name }} : {{ category.pricePerHour }} € / {{ category.duration }} heures</li>
                                            {% endfor %}
                                        </ul>
                                   
                                </div>
                                <div class="col-sm-3 col-sm-cell text-center mt-4">
                                    {% set total = 0 %}
                                    {% set duration = 0 %}
                                    {% for  category in course.courseCategories %}
                                        {% set total = total + category.pricePerHour %}
                                        {% set duration = duration + category.duration %}
                                    {% endfor %}
                                        
                                    <p style="font-size:18px;color:#00a8ff;"><i class="fa fa-calendar" aria-hidden="true"></i> Du <b>{{ course.dateStart|date('d/m/Y') }}</b> au <b>{{ course.dateEnd|date('d/m/Y') }}</b> inclus</p>                                                                       
                                    <div><a style="margin-top:10px;" class="btn btn-sm btn-block btn-primary btn-call-to-action" href="{{ path('app_course_show', {'slug': course.slug}) }}" ><i class="fa fa-envelope"></i> Réserver</a></div>
                                    <p style="font-size:16px;margin-top:10px;"><b>{{ total }}</b> € / {{ duration }} heures</p>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}


            </div>
        </div>
    </div>
    {% endspaceless %}
{% endblock fos_user_content %}

{% block javascripts %}
    {% spaceless %}  
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDgIqxWbmTk2jHfOaNYEXC73GsWjal1Osw&signed_in=true&libraries=places&callback=initAutocomplete"
        ></script>  
        <script type="text/javascript">

        </script>
    {% endspaceless %}
{% endblock %}