{% extends 'base.html.twig' %}

{% block title %}Mon Pointage{% endblock %}
{% block page_title %}Mon Pointage{% endblock %}

{% set moisNoms = {1:'Janvier',2:'Fevrier',3:'Mars',4:'Avril',5:'Mai',6:'Juin',
                   7:'Juillet',8:'Aout',9:'Septembre',10:'Octobre',11:'Novembre',12:'Decembre'} %}

{% block body %}
<div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <h5 class="mb-0 fw-bold"><i class="bi bi-calendar3 me-2 text-primary"></i>Mes feuilles de pointage</h5>
    <div class="d-flex gap-2 flex-wrap">
        {% for y in years %}
        <a href="?year={{ y }}" class="btn btn-sm {{ y == (app.request.query.get('year', currentYear)|number_format(0,'','')) ? 'btn-primary' : 'btn-outline-secondary' }}">
            {{ y }}
        </a>
        {% endfor %}
    </div>
</div>

{% set selectedYear = app.request.query.get('year', currentYear)|number_format(0,'','') %}

<div class="card">
    <div class="card-header py-3">
        <i class="bi bi-calendar-range me-2"></i>Année {{ selectedYear }}
    </div>
    <div class="card-body">
        <div class="row row-cols-2 row-cols-sm-3 row-cols-md-3 row-cols-lg-4 g-3 month-grid">
            {% for m in 1..12 %}
            {% set isCurrentMonth = (m == currentMonth and selectedYear == currentYear) %}
            <div class="col">
                <a href="{{ path('app_pointage_sheet', {year: selectedYear, month: m}) }}"
                   class="month-card d-block {{ isCurrentMonth ? 'current' : '' }}">
                    <div class="fw-semibold">{{ moisNoms[m] }}</div>
                    <div class="small text-muted mt-1">
                        {% if isCurrentMonth %}
                        <span class="badge bg-white text-primary">Mois en cours</span>
                        {% else %}
                        Voir la feuille
                        {% endif %}
                    </div>
                </a>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}