<div class="content">
    <div {{ react_component('MyController', { 'fullName': app.user.fullName }) }}></div>

    <div class="container-fluid">
        {% if filterForm is defined %}
            {{ include('backend/reservations/productivity/filter.twig') }}
        {% endif %}

        {% if  foliosSummary is defined and reportByStatuses is defined %}
            {{ include('backend/reservations/productivity/foliosSummary.twig') }}
        {% endif %}

        {% if discoveryWays is defined and discoveryWays %}
            {{ include('backend/reservations/productivity/discoveryWays.twig') }}
        {% endif %}


        {% if annualFoliosNumbers is defined or annualSalesNumbers is defined or annualSalesVolume is defined or annualSalesUtility is defined %}
        <div class="card">
            <div class="card-content">
                {% if annualFoliosNumbers is defined and annualFoliosNumbers %}
                    {{ include('backend/reservations/productivity/annualFoliosNumbers.twig') }}
                {% endif %}
                {% if annualSalesNumbers is defined and annualSalesNumbers %}
                    {{ include('backend/reservations/productivity/annualSalesNumbers.twig') }}
                {% endif %}
                {% if annualSalesVolume is defined and annualSalesVolume %}
                    {{ include('backend/reservations/productivity/annualSalesVolume.twig') }}
                {% endif %}
                {% if annualSalesUtility is defined and annualSalesUtility %}
                    {{ include('backend/reservations/productivity/annualSalesUtility.twig') }}
                {% endif %}
            </div>
        </div>
        {% endif %}

        {% if monthlyComparativeFolios is defined  or monthlyComparativeNumbers is defined or monthlyComparativeVolume is defined or monthlyComparativeUtility is defined %}
            <div class="card">
                <div class="card-content">
                    {% if monthlyComparativeFolios is defined and monthlyComparativeFolios %}
                        {{ include('backend/reservations/productivity/monthlyComparativeSalesFolios.twig') }}
                    {% endif %}
                    {% if monthlyComparativeNumbers is defined and monthlyComparativeNumbers %}
                        {{ include('backend/reservations/productivity/monthlyComparativeSalesNumbers.twig') }}
                    {% endif %}
                    {% if monthlyComparativeVolume is defined and monthlyComparativeVolume %}
                        {{ include('backend/reservations/productivity/monthlyComparativeSalesVolume.twig')  }}
                    {% endif %}
                    {% if monthlyComparativeUtility is defined and monthlyComparativeUtility %}
                        {{ include('backend/reservations/productivity/monthlyComparativeSalesUtility.twig')  }}
                    {% endif %}
                </div>
            </div>
        {% endif %}

        {% if annualComparativeNumbers is defined or annualComparativeVolume is defined or annualComparativeUtility is defined  or annualComparativeFolios is defined %}
            <div class="card">
                <div class="card-content">
                    {% if annualComparativeFolios is defined and annualComparativeFolios %}
                        {{ include('backend/reservations/productivity/annualComparativeFolios.twig')  }}
                    {% endif %}
                    {% if annualComparativeNumbers is defined and annualComparativeNumbers %}
                        {{ include('backend/reservations/productivity/annualComparativeSalesNumbers.twig')  }}
                    {% endif %}
                    {% if annualComparativeVolume is defined and annualComparativeVolume %}
                        {{ include('backend/reservations/productivity/annualComparativeSalesVolume.twig')  }}
                    {% endif %}
                    {% if annualComparativeUtility is defined and annualComparativeUtility %}
                        {{ include('backend/reservations/productivity/annualComparativeSalesUtility.twig')  }}
                    {% endif %}
                </div>
            </div>
        {% endif %}

    </div>
</div>