{% extends "views/components/cards/default.htm" %}
{% load i18n %}


{% block report %}
<div data-bind="css: {'print-hide': !reportExpanded()}">
    <!-- ko if: showHeaderLine--><hr class="rp-tile-separator"><!-- /ko -->
    <div class="rp-card-section" data-bind="css: card.model.cssclass, visible: card.fullyProvisional() !== 'fullyprovisional'">
        <span class="rp-tile-title" data-bind="text: card.model.get('name')"></span>

        <!-- ko if: $index() !== 0 --><hr class="rp-tile-separator"><!-- /ko -->
        {% block report_widgets %}
        
        <!-- ko if: card.model.get('widgets')().length > 0 -->

        <!-- ko if: self.config.displayAsTable -->
            <!-- ko if: self.config.displayAsTable() == true -->
            <!-- <h5 data-bind="click: function(){console.log(ko.unwrap(card))}">CARD</h5> -->
            
                <!-- ko if: card.cardinality == "1" -->
                    <!-- ko foreach: card.tiles, as: 'tile' -->
                    <div>
                        <table class="report-tabular-card">
                            <thead>
                                <tr>
                                    <!-- ko if: card.nodegroupid == "8d41e4c0-a250-11e9-a7e3-00224800b26d" || card.nodegroupid == "c32c7b62-a30f-11e9-a8f2-00224800b26d" -->
                                    <th>Type</th>
                                    <th>Value</th>
                                    <!-- /ko -->
                                    <!-- ko if: card.nodegroupid == "8d41e4b1-a250-11e9-96d3-00224800b26d" --> <!-- file-list nodegroup in consultation -->
                                    <th data-bind="click: function(){console.log(self);}">Document Name</th>
                                    <th>Size</th>
                                    <!-- /ko -->
                                </tr>
                            </thead>
                            <tbody>
                                <!-- ko foreach: card.widgets -->
                                <!-- <tr> -->
                                    <!-- ko if: card.nodegroup_id() == "8d41e4b1-a250-11e9-96d3-00224800b26d" --> <!-- file-list nodegroup in consultation -->
                                        <!-- ko foreach: $parent.data[$data.attributes.node_id()]() -->
                                        <tr>
                                            <td data-bind="text:$data.name"></td>
                                            <td data-bind="text:self.formatSize($data.size), click: function(){console.log($parent.data[$data.attributes.node_id()]());}"></td>
                                        </tr>
                                        <!-- /ko -->
                                    <!-- /ko -->
                                    <!-- ko if: card.nodegroup_id() != "8d41e4b1-a250-11e9-96d3-00224800b26d" -->
                                    <tr>
                                        <td data-bind="text:$data.label()"></td>
                                        <td data-bind="component: {
                                            name: $data.widgetLookup[$data.widget_id()].name,
                                            params: {
                                                tile: $parent,
                                                node: $data.node,
                                                config: $data.config,
                                                label: $data.label(),
                                                value: $parent.data[$data.attributes.node_id()],
                                                state: 'display_value',
                                            }
                                        }, click: function(){console.log(card);}"></td>
                                    </tr>
                                    <!-- /ko -->
                                <!-- </tr> -->
                                <!-- /ko -->
                            </tbody>
                        </table>
                    </div>
                    <!-- /ko -->
                <!-- /ko -->

                <!-- ko if: card.cardinality == "n" -->
                <div>
                    <table class="report-tabular-card">
                        <thead>
                            <tr>
                                <!-- ko foreach: card.widgets -->
                                <th data-bind="text:$data.label()"></th>
                                <!-- /ko -->
                            </tr>
                        </thead>
                        <tbody>
                            <!-- ko foreach: {data: self.getTableData(card.widgets, card.tiles), as: 'rowCells' } -->
                            <tr>
                                <!-- ko foreach: rowCells -->
                                <td data-bind="component: {
                                    name: $data.name,
                                    params: {
                                        node: $data.node,
                                        config: $data.config,
                                        label: $data.label(),
                                        value: $data.value,
                                        state: 'display_value',
                                    }
                                }"></td>
                                <!-- /ko -->
                            </tr>
                            <!-- /ko -->
                        </tbody>
                    </table>
                </div>
                <!-- /ko -->
                
            <!-- /ko -->
        <!-- /ko -->


        <!-- ko if: !self.config.displayAsTable -->
            <!-- ko if: card.tiles().length > 0 -->
            <!-- ko if: reportExpanded() -->
            <!-- ko foreach: { data: self.preview ? [card.newTile] : card.tiles, as: 'tile' } -->
            <div class="rp-card-section" data-bind="css: {'provisional': tile.provisionaledits() !== null && tile.userisreviewer === false, 'fullyprovisional': tile.isfullyprovisional()}, attr: {id: tile.tileid}">
                <div class="rp-report-tile" data-bind="attr: { id: tile.tileid }">
                    <!-- ko if: ko.unwrap(tile.provisionaledits) !== null && tile.userisreviewer === false -->
                    <div class="report-card-provisional-flag">{% trans 'These data are provisional and pending review' %}</div>
                    <!-- /ko-->
                    <dl class="dl-horizontal" data-bind="css: {'provisional': ko.unwrap(tile.provisionaledits) !== null && tile.userisreviewer === false}">
                        <!-- ko foreach: { data: card.model.get('widgets'), as: 'widget' } -->
                            <!-- ko if: widget.visible -->
                            <!-- ko component: {
                                name: widget.widgetLookup[widget.get("widget_id")()].name,
                                params: {
                                    config: configJSON,
                                    label: widget.get("label")(),
                                    node: widget.node,
                                    value: tile.data[widget.node.nodeid],
                                    state: "report",
                                    table: true
                                }
                            } --><!-- /ko -->
                            <!-- /ko -->
                        <!-- /ko -->
                    </dl>
                </div>
            </div>
            <!-- /ko -->
            <!-- /ko -->
            <!-- /ko -->
        <!-- /ko -->

        <!-- /ko -->
        {% endblock report_widgets %}

        {% block report_cards %}
        <div class="rp-report-container-tile" data-bind="visible: card.cards().length > 0">
            <!-- ko if: card.tiles().length > 0 -->
            <!-- ko if: reportExpanded() -->
            <!-- ko foreach: { data: self.preview ? [card.newTile] : card.tiles, as: 'tile' } -->
                <!-- ko foreach: { data: self.preview ? card.cards : tile.cards, as: 'card' } -->
                    <!-- ko component: {
                        name: card.model.cardComponentLookup[card.model.component_id()].componentname,
                        params: {
                            state: 'report',
                            preview: self.preview,
                            card: card,
                            showHeaderLine: self.card.model.get("widgets")().length > 0 || $index !== 0,
                            pageVm: $root
                        }
                    } --> <!-- /ko -->
                <!-- /ko -->
            <!-- /ko -->
            <!-- /ko -->
            <!-- /ko -->
        </div>
        {% endblock report_cards %}
    <!-- </div> -->

        <!-- ko if: card.tiles().length === 0 && !self.preview -->
        <div class="row rp-report-tile rp-no-data">
            <!-- ko ifnot: card.model.get('cardid') -->
            {% trans "Sorry, you don't have access to this information" %}
            <!-- /ko -->
            <!-- ko if: card.model.get('cardid') -->
            <span>{% trans "No data added yet for " %}</span><span data-bind="text: card.model.get('name')"></span>
            <!-- /ko -->
        </div>
        <!-- /ko -->
    </div>
</div>
{% endblock report %}
