{% extends 'base.html.twig' %}
{% import 'navigation/switch_months.html.twig' as navigation %}
{% block body %}
    {{ navigation.month_menu('app_base',months,currentMonth) }}
    <div class="
        row
        d-flex
        row-cols-sm-1
        row-cols-lg-3
        justify-content-center
        reports-all"
    >
        {% for id,reports in reportsGroup %}
            <div class="status-row" style="{% if isOverdue and id == 3 %}display:none{% endif %}">
                <div class="col">
                    <div class="card text-center text-white bg-dark">
                        <div class="card-title"><h2>{{ reports.status.takeLang }}</h2></div>
                    </div>
                </div>
                {% for report in reports.reports %}
                    <div class="col">
                        <div class="card text-{{ reports.status.textColor }} bg-{{ reports.status.backgroundColor }} report-one">
                            <div class="report-number">
                                <div class="badge bg-info text-dark" data-toggle="tooltip" data-placement="bottom" title="Numer sprawozdania">{{ report.number }}</div>
                            </div>
                            {#                    <img src="..." class="card-img-top" alt="...">#}
                            <div class="card-body">
                                <h5 class="card-title">
                                    {% if is_granted('clientView') %}
                                        <a href="{{ path('app_client',{id: report.client.id}) }}" class="link-{{ reports.status.linkColor }}">{{ report.client.strName }}</a>
                                    {% else %}
                                        {{ report.client.strName }}
                                    {% endif %}
                                </h5>
{#                                <h6 class="card-subtitle text-muted">Numer sprawozdania: </h6>#}
                                <div class="card-text">
                                    <form action="{{ path('app_set_status_todo') }}" method="post">
                                        <input type="hidden" name="reportId" value="{{ report.id }}">
                                        <input type="hidden" name="token" value="{{ csrf_token('report-status') }}">
                                        <div class="btn-group" role="group" aria-label="Todos">
                                            {% for todo in reportToDoList %}
                                                    <input onchange="this.form.submit()"
                                                           name="{{ todo.value }}"
                                                           type="checkbox"
                                                           class="btn-check"
                                                           id="checkboxToDo{{ todo.value }}Id{{ report.id }}"
                                                            {% if report.isReportsTodo(todo) %}
                                                                checked="checked"
                                                            {% endif %}
                                                            {% if not is_granted('reportEdit') %}
                                                                disabled
                                                            {% endif %}
                                                            autocomplete="off"
                                                    >
                                                    <label class="btn btn-outline-{{ reports.status.checkboxColor }}  d-flex align-items-center"
                                                           for="checkboxToDo{{ todo.value }}Id{{ report.id }}"
                                                           data-toggle="tooltip" data-placement="bottom" title="{{ todo.takeLang }}">
                                                        <i class="fa fa-solid fa-{{ todo.takeIcon }}"> </i>
                                                    </label>
                                            {% endfor %}
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% endfor %}
    </div>
{% endblock %}