{% extends "views/report-templates/default.htm" %} 
{% load i18n %} 
{% block report %}

{% block body %}
<!-- ko if: dataConfig.dimension -->
<div class="afs-report-section">
    <h2 class="afs-report-section-title"><i data-bind="click: function() {toggleVisibility(visible.dimensions)}, css: {'fa-angle-double-right': visible.dimensions(), 'fa-angle-double-up': !visible.dimensions()}, attr: {'aria-label': '{% trans "Expand/Collapse" %}'}" class="fa toggle"></i> {% trans "Dimensions" %}</h2>
    <span data-bind="if: cards.dimension">
        <a class="afs-report-a" data-bind="click: function(){add(cards.dimension)}"><i class="fa fa-mail-reply" aria-hidden="true"></i> {% trans "Add Dimension" %}</a>
    </span>

    <!-- Collapsible content -->
    <div data-bind="visible: visible.dimensions" class="afs-report-collapsible-container pad-lft">

        <!-- ko ifnot: dimensions().length -->
        <div class="afs-nodata-note">{% trans "No dimensions for this resource" %}</div>
        <!-- /ko -->
        
        <!-- ko if: dimensions().length -->
        <div class="afs-report-subsection" >
            <div class="firstchild-container">
                <div class="afs-table pad-btm">
                    <table class="table table-striped" cellspacing="0" width="100%">
                        <thead>
                            <tr class="afs-table-header">
                                <th>{% trans "Type" %}</th>
                                <th class="min-tabletl">{% trans "Unit" %}</th>
                                <th class="min-medium">{% trans "Value" %}</th>
                                <th class="none">{% trans "Highest Possible Value" %}</th>
                                <th class="none">{% trans "Lowest Possible Value" %}</th>
                                <th class="afs-table-control all"></th>
                            </tr>
                        </thead>
                        <tbody data-bind="dataTablesForEach: { data: dimensions, dataTableOptions: dimensionTableConfig }">
                            <tr>
                                <td data-bind="text: type"></td>
                                <td data-bind="text: unit"></td>
                                <td data-bind="text: dimensionValue"></td>
                                <td data-bind="text: highestValue"></td>
                                <td data-bind="text: lowestValue"></td>
                                <td class="afs-table-control">
                                    <div data-bind="if: $parent.cards && $parent.cards.dimension">
                                        <a data-bind="click: function() {$parent.edit(tileid, $parent.cards.dimension)},
                                            attr: {'aria-label': $root.translations.edit}">
                                            <i class="fa fa-mail-reply" aria-hidden="true"></i>
                                        </a>
                                        <a data-bind="click: $parent.delete.bind($data, tileid, $parent.cards.dimension),
                                            attr: {'aria-label': $root.translations.delete}">
                                            <i class="fa fa-trash" aria-hidden="true"></i>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- /ko -->
    </div>
</div><span></span>
<div data-bind="if: additionalData" class="afs-report-section">
    <h2 class="afs-report-section-title"><i data-bind="click: function() {toggleVisibility(visible.additionalData)}, css: {'fa-angle-double-right': visible.additionalData(), 'fa-angle-double-up': !visible.additionalData()}, attr: {'aria-label': '{% trans "Expand/Collapse" %}'}" class="fa toggle"></i> {% trans "Additional Data" %}</h2>
    <span data-bind="if: cards.material">
        <a class="afs-report-a" data-bind="click: function(){add(cards.material)}"><i class="fa fa-mail-reply" aria-hidden="true"></i> {% trans "Add Material" %}</a>
    </span>

    <!-- Collapsible content -->
    <div data-bind="visible: visible.additionalData" class="afs-report-collapsible-container pad-lft">

        <!-- ko ifnot: additionalData().length -->
        <div class="afs-nodata-note">{% trans "No material for this resource" %}</div>
        <!-- /ko -->
        
        <!-- ko if: additionalData().length -->
        <div class="afs-report-subsection" >
            <div>
                <div data-bind="foreach: {data: additionalData, as: 'item', noChildContext: true}" class="afs-report-subsection-ite">
                    <div class="afs-block-attributes pad-btm">
                        <div class="afs-keyvalue" data-bind="component: {
                            name: 'views/components/reports/scenes/keyvalue',
                            params: {
                                data: item,
                                inline: true
                            }
                        }"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /ko -->
    </div>
</div>
<!-- /ko -->
<!-- ko if: dataConfig.timespan -->
<div data-bind="component: {
    name: 'views/components/reports/scenes/default',
    params: {
        data: timeSpanData,
    }
}"></div>
<!-- /ko -->
{% endblock body %}
{% endblock report %}