{% set locationLabel = location.city ? location.city : location.name %}
{% set locationFirst = locationLabel|first|lower %}
{% set locationNeedsElision = locationFirst in ['a', 'e', 'i', 'o', 'u', 'h'] %}
{% set showNearby = location.slug != 'en-ligne' %}
{% set currentLocationSlug = location is defined and location and location.slug ? location.slug : 'paris' %}

<section class="container py-5 categories-explorer">
    <h2 class="text-center fw-bold mb-5 ai-title">
        Les derniers cours particuliers
        {% if showNearby %}
            à proximité {{ locationNeedsElision ? "d'" : 'de ' }}<strong>{{ locationLabel }}</strong>
        {% endif %}
    </h2>

    {% for key, item in tutors %}
        {% set profile = item.profile %}
        {% set user = profile.user %}
        {% set avatar = profile.avatar %}
        {% set isAndroid = user.device == 'ANDROID' %}
        {% set displayName = (profile.firstname and profile.lastname and not isAndroid)
            ? profile.firstname ~ ' ' ~ profile.lastname|first ~ '.'
            : profile.lastname ~ ' ' ~ profile.firstname|first ~ '.'
        %}
        {% set profileUrl = path('app_profile_user_show', {
            id: profile.id,
            slug: 'professeur-' ~ profile.department ~ '-' ~ profile.firstname|myslugify ~ '-' ~ profile.lastname|first|myslugify
        }) %}
        {% set lastActivityDate = user.lastLogin ? user.lastLogin : user.created %}

        {% set cityDisplay %}
            {% if location.slug == 'en-ligne' %}
                Cours Particuliers {% if item.category.name|first|lower in ['a','e','i','o','u','h'] %}d'{% else %}de {% endif %}<b>{{ item.category.name }} en ligne</b>
            {% elseif profile.city %}
                Cours Particuliers {% if item.category.name|first|lower in ['a','e','i','o','u','h'] %}d'{% else %}de {% endif %}<b>{{ item.category.name }}</b> à
                    {{ profile.city }}
                    {% if profile.city == 'Paris' %}
                        {% if profile.department != '75000' %}
                            {% if profile.department|slice(3, 1) == '0' %}
                                {{ profile.department|slice(4, 1) }}
                            {% else %}
                                {{ profile.department|slice(3, 2) }}
                            {% endif %}
                            {% if profile.department|slice(4, 1) == '1' and profile.department|slice(3, 1) != '1' %}
                                er
                            {% else %}
                                e
                            {% endif %}
                            arrondissement
                        {% endif %}
                        {% if profile.department %}
                            <span>({{ profile.department }})</span>
                        {% endif %}
                    {% else %}
                        <span>({{ profile.department }})</span>
                    {% endif %}
                </strong>
            {% endif %}
        {% endset %}

        <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-2 col-sm-cell">
                        <div>
                            <span class="label label-primary b-rad-100 label-line inline-block">
                                <time class="timeago" datetime="{{ lastActivityDate|date }}"></time>
                            </span>
                        </div>

                        <br>

                        <div>
                            <a href="{{ profileUrl }}">
                                <table>
                                    <tr>
                                        <td>
                                            {% if avatar and avatar.path %}
                                                <noscript>
                                                    <img
                                                        class="img-circle pull-left avatar-fix"
                                                        src="https://www.rueduprof.com/uploads/avatar/{{ avatar.path }}"
                                                        data-src="https://www.rueduprof.com/uploads/avatar/{{ avatar.path }}"
                                                        alt="{{ profile.firstname }} {{ profile.lastname }}"
                                                    >
                                                </noscript>

                                                <img
                                                    class="img-circle pull-left avatar-fix lazyload"
                                                    data-src="https://www.rueduprof.com/uploads/avatar/{{ avatar.path }}"
                                                    alt="{{ profile.firstname }} {{ profile.lastname }}"
                                                >
                                            {% else %}
                                                <img
                                                    class="img-circle pull-left avatar-fix"
                                                    alt="avatar"
                                                    src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTrxwZhuShcQieycZ7U7thuj9cmUESbEffhVLc_EsxRJCLPDr7NUA"
                                                >
                                            {% endif %}
                                        </td>
                                        <td>
                                            <div class="font-normal">
                                                <b style="margin-top:5px;">{{ displayName }}</b>
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </a>
                        </div>

                        <br>

                        {% if item.webcam %}
                            <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">
                        {% spaceless %}
                            <h3 class="h2_title">
                                <a href="{{ path('app_profileCategory_show', { 
                                    'profile': item.profile.id, 
                                    'slug':  'professeur-'~item.profile.department ~'-'~ item.profile.firstname| myslugify ~'-'~ item.profile.lastname|first| myslugify, 
                                    'skill': item.category.slug, 
                                    'id': item.id 
                                    }) }}" class="font-normal" style="font-size:16px;font-weight:500;">
                                    {{ cityDisplay|raw }}
                                    avec <b>{{ displayName }}</b>
                                </a>
                            </h3>

                            {% if profile.content %}
                                <p>{{ profile.content|length > 350 ? profile.content|slice(0, 350) ~ '...' : profile.content }}</p>
                            {% endif %}

                            {% if item.content %}
                                <p>
                                    <b>Plus de détails :</b>
                                    {{ item.content|length > 150 ? item.content|slice(0, 150) ~ '...' : item.content }}
                                </p>
                            {% endif %}
                        {% endspaceless %}

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

                        <ul class="list-unstyled tag-list inline-block no-m">
                            {% for itemCategory in profile.categories %}
                                {% set tagRoute = itemCategory.category.type == 'formations' ? 'app_formations_show' : 'app_category_show' %}
                                <li style="margin-right:3px;">
                                    <a href="{{ path('app_profileCategory_show', { 
                                                'profile': item.profile.id, 
                                                'slug':  'professeur-'~item.profile.department ~'-'~ item.profile.firstname| myslugify ~'-'~ item.profile.lastname|first| myslugify, 
                                                'skill': itemCategory.category.slug, 
                                                'id': itemCategory.id 
                                            }) }}">
                                        #{{ itemCategory.category.name }}
                                    </a>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>

                    <div class="col-sm-3 col-sm-cell text-center">
                        {% if item.pricePerHour %}
                            <div>
                                <a href="#" class="avatar m-r-3 inline-block" style="font-weight:900;font-size:28px;">
                                    {{ item.pricePerHour }}<sup>€ / h</sup>
                                </a>
                            </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('app_profileCategory_show', { 'profile': item.profile.id, 'slug':  'professeur-'~item.profile.department ~'-'~ item.profile.firstname| myslugify ~'-'~ item.profile.lastname|first| myslugify, 'skill': item.category.slug, 'id': item.id }) }}"
                            >
                                <i class="fa fa-plus"></i> En savoir plus
                            </a>
                        </div>

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