{% load template_tags %}
{% load i18n %}

<!-- ko foreach: { data: [$data], as: 'self' } -->
<div>
    <!-- TOC Cards/Widgets -->
    <div class="card-tree-container">
        <!-- ko template: {
            name: 'card-tree',
            foreach: [card],
            as: 'card'
        } --> <!-- /ko -->
    </div>
</div>
<!-- /ko -->

<template id="card-tree">
    <li class="card-tree-list"data-bind="css: {
        'active': self.selection() === card
    }">
        <a href="#" class="cc-link" aria-expanded="true" data-bind="css: {
            'active': self.selection() === card
        },
        click: self.selection">
            <span class="icon-wrap icon-wrap-sm icon-circle bg-card">
                <i class="card-tree-list-icon" data-bind="css: {
                'ion-ios-folder': card.isContainer(),
                'ion-ios-list': !card.isContainer()
                }"></i>
            </span>
            <span class="node-name" data-bind="text: card.get('name')"></span>
            <span class="node-subname" data-bind="text: card.isContainer() ? {% quoted_trans _("Card Container") %} : {% quoted_trans _("Card") %}"></span>
        </a>

        <ul class="card-tree-list-item" aria-expanded="true">
            <div data-bind="sortable: {
                template: card.isContainer() ? 'card-tree' : 'card-tree-widgets',
                data: card.isContainer() ? get('cards') : get('widgets') ,
                as: card.isContainer() ? 'card' : 'widget',
                beforeMove: self.beforeMove
            }, click: function(){window.setTimeout(function(){window.dispatchEvent(new Event('resize'))}, 100)}"></div>
        </ul>
    </li>
</template>

<template id="card-tree-widgets">
    <li class="card-tree-list node-indent" data-bind="css: {
        'active': self.selection() === widget
    }">
        <a href="#" class="cc-link" data-bind="css: {
            'active': self.selection() === widget
        },
        click: self.selection">
            <span class="icon-wrap icon-wrap-sm branch-icon icon-circle bg-report-card">
                <i data-bind="css: widget.icon + ' card-tree-list-icon'"></i>
            </span>
            <span class="node-name" data-bind="text: widget.node.name"></span>
            <span class="node-subname">{% trans "Widget" %}</span>
        </a>
    </li>
</template>
