{% set contentItem = content|default(null) %}
{% set theme = contentItem ? contentItem.theme|default(null) : null %}

{% set progress = contentItem ? contentItem.percentage|default(0) : 0 %}
{% set progress = progress < 0 ? 0 : progress %}
{% set progress = progress > 100 ? 100 : progress %}

{% set isComplete = progress >= 100 %}

{% set themeName = theme ? theme.nameMonth|default('Contenu indisponible') : 'Contenu indisponible' %}
{% set themeDescription = theme ? theme.description|default('Ce contenu est temporairement indisponible.') : 'Ce contenu est temporairement indisponible.' %}

<article class="cba-month-card">
    <div class="cba-month-cover">
        {% if theme and theme.image is not empty %}
            <img src="{{ theme.image }}" alt="{{ themeName }}" loading="lazy">
        {% else %}
            <div class="cba-month-cover-fallback">
                <i class="fas fa-baby"></i>
            </div>
        {% endif %}
    </div>

    <div class="cba-month-body">
        <span class="cba-month-status {{ isComplete ? 'is-complete' : '' }}">
            <i class="fas {{ isComplete ? 'fa-check-circle' : 'fa-chart-line' }}"></i>
            {{ isComplete ? 'Mois terminé' : 'En cours' }}
        </span>

        <h3 class="cba-month-name">{{ themeName }}</h3>

        <p class="cba-month-description">
            {{ themeDescription }}
        </p>

        <div class="cba-month-progress-head">
            <span class="cba-month-progress-label">Progression</span>
            <span class="cba-month-progress-value">{{ progress }}%</span>
        </div>

        <div class="cba-month-progress" aria-label="Progression de {{ themeName }}">
            <div
                class="cba-month-progress-bar"
                style="width: {{ progress }}%;"
                role="progressbar"
                aria-valuenow="{{ progress }}"
                aria-valuemin="0"
                aria-valuemax="100"
            ></div>
        </div>

        <div class="cba-month-actions">
            {% if theme and theme.id is not empty %}
                <a href="{{ path('app_content', {'id': theme.id}) }}" class="cba-btn-primary">
                    <i class="fas fa-arrow-right"></i>
                    Voir le contenu
                </a>
            {% else %}
                <button type="button" class="cba-btn-primary" disabled>
                    <i class="fas fa-lock"></i>
                    Contenu indisponible
                </button>
            {% endif %}
        </div>
    </div>
</article>