<h1>{{ course.name }}</h1>
<p class="def-author">
    <img src="/{{ course.author.profile.avatar }}" alt="Profile Picture" class="profile-picture-mini">
    Un cours proposé par&nbsp;<a href="{% url 'another_profile' course.author.id %}">{{ course.author }}</a>
    </p>
<p>{{ course.content }}</p>
<strong>Progression pour ce cours</strong>
{% if user_progress.percent_completed == 100 %}
    <div class="course-completed">
        <div class="container">
            <div class="icon"><i class="fa-solid fa-check"></i></div>
        </div>
        <div class="container">
            <div class="title">Félicitation</div>
            <div class="content">Tu as terminé(e) ce cours ! Tu peux réellement être fier(e) de toi !!</div>
        </div>
    </div>
{% else %}
    <div class="progress-container">
        <div class="progress-bar" style="width: 100%;">
            <div id="progress-bar-fill" class="progress-bar-fill" style="width: {{ user_progress.percent_completed }}%; height: 100%; transition: width 0.3s;"></div>
        </div>
        <div id="progress-text" class="progress-text">{{ user_progress.percent_completed }}%</div>
    </div>
{% endif %}
