{% load ra_tags %}
{% load crispy_forms_tags crispy_forms_field %}
{% load i18n %}

{% if reports %}

    <div class="row reports-container animated {% if LANGUAGE_BIDI %}bounceInRight {% else %}bounceInLeft {% endif %}">
        <div class="col-sm-12">

            <div class="tabbable" style="" data-action="{{ reports }}">
                <div class="tab-content">
                    {% for report in reports.reports %}
                        <div class="tab-pane animated {% if LANGUAGE_BIDI %}bounceInLeft {% else %}bounceInRight{% endif %}"
                             id="{{ report.get_report_slug }}"
                             role="tabpanel">

                            <div class="card">
                                <div class="card-header">
                                    <div class="card-title"><h5>{{ report.get_report_title }}</h5></div>


                                    <div class="card-tools">
                                        {% include 'ra/report_list_form_buttons.html' %}
                                    </div>

                                </div>
                                <div class="card-body">
                                    <div class="row filters-container">
                                        <div class="col-sm-12">
                                            <div class="formContainer" data-report-url="{{ report.get_url }}">
                                                {#                                                {% csrf_token %}#}
                                                {% with report.get_initialized_form as form %}
                                                    {% crispy form form.get_crispy_helper %}
                                                {% endwith %}

                                            </div>

                                        </div>
                                    </div>


                                </div>
                                <div class="card-footer">
                                    <div class="card-tools">
                                        {% include 'ra/report_list_form_buttons.html' %}
                                    </div>

                                </div>
                            </div>
                            <div class="card">
                            <div class="card-header">
                                <div class="card-title"><h5>Results</h5></div>
                            </div>
                                <div class="card-body">
                                    <div data-report-widget data-no-auto-load
                                         data-report-url="{{ report.get_url }}"
                                         data-extra-params="{{ data_extra_param|default:'' }}"
                                         data-success-callback="{{ data_success_callback|default:'' }}"

                                            {#             data-chart-id="{{ data_chart_id|default:'' }}"#}
                                    >
                                        {% if report.chart_settings and not no_chart %}

                                            <div id="container" data-report-chart
                                                 style="width:100%; height:400px;"></div>
                                            {#                <canvas data-report-chart height="100"></canvas>#}
                                        {% endif %}
                                        <div data-report-table>

                                        </div>
                                    </div>


                                    {#                                    <div class="chartContainer screenOnly">#}
                                    {#                                    #}
                                    {#                                        <div class="controls"></div>#}
                                    {#                                        <div class="reportChart screenOnly" dir="ltr"></div>#}
                                    {#                                        {% if report.chart_settings %}#}
                                    {#                                            <canvas id="{{ report.get_report_slug }}" class="chartsJsCanvas" width="400"#}
                                    {#                                                    height="100"></canvas>#}
                                    {#                                        {% endif %}#}
                                    {#                                    </div>#}
                                    {#                                    <div class="report-table"></div>#}
                                </div>
                            </div>

                        </div>
                    {% endfor %}
                </div>


            </div>
        </div>
    </div>

{% endif %}