{% macro month_menu(routeName, months, currentMonth, countOverdueLeft, clientId, client) %}
    {% if client %}
        <div class="row justify-content-center">
            <div class="alert alert-info col-3 text-center " role="alert">
                <h5 class="alert-heading"><strong>{{ client.strName }}</strong></h5>
                <p>
                    <a href="{{ path(routeName,{monthId: 0}) }}" class="btn btn-outline-warning">Wróć do wszystkich</a>
                </p>
            </div>
        </div>
    {% endif %}
    <div class="row reports-months-all">
        <ul class="nav nav-underline nav-fill">
            <li class="nav-item position-relative">
                <a href="{{ path(routeName, {monthId:-1, clientId:clientId}) }}" class="nav-link {% if currentMonth is null %}active{% endif %}">Zaległe</a>
                {% if countOverdueLeft > 0 %}
                    <div class="spinner-grow spinner-grow-sm text-danger overdue"></div>
                {% endif %}
            </li>
            {% for id,obj in months %}
                {% set month = obj.date %}
                {% set isCurrent = currentMonth is not null and month | date("Y-m") == currentMonth | date("Y-m") %}
                <li class="nav-item position-relative"
                    {% if obj.overdueCount > 0 %}
                        data-toggle="tooltip" data-bs-placement="bottom" title="Zaległe sprawozdania do zrobienia"
                    {% endif %}
                >
                    <a class="nav-link {% if isCurrent %} active{% endif %}" href="{{ path(routeName,{monthId: id, clientId:clientId}) }}">
                        {% if routeName=='app_schedule' %}
                            {{ id }}
                        {% else %}
                            {{ month | date("Y-m") }}
                        {% endif %}
                    </a>
                    {% if obj.overdueCount > 0 %}
                        <div class="spinner-grow spinner-grow-sm text-danger overdue"></div>
                    {% endif %}
                </li>
            {% endfor %}
        </ul>
    </div>
{% endmacro %}