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

{% block title %}Cours particuliers à {{ profile.city }} {% if profile and profile.department  %}({{ profile.department }}){% endif %}{% if profile and profile.firstname and profile.lastname  %} avec {{ profile.firstname }} {{ profile.lastname|first }}{% endif %}{% endblock %}

{% block og_title %}Cours particuliers à {{ profile.city }} {% if profile and profile.department  %}({{ profile.department }}) {% endif %}{% if profile and profile.firstname and profile.lastname  %} avec {{ profile.firstname }} {{ profile.lastname|first }}{% endif %}{% endblock %}

{% block description %}{% if profile.content %}{{ profile.content|striptags|replace({'\n':' ', '\r':' '}) |length > 350 ? profile.content|striptags|replace({'\n':' ', '\r':' '}) |slice(0, 350) ~ '...' : profile.content|striptags|replace({'\n':' ', '\r':' '})   }}{% else %}Annonces de Cours particuliers sur RueduProf.{% endif %}{% endblock %}

{% block og_description %}{% if profile.content %}{{ profile.content|striptags|replace({'\n':' ', '\r':' '}) |length > 350 ? profile.content|striptags|replace({'\n':' ', '\r':' '}) |slice(0, 350) ~ '...' : profile.content|striptags|replace({'\n':' ', '\r':' '})   }}{% else %}Annonces de Cours particuliers sur RueduProf.{% endif %}{% endblock %}

{% block og_url %}https://www.rueduprof.com/{{ profile.id }}/professeur-{{ profile.department }}-{{ profile.firstname | myslugify }}-{{ profile.lastname|first| myslugify }}/{% endblock %}

{% block canonical_url %}https://www.rueduprof.com/{{ profile.id }}/professeur-{{ profile.department }}-{{ profile.firstname | myslugify }}-{{ profile.lastname|first| myslugify }}/{% endblock %}

{% block snippet_json_breadcrumb %}
{% endblock %}

{% block snippet_json %}
    {% include 'App::schema/profile_show_user.html.twig' with {
        profile: profile
    } only %}
{% endblock %}

{% block stylesheet %}

<style>

.h2_title {
    font-size:16px;
    margin: 0px !important;
    line-height: 20px;

}

.vertical-center {
  min-height: 200px;  /* Fallback for vh unit */


  /* Make it a flex container */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; 
  
  /* Align the bootstrap's container vertically */
    -webkit-box-align : center;
  -webkit-align-items : center;
       -moz-box-align : center;
       -ms-flex-align : center;
          align-items : center;
  
  /* In legacy web browsers such as Firefox 9
     we need to specify the width of the flex container */
  
  /* Also 'margin: 0 auto' doesn't have any effect on flex items in such web browsers
     hence the bootstrap's container won't be aligned to the center anymore.
  
     Therefore, we should use the following declarations to get it centered again */
         -webkit-box-pack : center;
            -moz-box-pack : center;
            -ms-flex-pack : center;
  -webkit-justify-content : center;
          justify-content : center;
}
.box-shadow{
    -moz-box-shadow: 0px 0px 0px 5px #e8e6e6; /* Firefox */

    -webkit-box-shadow: 0px 0px 0px 5px #e8e6e6; /* Safari, Chrome */

    box-shadow: 0px 0px 0px 5px #e8e6e6; /* CSS3 */
}
</style>
{% endblock %}

{% block body %}

  <div class="img-cover img-cover-purple" data-parallax="scroll" data-image-src="/img/background_blue_v0011.jpg">
    <div class="container m-t-0">
      <div class="row text-center">
        <div class="col-md-12 p-t-20 p-b-10">              
          {% if profile and profile.avatar and profile.avatar.path %}
            <img class="img-circle-premium pull-center avatar-fix-premium" src="https://www.rueduprof.com/uploads/avatar/{{ profile.avatar.path }}" data-src="https://www.rueduprof.com/uploads/avatar/{{ profile.avatar.path }}" style="width:120px;" alt="{{ profile.firstname }} {{ profile.lastname }}">
          {% endif %}
          <h1 style="color: white; font-size: 22px;font-weight:700;">
            Cours particuliers avec {% if profile and profile.firstname and profile.lastname  and profile.user.device != 'ANDROID' %}{{ profile.firstname }} {{ profile.lastname|first }}{% else %}{{ profile.lastname }} {{ profile.firstname|first }}{% endif %}
            {% if profile.city %}({{ profile.city }} {% if profile.department %}- {{ profile.department }}{% endif %}){% endif %}
          </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="{{ app.request.getSchemeAndHttpHost() ~ path('homepage') }}">Cours particuliers</a></li>
             <li>{% if profile and profile.firstname and profile.lastname %}{{ profile.firstname }} {{ profile.lastname|first }}.{% endif %}</li>
          </ol>

        </div>
        <div class="col-sm-6 text-right m-t-b-10">

        </div>
      </div>
    </div>
  </div>
  <div class="content-padding p-t-20">
    <div class="container">
      <div class="row">

        <div class="col-lg-12">
          <div class="ibox float-e-margins">

            <div class="ibox-content">


              <div class="row">




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

              {% if profile.content  %}
                <h5 style="font-weight:500;">Ma description :</h5>
              {% autoescape %}
                {{ profile.content | raw  | nl2br }}
              {% endautoescape %}
              <hr />
              {% endif %}


              {% if profile.categories|length > 1 %}
                <h5 style="font-weight:500;">Sélectionner une matière :</h5>
              {% endif %}            

      
      {% for item in profile.categories  %}

                              
        {% if item.lang == 'fr' %}

            <!-- START: Ticket item -->
            <div class="panel panel-default">
                <div class="panel-body p-30">
                    <div class="row r-sm-table bg-white">
                        <div class="col-md-2 col-sm-cell">
                            <div class="m-b-10">
                                <span class="label label-primary b-rad-100 label-line inline-block"><time class="timeago" datetime="{{ profile.user.modified|date }}"></time></span>
                            </div>
                          
                            <div>
                                <a>

                                   {% if profile.avatar and profile.avatar.path %}
                                      <td><img  class="img-circle pull-left avatar-fix" alt="{{ profile.firstname }} {{ profile.lastname }}"src="https://www.rueduprof.com/uploads/avatar/{{ profile.avatar.path }}"/></td>
                                      {% else %}
                                      <td><img  class="img-circle pull-left avatar-fix" alt="avatar" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTrxwZhuShcQieycZ7U7thuj9cmUESbEffhVLc_EsxRJCLPDr7NUA"/></td>
                                    {% endif %}

                                    <div>
                                        <div class="font-normal">{% if profile and profile.firstname  %}{{ profile.firstname }}{% endif %} {% if profile and profile.lastname  %}{{ profile.lastname|first }}.{% endif %}</div>
                                    </div>
                                </a>
                            </div>
                            <br />

                            {% if item.webcam %}<br /><div style="font-size:12px;font-weight:700;color:#2980b9;"><i class="fa fa-video-camera"></i> Webcam</div>{% endif %}
                            {% if item.inPlace %}<div style="font-size:11px;font-weight:700;color:#8e44ad;"><i class="fa fa-angle-double-left"></i>  Je peux recevoir mes élèves</div>{% endif %}
                            {% if item.outPlace %}<div style="font-size:11px;font-weight:700;color:#e67e22;"><i class="fa fa-angle-double-right"></i>  Je peux me déplacer</div>{% endif %}

                        </div>
                        <div class="col-md-7 col-sm-cell">
                            <h2 class="h2_title"><a href="{{ app.request.getSchemeAndHttpHost() ~ path('app_profileCategory_show', { 'profile': profile.id, 'slug':  'professeur-'~item.profile.department ~'-'~ item.profile.firstname| myslugify ~'-'~ item.profile.lastname|first| myslugify, 'skill': item.category.slug, 'id': item.id, 'from': app.request.query.get('from') }) }}" class="font-normal no-m m-b-10" style="font-size:16px;font-weight:500;">
                              {% if item.category.type and item.category.type == 'formations' %}Formation{% elseif item.category.slug == "coach-sportif" %}Séance Haut de gamme {% else %}Cours particuliers{% endif %} {% if item.category.name|first|lower in ['a','e','i','o','u'] %}d'{% else %}de {% endif %}<strong>{{ item.category.name }}</strong>
                              {% if profile and profile.city  %} à <strong>{{ profile.city }} {% if profile and profile.department  %}({{ profile.department }}){% endif %} </strong>{% endif %}
                              {% if profile and profile.firstname and profile.lastname  %}avec <b>{{ profile.firstname }} {{ profile.lastname|first }}.</b>{% endif %}                          
                                </a></h2>
                            <p>
                              {% if item.content %}
                                {{ item.content|length > 350 ? item.content|slice(0, 350) ~ '...' : item.content   }}
                              {% elseif profile.content %}
                                {{ profile.content|length > 350 ? profile.content|slice(0, 350) ~ '...' : profile.content   }}
                              {% endif %}
                            </p>



                            <div class="m-b-10">
                                {% if item.primaire %}<span class="label label-success">Primaire</span>{% endif %}
                                {% if item.college %}<span class="label label-info">Collége</span>{% endif %}
                                {% if item.lycee %}<span class="label label-primary">Lycée</span>{% endif %}
                                {% if item.superieur %}<span class="label label-danger">Supérieur</span>{% endif %}
                            </div>
                                
                       

                            <ul class="list-unstyled tag-list inline-block no-m">

                              {% for itemCategory in profile.categories  %}
                                
                                    
                                {% if location %}

                                  {% if itemCategory.category.type and itemCategory.category.type == 'formations' %}
                                    <li><a href="{{ app.request.getSchemeAndHttpHost() ~ path('app_formations_show', {'slug': itemCategory.category.slug, 'location': location.slug }) }}">#{{ itemCategory.category.name }}</a></li>
                                  {% else %}
                                    <li><a href="{{ app.request.getSchemeAndHttpHost() ~ path('app_category_show', {'slug': itemCategory.category.slug, 'location': location.slug }) }}">#{{ itemCategory.category.name }}</a></li>                      
                                  {% endif %}

                                {% else %}

                                  {% if itemCategory.category.type and itemCategory.category.type == 'formations' %}
                                    <li><a href="{{ app.request.getSchemeAndHttpHost() ~ path('app_formations_show', {'slug': itemCategory.category.slug, 'location': 'paris'}) }}">#{{ itemCategory.category.name }}</a></li>
                                  {% else %}
                                    <li><a href="{{ app.request.getSchemeAndHttpHost() ~ path('app_category_show', {'slug': itemCategory.category.slug, 'location': 'paris' }) }}">#{{ itemCategory.category.name }}</a></li>                     
                                  {% endif %}

                                {% endif %}
                              {% endfor %}
                                
                            </ul>
                        </div>
                        <div class="col-sm-3 col-sm-cell text-center">

                            {% if item.pricePerHour %}
                            <div style="font-weight:800;font-size:24px;">
                            {{ item.pricePerHour }}<sup>€ / h</sup>
                            </div>
                            {% endif %}

                            {% if item.firstHour %}
                              <div style="font-size:12px;font-weight:700;color:#27ae60;">
                                <i class="fa fa-money"></i>  1ère heure gratuite
                              </div>
                            {% endif %}
                            <div><a style="margin-top:10px;" class="btn btn-sm btn-primary btn-call-to-action" href="{{ path('search_booking', { 'id': item.id }) }}" ><i class="fa fa-comments-o"></i> Contacter ce professeur gratuitement</a></div>
                        </div>

                    </div>
                </div>
            </div>
            <!-- End: Ticket item -->

            {% endif %}

        {% endfor %}
                                
                     







              </div>

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

               <div class="panel panel-default">
                  <div class="p-30-i text-center">
                      <h2  style="font-weight:800;font-size:16px;">
                        Cours particuliers à domicile 
                        ({% if location  and location.city != NULL %}{{ location.zipcode }}{% else %}75{% endif %})
                      </h2>
                      {% for itemCategory in profile.categories  %}

                        {% if location %}

                          {% if itemCategory.category.type and itemCategory.category.type == 'formations' %}
                            <div class="text-muted m-b-10" ><a href="{{ app.request.getSchemeAndHttpHost() ~ path('app_formations_show', {'slug': itemCategory.category.slug, 'location': location.slug }) }}">{{ itemCategory.category.name }}</a></div>
                          {% else %}
                            <div class="text-muted m-b-10" ><a href="{{ app.request.getSchemeAndHttpHost() ~ path('app_category_show', {'slug': itemCategory.category.slug, 'location': location.slug }) }}">{{ itemCategory.category.name }}</a></div>                       
                          {% endif %}

                        {% else %}

                          {% if itemCategory.category.type and itemCategory.category.type == 'formations' %}
                            <div class="text-muted m-b-10" ><a href="{{ app.request.getSchemeAndHttpHost() ~ path('app_formations_show', {'slug': itemCategory.category.slug, 'location': 'paris'}) }}">{{ itemCategory.category.name }}</a></div>
                          {% else %}
                            <div class="text-muted m-b-10" ><a href="{{ app.request.getSchemeAndHttpHost() ~ path('app_category_show', {'slug': itemCategory.category.slug, 'location': 'paris' }) }}">{{ itemCategory.category.name }}</a></div>                       
                          {% endif %}

                        {% endif %}

                      {% endfor %}
                </div>
              </div>


               <div class="panel panel-default">
                  <div class="p-30-i text-center">
                      <h2 style="font-weight:800;font-size:16px;">Cours particuliers en ligne</h2>
                      {% for itemCategory in profile.categories  %}

                          {% if itemCategory.category.type and itemCategory.category.type == 'formations' %}
                            <div class="text-muted m-b-10" ><a href="{{ app.request.getSchemeAndHttpHost() ~ path('app_formations_show', {'slug': itemCategory.category.slug, 'location': 'en-ligne' }) }}">{{ itemCategory.category.name }}</a></div>
                          {% else %}
                            <div class="text-muted m-b-10" ><a href="{{ app.request.getSchemeAndHttpHost() ~ path('app_category_show', {'slug': itemCategory.category.slug, 'location': 'en-ligne' }) }}">{{ itemCategory.category.name }}</a></div>                       
                          {% endif %}
                        
                      {% endfor %}
                </div>
              </div>

            </div> 

              </div> 

            </div>

          </div>
        </div>





      </div>

    </div>

  </div>

{% endblock body %}

{% block javascripts %}
  <script src="/js/parallax.js-1.4.2/parallax.min.js"></script>
  <script>
jQuery(document).ready(function() {
  jQuery(".timeago").timeago();
});

  </script>
{% endblock %}