{% extends 'layout.html' %}
{% block content %}
    <section class="profile-section">
        {% include "../partials/_profile_nav.html" %}

        <div class="profile-content">
            <div class="profile-grid">
                <div class="profile-card" id="about">
                    <h3>À propos</h3>
                    <ul class="profile-about-list">
                        <li><strong>Pseudo</strong> : {{ user.username }}</li>
                        <li><strong>Nom complet</strong> : {{ user.profile.first_name }} {{ user.profile.last_name }}</li>
                        <li><strong>Inscription</strong> : {{ user.date_joined|date:"j F Y" }}</li>
                    </ul>
                    {% if user.profile.biography %}
                        <p class="profile-bio-body">{{ user.profile.biography }}</p>
                    {% else %}
                        <p class="profile-bio-body muted">Aucune bio pour le moment.</p>
                    {% endif %}
                </div>

                <div class="profile-card">
                    <h3>Cours publiés</h3>
                    {% with courses=user.course_set.all %}
                        {% if courses %}
                            <ul class="profile-courses">
                                {% for course in courses|slice:":6" %}
                                    <li>
                                        <a href="{% url 'courses:show' course_id=course.id course_name=course.slug %}">
                                            <img src="/{{ course.thumbnail }}" alt="{{ course.name }}" class="course-thumb-mini">
                                            <span>{{ course.name }}</span>
                                        </a>
                                    </li>
                                {% endfor %}
                            </ul>
                        {% else %}
                            <p class="muted">Aucun cours publié.</p>
                        {% endif %}
                    {% endwith %}
                </div>

                <div class="profile-card">
                    <h3>Activité</h3>
                    <p class="muted">Le fil d’activité de cet utilisateur arrive bientôt.</p>
                </div>
            </div>
        </div>
    </section>
{% endblock %}