{% load i18n %}
<!-- ko if: !$data.configForm -->
<!-- ko if: !$data.summary -->
{% block report %}


{% block report_title_bar %}
<!-- Report Title Bar -->
<div class="relative report-title-bar">

    <!-- Title Block -->
    <div class="report-toolbar-preview ep-form-toolbar">
        <div class="h4 report-toolbar-title"><span data-bind="text: report.get('name')"></span> - <span data-bind="text: report.get('displayname') "></span></div>

        <!-- Tools -->
        <div class="ep-form-toolbar-tools mar-no flex">
            <p class="report-print-date">
                <span data-bind="text: $root.translations.reportDate"></span>
                <span data-bind="text: reportDate"></span>
            </p>

            <div 
                class="report-print-date" 
                data-bind="component: { 
                    name: 'views/components/simple-switch', 
                    params: {
                        value: hideEmptyNodes, 
                        config:{ label: $root.translations.hideNullValues, subtitle: ''}
                    }
                }"
            ></div>
        </div>
    </div>
</div>
{% endblock report_title_bar %}


<!-- Report Content -->
<div class="rp-report-container-preview">

    {% block header %}
    {% endblock header %}

    {% block body %}
    <!--ko if: hasProvisionalData() && (editorContext === false) -->
    <div class="report-provisional-flag"><span data-bind="text: $root.translations.pendingProvisionalEditsNotDisplayed"></span></div>
    <!--/ko-->
    <!--ko if: hasProvisionalData() && (editorContext === true && report.userisreviewer === true) -->
    <div class="report-provisional-flag"><span data-bind="text: $root.translations.pendingProvisionalEditsNotDisplayed"></span></div>
    <!--/ko-->
    <!--ko if: hasProvisionalData() && (editorContext === true && report.userisreviewer === false) -->
    <div class="report-provisional-flag"><span data-bind="text: $root.translations.pendingProvisionalEdits"></div>
    <!--/ko-->

    <div class="rp-report-section relative rp-report-section-root">
        <div class="rp-report-section-title">
            <!-- ko foreach: { data: report.cards, as: 'card' } -->
                <!-- ko if: ($parent.hideEmptyNodes() === false || card.tiles().length > 0) && ko.unwrap(card.model.visible) -->
                <!-- ko if: $index() !== 0 --><hr class="rp-tile-separator"><!-- /ko -->
                <div class="rp-card-section">
                    <!-- ko component: {
                        name: card.model.cardComponentLookup[card.model.component_id()].componentname,
                        params: {
                            state: 'report',
                            preview: $parent.report.preview,
                            card: card,
                            pageVm: {...$root, report: $parent.report},
                            hideEmptyNodes: $parent.hideEmptyNodes
                        }
                    } --> <!-- /ko -->
                </div>
                <!-- /ko -->
            <!-- /ko -->
        </div>
    </div>
    {% endblock body %}
    
    
    {% block related_resources %}
    <div class="rp-report-section relative report-related-resources">
        <div class="rp-report-section-title">
            <div class="h4 rp-section-title"><span data-bind="text: $root.translations.relatedResources"></span></div>
        </div>
        
        <!-- ko foreach: { data: Object.values(report.relatedResourcesLookup()), as: 'resourceData' } -->
        <!-- ko if: resourceData.totalRelatedResources > 0 || !$parent.hideEmptyNodes() -->
        <div class="h5 rp-tile-title">
            <span class="rp-tile-title-float" data-bind="text: resourceData.name"></span>
        </div>

        <div class="rp-card-section">
            <!-- ko foreach: { data: resourceData.loadedRelatedResources(), as: 'relatedResource' } -->
            <div class="rp-report-container-tile">
                <div class="row rp-report-tile">
                    <dl class="dl-horizontal">
                        <dt><a data-bind="text: relatedResource.displayName, attr: {href: relatedResource.link}"></a></dt>
                        <!-- ko if: relatedResource.relationship -->
                        <dd data-bind="text: '( ' + relatedResource.relationship + ' )'"></dd>
                        <!-- /ko -->
                    </dl>
                </div>
            </div>
            <!-- /ko -->

            <!-- ko if: resourceData.paginator() && resourceData.paginator().has_next -->
            <button class="btn btn-primary" data-bind="click: $parent.report.getRelatedResources.bind($parent.report, false)">
                <span data-bind="text: $root.translations.loadMore" ></span>
                <span data-bind="text: '(' + resourceData.remainingResources() + ')'"></span>
            </button>

            <button class="btn btn-primary" data-bind="click: $parent.report.getRelatedResources.bind($parent.report, true)">
                <span data-bind="text: $root.translations.loadAll" ></span>
                <span data-bind="text: '(' + (resourceData.totalRelatedResources - resourceData.loadedRelatedResources().length) + ')'"></span>
            </button>
            <!-- /ko -->
                
            <!--ko if: resourceData.totalRelatedResources === 0 -->	
            <div class="rp-report-container-tile">	
                <div class="row rp-report-tile rp-no-data"><span data-bind="text: $root.translations.noRelationshipsAdded"></span></div>	
            </div>	
            <!--/ko-->
        </div>
        <!-- /ko -->
        <!-- /ko -->    
    </div>  
    {% endblock related_resources %}

    {% block footer %}
    {% endblock footer %}
</div>
{% endblock report %}
<!-- /ko -->

<!-- ko if: $data.summary -->
{% block summary %}
<div class="relative report-title-bar">

    <!-- Title Block -->
    <div class="report-toolbar-preview ep-form-toolbar">
        <h4 class="report-toolbar-title"><span data-bind="text: report.get('name')"></span> - <span data-bind="text: report.get('displayname') "></span></h4>

        <!-- Tools -->
        <div class="ep-form-toolbar-tools mar-no flex">
            <p class="report-print-date">
                <span data-bind="text: $root.translations.reportDate"></span>
                <span data-bind="text: reportDate"></span>
            </p>
        </div>
    </div>
</div>

<div class="rp-report-container-preview">
    <div class="rp-report-section relative rp-report-section-root">
        <div class="rp-report-section-title">
            <!-- ko if: report.cards.length > 0 -->
                <!--ko let: { card: report.cards[0] }-->
                <div class="rp-card-section">
                    <!-- ko component: {
                        name: card.model.cardComponentLookup[card.model.component_id()].componentname,
                        params: {
                        state: 'report',
                        preview: report.preview,
                        card: card,
                        pageVm: $root
                    }
                    } --> <!-- /ko -->
                </div>
                <!--/ko-->
            <!-- /ko -->
        </div>
    </div>
</div>
{% endblock summary %}
<!-- /ko -->
<!-- end of not configForm -->
<!-- /ko -->


<!-- ko if: $data.configForm && ($data.configType === 'header') -->
{% block header_form %}
{% endblock header_form %}
<!-- /ko -->
