<div class="profile-cover">
    <div class="profile-cover-bg"></div>
    <div class="profile-cover-content">
        <img src="/{{ user.profile.avatar }}" alt="Avatar de {{ user.username }}" class="profile-avatar">
        <div class="profile-identity">
            <h1 class="profile-name">{{ user.profile.first_name|default:user.username }} {{ user.profile.last_name }}</h1>
            <div class="profile-username">@{{ user.username }}</div>
            {% if user.profile.biography %}
                <p class="profile-bio">{{ user.profile.biography }}</p>
            {% endif %}
            <ul class="profile-meta">
                <li><i class="fa-regular fa-calendar"></i> Inscrit depuis {{ user.date_joined|date:"F Y" }}</li>
                <li>
                    <i class="fa-solid fa-book"></i>
                    {% with user.course_set.count as courses_count %}
                        {{ courses_count }} cours
                    {% endwith %}
                </li>
            </ul>
        </div>
        <div class="profile-actions-rail">
            {% if user.id == request.user.id %}
                <a href="{% url 'profile_update' %}" class="btn btn-primary">Éditer le profil</a>
                <a href="{% url 'account_update' %}" class="btn btn-secondary">Paramètres</a>
            {% else %}
                <button class="btn btn-primary" disabled>Suivre</button>
                <button class="btn btn-secondary" disabled>Message</button>
            {% endif %}
        </div>
    </div>
</div>

<nav class="profile-tabs">
    <ul>
        <li class="active"><a href="#about">À propos</a></li>
        {% if user.id == request.user.id %}
            <li><a href="{% url 'user_courses' %}">Mes cours</a></li>
        {% endif %}
    </ul>
</nav>