{% set cardMode = cardMode|default(null) %}

{% 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 bio %}
    {% if item.content %}
        {{ item.content|length > 150 ? item.content|slice(0, 150) ~ '...' : item.content }}
    {% elseif profile.content %}
        {{ profile.content|length > 150 ? profile.content|slice(0, 150) ~ '...' : profile.content }}
    {% endif %}
{% endset %}

{% set teaches = profile.categories|default([]) %}
{% set levelItems = [] %}
{% if item.primaire %}{% set levelItems = levelItems|merge(['Primaire']) %}{% endif %}
{% if item.college %}{% set levelItems = levelItems|merge(['Collège']) %}{% endif %}
{% if item.lycee %}{% set levelItems = levelItems|merge(['Lycée']) %}{% endif %}
{% if item.superieur %}{% set levelItems = levelItems|merge(['Supérieur']) %}{% endif %}

{% set modeItems = [] %}
{% if item.webcam %}{% set modeItems = modeItems|merge(['En ligne']) %}{% endif %}
{% if item.outPlace %}{% set modeItems = modeItems|merge(['À domicile']) %}{% endif %}
{% if item.inPlace %}{% set modeItems = modeItems|merge(['Chez le professeur']) %}{% endif %}

{% set isVerified = profile.verified|default(user.verified|default(false)) %}

{% set cityDisplay %}
    Cours particuliers {{ categoryPrefix }}<b>{{ categoryName }}</b>
    {% if profile.city %}
        à {{ profile.city }}{% if profile.department %} <span>({{ profile.department }})</span>{% endif %}
    {% endif %}
{% endset %}

{% set levelItems = [] %}
{% if item.primaire %}{% set levelItems = levelItems|merge(['<span class="level-badge level-badge-primaire"><i class="bi bi-check2-circle"></i> Primaire</span>']) %}{% endif %}
{% if item.college %}{% set levelItems = levelItems|merge(['<span class="level-badge level-badge-college"><i class="bi bi-check2-circle"></i> Collège</span>']) %}{% endif %}
{% if item.lycee %}{% set levelItems = levelItems|merge(['<span class="level-badge level-badge-lycee"><i class="bi bi-check2-circle"></i> Lycée</span>']) %}{% endif %}
{% if item.superieur %}{% set levelItems = levelItems|merge(['<span class="level-badge level-badge-superieur"><i class="bi bi-check2-circle"></i> Supérieur</span>']) %}{% endif %}

{% set modeItems = [] %}
{% if item.webcam %}{% set modeItems = modeItems|merge(['<span class="level-badge level-badge-webcam"><i class="bi bi-camera-video"></i> En ligne</span>']) %}{% endif %}
{% if item.outPlace %}{% set modeItems = modeItems|merge(['<span class="level-badge level-badge-out_place"><i class="bi bi-chevron-double-right"></i> Se déplace</span>']) %}{% endif %}
{% if item.inPlace %}{% set modeItems = modeItems|merge(['<span class="level-badge level-badge-in_place"><i class="bi bi-chevron-double-left"></i> Reçoit les élèves</span>']) %}{% endif %}

<div class="col-12 col-xl-6">
    <article class="teacher-list-card h-100 {% if cardMode == 'premium' %}teacher-list-card-featured{% endif %}">
        <div class="teacher-list-top d-flex gap-3 gap-md-4 align-items-start">
            <div class="teacher-card-avatar-wrap">
                <a href="{{ profileUrl }}" class="text-decoration-none text-reset">
                    {% if avatar and avatar.path %}
                        <img src="https://www.rueduprof.com/uploads/avatar/{{ avatar.path }}" alt="{{ displayName }}" class="teacher-card-avatar">
                    {% else %}
                        <div class="teacher-card-avatar teacher-avatar-fallback">
                            {{ profile.firstname|default('')|slice(0,1) }}{{ profile.lastname|default('')|slice(0,1) }}
                        </div>
                    {% endif %}
                </a>
            </div>

            <div class="flex-grow-1 min-w-0">
                <div class="d-flex flex-wrap gap-2 mb-2">
                    {% if isVerified %}
                        <span class="badge rounded-pill badge-verified px-3 py-2">
                            <i class="bi bi-patch-check-fill me-1"></i>Vérifié
                        </span>
                    {% endif %}
                    {% if item.firstHour %}
                        <span class="badge text-bg-success border rounded-pill px-3 py-2 fw-semibold badge-soft">
                            <i class="bi bi-cash me-1"></i>1ère heure gratuite
                        </span>
                    {% endif %}
                </div>

                <div class="d-flex flex-wrap align-items-start justify-content-between gap-3 mb-2">
                    <div>
                        <h3 class="h4 mb-1">
                            <a href="{{ profileUrl }}" class="text-decoration-none text-reset">{{ displayName }}</a>
                        </h3>
                    </div>

                    {% if item.pricePerHour is not null %}
                        <div class="teacher-price-box text-md-end">
                            <div class="teacher-price">{{ item.pricePerHour }}€<span>/h</span></div>
                            <div class="small text-secondary">à partir de</div>
                        </div>
                    {% endif %}
                </div>

                <div class="d-flex flex-wrap gap-3 meta-inline meta-inline-list mb-3">
                    {% if profile.city %}
                        <span><i class="bi bi-geo-alt"></i>{{ profile.city }} ({{ profile.department }})</span>
                    {% endif %}
                    {% if profile.user.lastLogin %}
                        <span><i class="bi bi-clock-history"></i><time class="timeago" datetime="{{ profile.user.lastLogin|date }}"></time></span>
                    {% else %}
                        <span><i class="bi bi-clock-history"></i><time class="timeago" datetime="{{ profile.user.created|date }}"></time></span>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="row g-3 mb-4">
            {% if modeItems is not empty %}
                <div class="col-6">
                    <div class="teacher-mini-box h-100">
                        <p class="mb-0">{{ modeItems|join('<br>')|raw }}</p>
                    </div>
                </div>
            {% endif %}

            {% if levelItems is not empty %}
                <div class="col-6">
                    <div class="teacher-mini-box h-100">
                        <p class="mb-0">{{ levelItems|join('<br>')|raw }}</p>
                    </div>
                </div>
            {% endif %}

        </div>

        <p class="text-primary mb-0">{{ cityDisplay|raw }}</p>
        <p class="teacher-card-copy text-secondary mb-3">{{ bio|trim|raw }}</p>

        {% if teaches is not empty %}
            <div class="d-flex flex-wrap gap-2 mb-3">
                {% for subject in teaches|slice(0, 4) %}
                    <span class="subject-pill subject-pill-muted">{{ subject.category.name }}</span>
                {% endfor %}
                {% if teaches|length > 4 %}
                    <a href="{{ profileUrl }}">
                        <span class="subject-pill subject-pill-more bg-secondary-subtle text-secondary border border-secondary-subtle">
                            <i class="bi bi-plus-lg"></i> Voir
                        </span>
                    </a>
                {% endif %}
            </div>
        {% endif %}

        <div class="teacher-card-footer d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-3">
            <div></div>
            <div class="d-grid d-sm-flex gap-2">
                <a href="{{ profileUrl }}" class="btn btn-outline-dark btn-pill px-4">Voir le profil</a>
                <a href="{{ profileUrl }}#reserver" class="btn btn-primary btn-pill px-4">Contacter</a>
            </div>
        </div>
    </article>
</div>