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

{% block body %}
 <!-- ko if: !inline && item.key -->
<div data-bind="ifnot: inline">
    <span style="text-transform: capitalize;" data-bind="text: item.key" class="aher-block-key"></span>
    <div class="aher-card-control" data-bind="if: item.card">
        <a class="aher-report-a" data-bind="click: function(){add(item.card)}"><i class="fa fa-mail-reply"></i> {% trans "Edit" %} <span style="text-transform: capitalize;" data-bind="text:item.key"></span></a>
    </div>        
 </div>
 <!-- /ko -->

 <!-- ko if: inline && !small && item.key -->
<span style="text-transform: capitalize;" data-bind="text: item.key" class="aher-block-key"></span><span>:</span>
<!-- /ko --> 

<!-- ko if: inline && small && item.key -->
<span style="text-transform: capitalize;" data-bind="text: item.key" class="aher-block-key"></span><span>:</span>
<!-- /ko -->

<!-- ko if: !item.value && item.type != 'timespan' -->
<div data-bind="style: { display: inline ? 'inline': '' }" class="aher-block-value">--</div>
<!-- /ko -->

<!-- ko if: item.type == 'kv' -->
    <!-- ko if: !Array.isArray(item.value) -->
    <div class="aher-block-value" data-bind="text: item.value"></div>
    <!-- /ko -->  
    <!-- ko if: Array.isArray(item.value) -->
        <!-- ko foreach: {data: item.value, as: 'instance', noChildContext: true}-->
            <div class="aher-block-value" data-bind="text: getNodeValue(instance)"></div><!-- ko if: $index() < item.value.length - 1  -->, <!-- /ko -->
        <!-- /ko --> 
    <!-- /ko -->  
<!-- /ko --> 

<!-- ko if: item.type == 'href'-->
<div class="aher-block-value"><a data-bind="text: item.value, attr: { href: item.href, target: '_blank' }"></a></div>
<!-- /ko -->  

<!-- ko if: item.type == 'timespan' -->
<!-- ko if: item.value -->
<div class="firstchild-container">
    <div class="aher-report-subsection-item flex">
        <div class="aher-block-attributes timespan">
            <h6 data-bind="product" class="aher-block-key">Beginning of the beginning: </h6>
            <div data-bind="text: item.value.beginningStart" class="aher-block-value"></div>
        </div>
        <div class="aher-block-attributes timespan">
            <span class="aher-block-key">End of the beginning: </span>
            <div data-bind="text: item.value.beginningComplete" class="aher-block-value">--</div>
        </div>
    </div>
    <div class="aher-report-subsection-item flex" style="margin-top: -5px;">
        <div class="aher-block-attributes timespan">
            <span class="aher-block-key">Beginning of the end: </span>
            <div data-bind="text: item.value.endingStart" class="aher-block-value"></div>
        </div>
        <div class="aher-block-attributes timespan">
            <span class="aher-block-key">End of the end: </span>
            <div data-bind="text:item.value.endingComplete" class="aher-block-value"></div>
        </div>
    </div>
    <div class="aher-report-subsection-item flex column-order pad-top pad-btm">
        <div class="aher-block-attributes">
            <span class="aher-block-key">Name of event timespan: </span>
            <div data-bind="text: item.value.name" class="aher-block-value"></div>
        </div>
        <div class="aher-block-attributes">
            <span class="aher-block-key">Duration: </span>
            <div data-bind="text: item.value.duration" class="aher-block-value"></div>
        </div>
        <div class="aher-block-attributes">
            <span class="aher-block-key">Name of event duration: </span>
            <div data-bind="text: item.value.durationEventName" class="aher-block-value"></div>
        </div>
    </div>
</div>
<!-- /ko -->
<!-- ko ifnot: item.value -->
<div class="aher-nodata-note pad-btm">No timespan available for this resource</div>
<!-- /ko -->
<!-- /ko -->

<!-- ko if: item.type == 'resource'-->
    <!-- ko if: item.value -->
        <!-- ko if: item.value && Array.isArray(item.value) -->
            <!-- ko foreach: {data: item, as: 'instance', noChildContext: true}-->
                <!-- ko if: Array.isArray(instance.value) -->
                <div data-bind="foreach: {data: instance.value, as: 'detail', noChildContext: true}">
                    <!-- ko if: instance.value.instance_details -->
                    <div data-bind="foreach: {data: detail.instance_details, as: 'nested_detail', noChildContext: true}">
                        <div class="aher-block-value"><a data-bind="text: $data.getNodeValue(nested_detail), attr: { href: $data.getResourceLink(nested_detail) }"></a><!-- ko if: $index() < detail.instance_details.length - 1  -->, <!-- /ko --></div>
                    </div>
                    <!-- /ko -->
                    <!-- ko ifnot: instance.value.instance_details -->
                    <div class="aher-block-value"><a data-bind="text: $data.getNodeValue(detail), attr: { href: $data.getResourceLink(detail) }"></a><!-- ko if: $index() < instance.value.length - 1  -->, <!-- /ko --></div>
                    <!-- /ko -->
                </div>
                <!-- /ko --> 

                <!-- ko ifnot: Array.isArray(instance.value) --> 
                    <!-- ko if: Array.isArray(instance.value.instance_details) -->
                    <div data-bind="foreach: {data: instance.value.instance_details, as: 'detail', noChildContext: true}">
                        <div class="aher-block-value"><a data-bind="text: $data.getNodeValue(detail), attr: { href: $data.getResourceLink(detail) }"></a><!-- ko if: $index() < instance.value.instance_details.length - 1 -->, <!-- /ko --></div>
                    </div>
                    <!-- /ko --> 
                    <!-- ko ifnot: Array.isArray(instance.value.instance_details) -->
                    <div data-bind="style: { display: inline ? 'inline': '' }" class="aher-block-value">--</div>
                    <!-- /ko -->
                <!-- /ko -->
            <!-- /ko -->
        <!-- /ko -->
        <!-- ko if: item.value && !Array.isArray(item.value) -->
            <!-- ko ifnot: item.value.instance_details -->
                <div data-bind="style: { display: inline ? 'inline': '' }">
                    <div class="aher-block-value">
                        <a class="aher-block-value-url" data-bind="text: $data.getNodeValue(item.value), attr: { href: $data.getResourceLink(item.value) }"></a>
                    </div>
                </div>
            <!-- /ko -->
            <!-- ko ifnot: Array.isArray(item.value) -->
                <!-- ko if: item.value.instance_details -->
                    <!-- ko if: Array.isArray(item.value.instance_details) -->
                        <div data-bind="foreach: {data: item.value.instance_details, as: 'instance', noChildContext: true}, style: { display: inline ? 'inline': '' }">
                            <div class="aher-block-value">
                                <a class="aher-block-value-url" data-bind="text: $data.getNodeValue(instance), attr: { href: $data.getResourceLink(instance) }"></a><!-- ko if: $index() < item.value.instance_details.length - 1 -->, <!-- /ko -->
                            </div>
                        </div>
                    <!-- /ko --> 
                    <!-- ko ifnot: Array.isArray(item.value.instance_details) -->
                    <div data-bind="style: { display: inline ? 'inline': '' }" class="aher-block-value">--</div>
                    <!-- /ko -->
                <!-- /ko -->
            <!-- /ko -->
        <!-- /ko -->
    <!-- /ko -->
<!-- /ko -->

<!-- ko if: inline -->
<div class="afs-card-control" data-bind="if: item.card">
    <a class="aher-report-a" data-bind="click: function(){add(item.card)}"><i class="fa fa-mail-reply"></i> {% trans "Edit" %} <span style="text-transform: capitalize;" data-bind="text:item.key"></span></a>
</div>
<!-- /ko --> 
 {% endblock body %}
{% endblock report %}
